HTML 레퍼런스 북

레이아웃 04

전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정한다.

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

전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정한다. 

* {
    margin: 0;
    padding: 0;
}
#header {
    height: 100px;
    background-color: #E0F2F1;
}
#nav {
    height: 300px;
    background-color: #80CBC4;
}
#section {
    height: 500px;
    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 차이점
id : # / class : . 으로 표현
id : 한번만 / class : 두 번 이상

전체적 틀, 스크립트 -> id
세부적 영역, 반복 -> class
*/

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

결과