레이아웃04

레이아웃04

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

float을 이용한 레이아웃 + 부모요소 컨테이너 사용방법

아이디 클래스 선택자 선언
id : 한 번 정도 사용하는 것이 좋으며 전체적인 틀, 스크립트에서 많이 사용한다. id로 선언할 경우 후에 고치는 것이 까다롭다.
class : 두개 이상 (중복 가능)사용이 가능하며 후에 고치는 것이 유동적인 편. 주로 세부적인 영역이나 반복적인 것에 많이 사용된다.

*{
    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;
}
/* .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;
} 위의 부모요소들의 속성들은 모두 동일하기 때문에 각 부모요소의 선택자를 동일하게 선언하여 밑처럼 CSS스타일을 한 번에 주는 것이 좋다.*/

.containar {
    width: 1200px;
    height: inherit;
    margin: 0 auto;
    background-color: rgba(0,0,0,0.3);
}

@media (max-width:1220px){
    .containar {
        width: 96%;
    }
}
@media (max-width:768px){
    .containar {
        width: 100%;
    }
}

결과