![[CSS] 17. 카드 레이아웃 만들기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-11T09%3A18%3A05.185Z-0b872f39-5019-4fd1-a5a6-bc6e6a4c3446&w=3840&q=75)
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
.card-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.card-item {
border: 1px solid black;
height: 80px;
display: grid;
grid-template-columns: 2fr 5fr;
}
.card-img {
background-image: url("img/london.jpg");
background-size: 100% 100%;
}
.card-content {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="card-list">
<div class="card-item">
<div class="card-img"></div>
<div class="card-content">숙소 및 부티크 호텔</div>
</div>
<div class="card-item">
<div class="card-img"></div>
<div class="card-content">숙소 및 부티크 호텔</div>
</div>
<div class="card-item">
<div class="card-img"></div>
<div class="card-content">숙소 및 부티크 호텔</div>
</div>
<div class="card-item">
<div class="card-img"></div>
<div class="card-content">숙소 및 부티크 호텔</div>
</div>
</div>
</body>
</html>
Share article