[CSS] 12. Grid-Layout 실습

김주희

Mar 12, 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="en">
<head>
    <style>

        *{
            box-sizing: border-box;
            background-color: rgb(233, 232, 232);
        }

        .container{
            display: grid;
            grid-template-columns: 1fr 720px 1fr;
            text-align: center;
            align-items: center;
            padding: 20px;
            margin: 0 auto;
        }

        .title{
            color:rgb(238, 147, 147);
            font-size: 30px;
            font-weight: 700;
            margin: 10px 0;
        }

        .sub-box{
            font-size: 16px;
            font-weight: 450;
            margin: 5px 0;
            padding: 10px 20px;
        }

        .img-grid-box{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            align-items: center;
            gap: 10px;
        }

        .img-box{
            display:grid;
            position : relative;
            height: auto;
        }
        
        .img-item{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .img-name{
            position: absolute;
            width: 150px;
            top: 44%;
            left: 14%;
            font-size: 20px;
            font-weight: 700;
            background-color: rgba(0, 0, 0, 0);
            color: rgb(255, 255, 255);
        }

        .btn{
            padding: 10px 10px;
        }
        
        .btn-item{
            background-color: rgb(233, 78, 78);
            color: white;
            width: 120px;
            height: 25px;
            font-size:10px;
            font-weight: 700;
            border-radius: 10px;
            border: 1px solid black;
            cursor: pointer;
            box-shadow: 3px 3px 3px 0px rgb(129, 122, 122);
        }


    </style>
</head>


<body>
    <div class = "container">
        <div class = "left-box"></div>
        <div class = "main-box">
            <div class = "title">Meet Guidebooks</div>
            <div class = "sub-box">Discover hundreds of local spots recommended by Airbnb hosts</div>
            <div class = "img-grid-box">
                <div class = "img-box">
                    <div class = "img-name">San Francisco</div>
                    <img src = "san-francisco.jpg" class = "img-item" alt = none>
                </div>
                <div class = "img-box">
                    <div class = "img-name">New York</div>
                    <img src = "new-york.jpg" class = "img-item" alt = none>
                </div>
                <div class = "img-box">
                    <div class = "img-name">London</div>
                    <img src = "london.jpg" class= "img-item" alt = none>
                </div>
            </div>
            <div class = "btn">
                <button class = "btn-item" >See All Guidebooks</button>
            </div>
            <div class = "title">Just for the weekend</div>
            <div class = "sub-box">Discover new, inspiring places close to home</div>
            <div class = "img-grid-box">
                <div class = "img-box">
                    <div class = "img-name">Napa</div>
                    <img src = "napa.jpg" class = "img-item" alt = none>
                </div>
                <div class = "img-box">
                    <div class = "img-name">Sonoma</div>
                    <img src = "sonoma.jpg" class = "img-item" alt = none>
                </div>
                <div class = "img-box">
                    <div class = "img-name">San Francisco</div>
                    <img src = "san-francisco-2.jpg" class= "img-item" alt = none>
                </div>
            </div>
        
            <div class = "btn">
                <button class = "btn-item" >See All Destinations</button>
            </div>

        </div>
        <div class = "right-box"></div>
    </div>
    

</body>
</html>

강사님 풀이


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

6행 3열


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
            Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        }

        div{
            border: 1px solid black;
        }
        .header{
            display: grid;
            grid-template-columns: 1fr 4fr;
        }
        .menu{
            display: flex;
            justify-content: space-around;
        }
        .logo{
            font-size: 100px;
        }



        .main{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
        }
        .box1 {
            width: 300px;
            background-color: #d5ecf4;
            display: inline-block;
            grid-row: 1 / 2 span;
        }
        .box2 {
            height: 600px;
            background-color: #d5ecf4;
            display: inline-block;
            
            grid-row: 1 / 2 span;
            grid-column: 2 / 2 span;
        }

        .box3 {
            width: 300px;
            height: 300px;
            background-color: #e5efd9;
            display: inline-block;
        }
        .box4 {
            width: 300px;
            height: 300px;
            background-color: #fcf8c0;
            display: inline-block;
        }
        .box5 {
            width: 300px;
            height: 300px;
            background-color: #fcf8c0;
            display: inline-block;
            
            grid-row: 1 / 2 span;
        }
        .box6 {
            width: 300px;
            height: 300px;
            background-color: #ebebeb;
            display: inline-block;
        }
        .box7 {
            height: 600px;
            background-color: #d5ecf4;
            display: inline-block;
            
            grid-row: 1 / 2 span;
            grid-column: 2 / 2 span;
        }
        .box8 {
            width: 300px;
            background-color: #d5ecf4;
            display: inline-block;
            grid-row: 1 / 2 span;
        }

    </style>
</head>

<body>
    <div class = "header">
        <div class = "logo">▲❚</div>
        <div class = "menu">
            <div class = "info">
                <div>
                    <a href = "https://www.google.com">INFORMATION</a>
                </div>
                <div>About</div>
                <div>News</div>
                <div>Press</div>
            </div>
            <div class = "portfolio">
                <div>
                    <a href = "https://www.google.com">PORTFOLIO</a>
                </div>
                <div>Products</div>
                <div>Graphics</div>
                <div>Sounds</div>
            </div>
            <div class = "network">
                <div>
                    <a href = "https://www.google.com">NETWORK</a>
                </div>
                <div>Facebook</div>
                <div>Instagram</div>
                <div>Youtube</div>
            </div>
        </div>
    </div>
    <div class = "main">
        <div class = "box1"></div>
        <div class = "box2"></div>
        <div class = "box3"></div>
        <div class = "box4"></div>
        <div class = "box5"></div>
        <div class = "box6"></div>
        <div class = "box7"></div>
        <div class = "box8"></div>  
        <div class = "box9"></div>
    </div>
</body>
</html>

[CSS] 12. Grid-Layout 실습

1. 실습 1

강사님 풀이

2. 실습 2

강사님 풀이

More articles

[HTML/CSS] 14. 전체 실습

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

[CSS] 11. Img CSS와 Icon

[CSS] 10. CSS Position