[HTML/CSS] 13. Card 박스 만들기

문정준

Mar 11, 2025

https://blog.naver.com/getinthere/221575713192

✏️

Background-img

배경으로 색이 아닌 이미지 삽입 가능

사이즈를 직접 조절하거나, contain, cover 등 효과 사용 가능

배경 크기에 따라 자동 반복

background-repeat : no-repeat로 반복 해제 가능


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .div-padding {
            padding: 10px;
        }

        .card-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);

        }

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

        .card-img {
            background-image: url("london.jpg");
            background-size: 100% 100%;
        }

        .card-content {
            display: flex;
            font-size: 15px;
            font-weight: bold;
            align-items: center;
        }

        .title {
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <hr>
    <div class="title">에어비엔비 둘러보기</div>
    <div class="card-list div-padding">
        <div class="card-item div-padding">
            <div class="card-img"></div>
            <div class="card-content">숙소 및 부티크 호텔</div>
        </div>
        <div class="card-item div-padding">
            <div class="card-img"></div>
            <div class="card-content">트립</div>
        </div>
        <div class="card-item div-padding">
            <div class="card-img"></div>
            <div class="card-content">어드벤처</div>
        </div>
        <div class="card-item div-padding">
            <div class="card-img"></div>
            <div class="card-content">레스토랑</div>
        </div>
    </div>
</body>

</html>

See more posts

[HTML/CSS] 13. Card 박스 만들기

Background-img

[HTML/CSS] 15. Airbnb 만들기

[HTML/CSS] 14. 전체 실습 예제

[HTML/CSS] 12-2. GridLayout 실습 2

[HTML/CSS] 12-1. GridLayout 실습 1