<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 id="footer">
            <div class="container"></div>
        </div>
    </div>
    * {
        margin: 0;
        padding: 0;
    }
    #wrap {
        width: 100%;
    }
    #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;
        background-color: rgba(0,0,0,0.3);
    }
    .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. 부모 박스 영역에 overflow: 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;
        } 
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.