카드가 가로로 4장 열거 되는게 아니라, 세로로 하나씩 나오는데 왜 그런걸까요?
작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>127 홈마 사진 평점 모음집</title>
<link
href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap"
rel="stylesheet"
/>
<style>
.post-box {
background-image: url(https://img.marieclairekorea.com/2021/09/mck_61511b0e0fb86.jpg);
background-position: center;
background-size: cover;
height: 400px;
color: antiquewhite;
text-align: center;
padding-top: 20px;
font-size: 30px;
}
.btn {
font-size: 20px;
padding: 20px;
border-radius: 20px;
background-color:transparent;
color: white;
}
.wrap{
background-color: aqua;
}
</style>
</head>
<body>
<div class="post-box">
<h1>우리칠 사진 모음집</h1>
<button class="btn">사진기록하기</button>
</div>
<div class="wrap">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
