Layout 04

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%;
        }
    }

결과