일단 이미지를 보시면 문제가 2가지가 있습니다. ㅠㅠ
1.첫번째는 post와 card가 중첩되었어요 -_-;;
아니 그냥 body의 순서대로 아래로 가는게 아니었던가요?? 제가 일일이 margin-top을 지정해줘야하나요?
어떻게 해결할 수 있을까요
2.두번재는 card의 길이가 가변길이라는 것입니다.
이범규튜터님의 답안에는 같은 말만 써있으니까.. 그냥 같은 길이로 보이지만, 제가 만든거에서 직접 글을 써보니 가변길이로 되어있어서 너무 예쁘지가 않아요. 그래서 width를 500px로 고정해 보아도 안됩니다.
전체 코드 첨부하는게 답변이 편하실 것 같아 전체 코드 첨부합니다!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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=Gowun+Batang&family=Noto+Serif+KR:wght@300&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Batang', serif;
}
.mytitle{
height : 250px;
width : auto;
object-fit:cover;
color:white;
background-color: green;
background-image : linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://postfiles.pstatic.net/MjAyMTA2MjlfMjcy/MDAxNjI0OTc3ODAxMDU0.62mkbhetARFYZX8XO7JMlpaV9Hd4Tn8S0GNA9tkS_sEg.hXHKg2-uUGWYo8og4Nhqxe9nhFwhIjUdGmmnFLIkbecg.JPEG.dltpdud03/%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C%ED%8C%8C%EC%9D%BC%EF%BC%8D179.jpg?type=w580);
background-position : center;
background-size : scale-down;
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
}
.mypost{
max-width:500px;
width:95%;
padding:20px;
margin : 20px auto 20px auto;
box-shadow: 0px 0px 3px 0px gray;
}
.mypost > button {
margin-top: 15px;
}
.mycard{
width:500px;
height:200px;
padding:20px;
margin : 20px auto 20px auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
}
.mycard > .card{
margin-top:10px;
margin-bottom:10px;
}
</style>
</head>
<body>
<div class="mytitle">
<p><h1> 아이유 팬명록 </h1></p>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height:100px"></textarea>
<label for="floatingTextarea">응원댓글</label>
</div>
<p><button type="button" class="btn btn-dark mt-2">응원남기기</button></p>
</div>
<div class="mycard">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p> 어두운 모습, 밝은 모습, 틈이 보이는 모습 모두 사랑스러워요</p>
<footer class="blockquote-footer"> 유유 <cite title="Source Title"></cite></footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>보보경심려, 나의 아저씨 보고 팬이 되었어요</p>
<footer class="blockquote-footer">해씨 <cite title="Source Title"></cite></footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>love poem의 가사가 힐링이 됩니다</p>
<footer class="blockquote-footer">힐러 <cite title="Source Title"></cite></footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>
