Layout 04

이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다.

container을 이용한 레이아웃

container 요소를 이용해 레이아웃을 구성 (반응형 포함)

    * {
        margin: 0;
        padding: 0;
    }
    #header {
        height: 100px;
        background-color: #e0f2f1;
    }
    #nav {
        height: 300px;
        background-color: #80cbc4;
    }
    #section {
        height: 580px;
        background-color: #26a694;
    }
    #footer {
        height: 100px;
        background-color: #00897b;
    }
    .container {
        width: 1200px;
        height: inherit;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.3);
    }
    @media (max-width: 1220px){
        .container {
            width: 96%;
        }
    }
    @media (max-width: 768px){
        .container {
            width: 100%;
        }
    }

결과