![[HTML/CSS]13. Card 박스 만들기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-11T01%3A34%3A09.079Z-aef086e0-fa0f-4a87-b830-4f1fb51747f6&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("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