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

문정준
Mar 10, 2025
✏️
실습 2

다음 그림과 같이 화면을 배치하시오.
사용 요소

코드 작성


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

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
                Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        }

        .container {
            display: grid;
            grid-template-columns: auto 720px auto;
            background-color: white;
            padding: 10px;
        }

        .content {
            text-align: center;
            align-items: center;
        }

        .menu {
            display: flex;
            justify-content: space-between;
            text-align: left;
            margin-bottom: 75px;
            margin-top: 50px;
        }

        .logo {
            width: 110px;
            height: 110px;
            font-size: 65px;
            font-weight: 900;
        }

        .menu-item-title {
            font-size: 15px;
            color: gray;
        }

        .menu-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 110px;
            height: 110px;
        }

        .menu-item-text {
            display: block;
            margin-bottom: 5px;
        }

        .photo {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            border: none;
        }

        .photo-item {
            background-color: yellowgreen;
            border: none;
            height: 220px;
        }

        .p1 {
            background-color: #d5ecf4;
            height: 450px;
        }

        .p2 {
            grid-column: 2/2 span;
            height: 450px;
        }

        .p3 {
            background-color: #e5efd9;
        }

        .p4 {
            background-color: aqua;
            grid-column: 2/1 span;
            grid-row: 2/2 span;
            height: 450px;
        }

        .p5 {
            background-color: #fcf8c0;
        }

        .p6 {
            background-color: #ebebeb;
        }

        .p8 {
            background-color: #f4c5c3;
            grid-column: 1/2 span;
            grid-row: 4/2 span;
            height: 450px;
        }

        .p9 {
            grid-column: 3/1 span;
            grid-row: 4/2 span;
            height: 450px;
        }

        .p10 {
            background-color: cadetblue;
            grid-column: 1/2 span;
            grid-row: 6/2 span;
            height: 450px;
        }

        .p11 {
            background-color: blueviolet;
        }

        .p12 {
            background-color: coral;
        }

        .p13 {
            background-color: #e5efd8;
            grid-column: 1/2 span;
            grid-row: 8/2 span;
            height: 450px;
        }

        .p15 {
            background-color: #fcf8c0;
        }

        .img-src {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="blank-left"></div>
        <div class="content">
            <div class="menu">
                <div class="logo">▲❚</div>
                <div class="menu-item">
                    <a href="" class="menu-item-title">INFORMATION</a>
                    <div class="menu-item-text">About</div>
                    <div class="menu-item-text">News</div>
                    <div class="menu-item-text">Press</div>
                </div>
                <div class="menu-item">
                    <a href="" class="menu-item-title">PORTFOLIO</a>
                    <div class="menu-item-text">Products</div>
                    <div class="menu-item-text">Graphics</div>
                    <div class="menu-item-text">Sounds</div>
                </div>
                <div class="menu-item">
                    <a href="" class="menu-item-title">NETWORK</a>
                    <div class="menu-item-text">Facebook</div>
                    <div class="menu-item-text">Instagram</div>
                    <div class="menu-item-text">Youtube</div>
                </div>
            </div>
            <hr>
            <div class="photo">
                <div class="photo-item p1"></div>
                <div class="photo-item p2">
                    <img src="1.jpg" alt="" class="img-src">
                </div>
                <div class="photo-item p3"></div>
                <div class="photo-item p4">
                    <img src="2.jpg" alt="" class="img-src">
                </div>
                <div class="photo-item p5"></div>
                <div class="photo-item p6"></div>
                <div class="photo-item p7">
                    <img src="3.jpg" alt="" class="img-src">
                </div>
                <div class="photo-item p8"></div>
                <div class="photo-item p9">
                    <img src="4.jpg" alt="" class="img-src">
                </div>
                <div class="photo-item p10">
                    <img src="5.jpg" alt="" class="img-src">
                </div>
                <div class="photo-item p11">
                    <img src="6.jpg" alt="" class="img-src">
                </div>
                <div class="photo-item p12">
                    <img src="7.jpg" alt="" class="img-src">
                </div>
                <div class="photo-item p13"></div>
                <div class="photo-item p14">
                    <img src="8.jpg" alt="" class="img-src">
                </div>
                <div class="photo-item p15"></div>
            </div>
        </div>
        <div class="blank-right"></div>
    </div>
</body>

</html>
결과

중간의 내용 크기를 720px로 고정 ( 화면을 확대해도 내용이 늘어지지 않음 )