[HTML&CSS] Grid 연습문제

[HTML&CSS] Grid 연습문제개발자가 되기까지 (2023.08.16~2024.04.15)/[Basic] HTML & CSS2023. 11. 20. 23:46@rlozlr

Table of Contents

<Quest>

<조건>

화면창이 가장 좁을 때는 min-width : 800px / 가장 클 때는 1200px로 설정하여
화면창이 일정 크기로 변하면 특정 div들의 위치 이동

<Solve>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid 연습문제</title>
    <!-- (가장 좁을 때) min-width 800px / 1200px (가장 클 때) -->
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100%;
        }
        .header{
            height: 60px;
            background-color: rgb(24, 0, 48);
        }
        .main-img{
            height: 300px;
            background-color: cornflowerblue;
        }
        .subject{
            height: 350px;
            background-color: darkmagenta;
        }
        .content{
            height: 500px;
            background-color: midnightblue;
        }
        .sub{
            height: 200px;
            background-color: mediumslateblue;
        }
        .footer{
            height: 200px;
            background-color: darkblue;
        }
        @media screen and (min-width:800px){
            .header{
            height: 60px;
            }
            .main-img{
                height: 550px;
            }
            .subject{
                height: 350px;
            }
            .content{
                width: 50%;
                height: 400px;
                float: left;
            }
            .sub{
                width: 50%;
                height: 400px;
                float: right;
            }
            .footer{
                height: 200px;
                clear: both;
            }
        }
        @media screen and (min-width:1200px){
            .header{
            height: 60px;
            }
            .main-img{
                height: 300px;
            }
            .subject{
                width: 50%;
                height: 400px;
                float: left;
            }
            .content{
                width: 50%;
                height: 200px;
                float: right;
            }
            .sub{
                width: 50%;
                height: 200px;
                float: right;
            }
            .footer{
                height: 200px;
                clear: both;
            }
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="main-img"></div>
    <div class="subject"></div>
    <div class="content"></div>
    <div class="sub"></div>
    <div class="footer"></div>
</body>
</html>

<Result>