<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Serif KR', serif;
}
.mytitle {
width: 100%;
height: 250px;
/*어둡게하기 */
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://post-phinf.pstatic.net/MjAxNzA4MjVfMjU1/MDAxNTAzNjIzMjc4OTQ2.kOv2LCDMVhzyyAPV1847BIKJDq0eT7dTXG7k-2z8x2gg.Qy1lPvreizmw6RzJst-d3H3xyalKIvrPNWk8aMibeiMg.JPEG/GettyImages-678829886.jpg?type=w1200');
background-position: center;
background-size: cover;
color: white;
/*가운데정렬*/
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.memo {
}
.mypic {
width: 95%;
max-width: 500px;
margin: 20px auto 20px auto;
box-shadow: 0px 0px 3px 0px black;
padding: 20px;
}
/*왜 안될까?*/ /*버튼에 이름을 안달아놨음...*/ /*버튼은 버튼이 이름이다*/
.bu > button {
margin-top: 10px;
}
.wrap {
width: 95%;
max-width: 500px;
margin: 20px auto 20px auto;
}
</style><body>
<div class="mytitle">
<h1>평내호평 야식대장</h1>
</div>
<div class="mypic">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name" placeholder="url">
<label for="name">야식이름</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
style="height: 100px"></textarea>
<label for="comment">추천이유</label>
<div class="bu">
<button onclick="save_comment()" type="button" class="btn btn-dark">댓글 남기기</button>
</div>
</div>
</div>
<div class="wrap">
<div class="row row-cols-3 row-cols-md-1 g-4">
<div class="col">
<div class="card">
<h5 class="card-title">여기에 야식이름이 들어갑니다</h5>
<p class="mycomment"> - 여기에 코멘트가 들어갑니다</p>
</div>
</div>
<div class="col">
<div class="card">
<h5 class="card-title">여기에 야식이름이 들어갑니다</h5>
<p class="mycomment"> - 여기에 코멘트가 들어갑니다</p>
</div>
</div>
<div class="col">
<div class="card">
<h5 class="card-title">여기에 야식이름이 들어갑니다</h5>
<p class="mycomment"> - 여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
</div>
</body>
</html>똑같은 복사 붙여넣기인데도 불구하고 버튼의 위치조정이나 글씨체 바꾸기, 박스의 크기조정이 어렵다
