[CSS] 17. 카드 레이아웃 만들기

Mar 11, 2025


<!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>

See more posts

[CSS] 17. 카드 레이아웃 만들기

More articles

[환경세팅] 9. Tomcat

[CSS] 18. 홈페이지 만들기

[CSS] 16. 구조 짜보기

[CSS] 15. 인블로그 만들기