[HTML/CSS] 13. Card Box 만들기

Mar 12, 2025

Contents


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* div{
            border : 1px solid black;
            padding : 5px;
        } */
        .card-list{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .card-item{
            height: 80px;
            display: grid;
            grid-template-columns: 2fr 5fr;
            border : 1px solid black;
        }

        /* background img -> 영향을 안줘서 밀려나지 않음 다른 박스를 헤치지 않아용
        img랑 달라서 object-fit: fill;같은거 사용 불가능  */
        .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>

index.html → 메인 페이지 index라고 함(?

See more posts

[HTML/CSS] 13. Card Box 만들기

1. Background Image

More articles

[CSS] 15. 공통 CSS 추출

[HTML/CSS] 14. 전체 실습

[CSS] 12. Grid-Layout 실습

[CSS] 11. Img CSS와 Icon