HTML 레퍼런스 북

레이아웃04

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

레이아웃04의 특징

레이아웃04는 처음 구조가 반응형에서도 다른 변화 없이 그대로 나타나기 때문에 float, flex, grid와 같은 속성을 이용하지 않아도 됩니다. 

*{
    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;
}
.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%;
    }
}

결과