<div id="wrap">
        <div id="header">
            <div class="container">
            </div>
        </div>
        <div id="nav">
            <div class="container">
            </div>
        </div>
        <div id="main">
            <div class="contents container clearfix">
                <div class="cont1"></div>
                <div class="cont2"></div>
                <div class="cont3"></div>
                <div class="cont4"></div>
                </div>
            </div>
        </div>
        <div id="footer">
            <div class="container">
            </div>
        </div>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {}

        #header {
            width: 100%;
            height: 100px;  
            background-color: #eeebe9;
        }
        #nav {
            width: 100%;
            height: 100px;
            background-color: #B9AAA5;
        }
        #main {
            width: 100%;
            height: 780px;
            background-color: #886F65;
        }
        #footer {
            width: 100%;
            height: 100px;
            background-color: #4E342E;
        }

        .container {
            width: 1200px;
            height: inherit;
            margin: 0 auto;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.15);
        }

        .contents .cont1 {
            width: 100%;
            height: 100px;
            background-color: #74574A;
        }
        .contents .cont2 {
            width: 100%;
            height: 200px;
            background-color: #684D43;
        }
        .contents .cont3 {
            width: 50%;
            height: 480px;
            background-color: #594139;
            float: left;
        }
        .contents .cont4{
            width: 50%;
            height: 480px;
            background-color: #4A352F;
            float: left;
        }
          
        /* 
            float으로 인한 영역 깨짐 방지법
            1. 깨지는 영역에 clear : both를 설정한다.
            2. 부모박스 영역에 onerflow : hidden을 설정한다.
            3. clearfix를 설정한다.
        */

        .clearfix::before,
        .clearfix::after {
            content: '';
            display: block;
            line-height: 0;
        }
        .clearfix::after{
            clear: both;
        }

        @media(max-width:1220px){
            .container {
                width: 96%;
            }

            .contents .cont1 {
                width: 30%;
                height: 780px;
                float: left;
            }
            .contents .cont2 {
                width: 70%;
                height: 390px;
                float: left;
            }
            .contents .cont3 {
                width: 35%;
                height: 390px;
            }
            .contents .cont4 {
                width: 35%;
                height: 390px;
            }
        }

        @media(max-width:768px){
            
            .container {
                width: 100%;
            }

            .contents .cont1 {
                width: 30%;
                height: 780px;
                
            }
            .contents .cont2 {
                width: 70%;
                height: 260px;
               
            }
            .contents .cont3 {
                width: 70%;
                height: 260px;
            }
            .contents .cont4 {
                width: 70%;
                height: 260px;
            }
        }

        @media(max-width:480px){
            
            .contents .cont1 {
                width: 100%;
                height: 150px;
            }
            .contents .cont2 {
                width: 100%;
                height: 210px;
               
            }
            .contents .cont3 {
                width: 100%;
                height: 210px;
            }
            .contents .cont4 {
                width: 100%;
                height: 210px;
            }
        }

    </style>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.