[HTML/CSS] 7. Grid-Layout 실습

김건우

Mar 13, 2025

Contents

1. 실습 1 2. 실습 2

1. 실습 1

실습 그리드 레이아웃 CSS

1. gridlayout을 이용하여 아래와 같이 화면을 배치하시오. 2. 이미지 첨부 완성물 index.html style.css

https://blog.naver.com/codingspecialist/221415785447


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

<head>
    <style>
        * {
            box-sizing: border-box;
            padding: 0px;
            margin: 0px;
        }

        .box-all {
            display: flex;
            justify-content: center;
        }

        .box-inner {
            width: 70%;
            padding: 10px 30px;
            background-color: rgb(236, 236, 236);
        }

        .box-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }

        .box-grid>div {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .img-title {
            position: absolute;
            color: white;
            /* transform: translateX(-50%);
            left: 50%;
            top: 50%; */
        }

        .box-grid img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .title {
            font-size: 25px;
            color: rgb(224, 145, 145);
            font-weight: bold;
        }

        .t-center {
            text-align: center;
        }

        .btn {
            border: 1px solid black;
            height: 30px;
            width: 200px;
            border-radius: 10px;
            background-color: rgb(224, 145, 145);
            color: white;
        }

        .s1>div {
            padding: 5px 0px;
        }
    </style>
</head>

<body>
    <div class="box-all">
        <div class="box-inner">
            <div class="s1 t-center">
                <div class="title">Meet GuideBooks</div>
                <div>Discover hundreads of local spots recommanded by Airbnb hosts.</div>
                <div class="box-grid">
                    <div>
                        <div class="img-title">London</div><img src="img/london.jpg">
                    </div>
                    <div>
                        <div class="img-title">London</div><img src="img/london.jpg">
                    </div>
                    <div>
                        <div class="img-title">London</div><img src="img/london.jpg">
                    </div>
                </div>
                <div><button class="btn">See All Guidbooks</button></div>
            </div>
            <div class="s1 t-center">
                <div class="title">Meet GuideBooks</div>
                <div>Discover hundreads of local spots recommanded by Airbnb hosts.</div>
                <div class="box-grid">
                    <div>
                        <div class="img-title">London</div><img src="img/london.jpg">
                    </div>
                    <div>
                        <div class="img-title">London</div><img src="img/london.jpg">
                    </div>
                    <div>
                        <div class="img-title">London</div><img src="img/london.jpg">
                    </div>
                </div>
                <div><button class="btn">See All Guidbooks</button></div>
            </div>
        </div>
    </div>
</body>

</html>

2. 실습 2

실습 그리드 레이아웃 2

Emoji font-family 색깔 완성 화면 첨부 사진

https://blog.naver.com/codingspecialist/221498513779