<body>
    <div id="wrap">
        <div id="header">
            <div class="container"></div>
        </div>
        <div id="nav">
            <div class="container"></div>
        </div>
        <div id="section">
            <div class="container"></div>
        </div>
        <div id="footer">
            <div class="container"></div>
        </div>
    </div>
</body>
<style>
        *{
            margin: 0;
            padding: 0;
        }
        
        #header {
            height: 100px;
            background-color: #E0F2F1;
        }
        #nav {
            height: 300px;
            background-color: #80CBC4;
        }
        #section {
            height: 580px;
            background-color: #26A69A;
        }
        #footer {
            height: 100px;
            background-color: #00897b;
        }
        /* .header_container{
            width: 1200px;
            height: 100px;
            background-color: #B2DFDB;
            margin: 0 auto;
        }
        .nav_container{
            width: 1200px;
            height: 300px;
            background-color: #4DB6AC;
            margin: 0 auto;
        }
        .section_container{
            width: 1200px;
            height: 580px;
            background-color: #009688;
            margin: 0 auto;
        }
        .footer_container{
            width: 1200px;
            height: 100px;
            background-color: #00796B;
            margin: 0 auto;
        } */

        /* 
            아이디/클래스
            #/.
            한번/두개 이상
            전체적인 틀, 스크립트 --> id
            세부적인 영역, 반복 --> class
        */

        .container {
            width: 1200px;
            height: inherit; /* inherit은 상속*/
            margin: 0 auto;
            background-color: rgb(0,0,0,0.3);
        }
        @media (max-width: 1220px){
            .container {
                width: 96%;
            }
        }
        @media (max-width: 768px){
            .container {
                width: 100%;
            }
        }
    </style>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.