<div id="wrap">
        <header id="header">
            <div class="container"></div>
        </header>
        <nav id="nav">
            <div class="container"></div>
        </nav>
        <main id="main">
            <div class="contents container">
                <div class="cont1"></div>
                <div class="cont2"></div>
                <div class="cont3"></div>
                <div class="cont4"></div>
            </div>
        </main>
        <footer id="footer">
            <div class="container"></div>
        </footer>
    </div>
    <style>
        * {
            margin: 0;
        }
        #wrap {}
        #header {
            height: 100px;
            background-color: #EEEBE9;
        }
        #nav {
            height: 100px;
            background-color: #B9AAA5;  
        }
        #main {
            height: 780px;
            background-color: #886F65;  
        }
        #footer {
            height: 100px;
            background-color: #4E342E;  
        }

        .container {
            width: 1200px;
            height: inherit;
            margin: 0 auto;  /*m0-a */
            background-color: rgba(0, 0, 0, 0.3);
        }
        .contents {
            display: grid;
            grid-template-areas:  /* 이름 */
                "cont1 cont1"
                "cont2 cont2"
                "cont3 cont4"
            ;
            grid-template-columns: 50% 50%;     /* 가로 */
            grid-template-rows: 100px 200px 480px;  /* 세로 */
        }
        .contents .cont1 {
            background-color: #74574A;
            grid-area: cont1;
        }
        .contents .cont2 {
            background-color: #684D43;
            grid-area: cont2;
        }
        .contents .cont3 {
            background-color: #594139;
            grid-area: cont3;
        }
        .contents .cont4 {
            background-color: #4A352F;
            grid-area: cont4;
        }

        @media(max-width:1220px){
            .container{
                width: 96%;
            }
            .contents {
                grid-template-areas:  /* 이름 */
                "cont1 cont2 cont2"
                "cont1 cont3 cont4"
                    ;
                grid-template-columns: 1fr 1fr 1fr;      /* 비율이 같게 만들기 repeat (3 , 33.3333%)  (3 ,1fr).. ...*/
                grid-template-rows: repeat(2,1fr);  /* 세로 */
            }
        }
        @media(max-width:769px){
            .container{
                width: 100%;
            }
            .contents {
                grid-template-areas:  /* 이름 */
                    "cont1 cont2"
                    "cont1 cont3"
                    "cont1 cont4"
                ;
                grid-template-columns: 30% 70%;      /* 비율이 같게 만들기 repeat (3 , 33.3333%)  (3 ,1fr).. ...*/
                grid-template-rows: repeat(3,1fr);  /* 세로 */
            }
        }
        @media(max-width:480px){
            .contents {
                grid-template-areas:  /* 이름 */
                    "cont1"
                    "cont2"
                    "cont3"
                    "cont4"
                ;
                grid-template-columns:100% ;     /* 비율이 같게 만들기 repeat (3 , 33.3333%)  (3 ,1fr).. ...*/
                grid-template-rows: 150px 210px 210px 210px;  /* 세로 */
            }
        }
    </style>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.