레이아웃(Layout) 유형04

레이아웃04

이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이러한 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 다음의 레이아웃을 작업해 보도록 하겠습니다.

컨테이너(Container)를 이용한 레이아웃

배치할 요소들을 감싸는 부모 요소를 컨테이너(container)라고 합니다. 컨테이너를 이용해 레이아웃을 만드는 예시입니다. inherit 속성을 사용하면 자식 요소에게 스타일 속성을 상속할 수 있습니다.

*{
    margin: 0;
    padding: 0;
}
#header{
    height: 100px;
    background-color: #E0F2F1;
}
#nav{
    height: 300px;
    background: #80CBC4;
}
#section{
    height: 580px;
    background-color: #26A69A;
}
#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%;
    }
}

결과