레이아웃 배치 4

레이아웃(Layout) 배치

레이아웃 배치 네번째 시간입니다.
주요 콘텐츠들을 가운데로 배치하고 화면이 늘어나도 뒷요소들을 계속해서 표현해주는 구조입니다.
요즘 실제 웹들은 이러한 구조를 가장 많이 사용하고 있습니다.

---

container라는 부모요소를 활용한 레이아웃

이번 구조는 따로 레이아웃에 관련된 속성값을 부여할 필요가 없는 구조입니다.
가운데 주요 콘텐츠 요소들을 container로 묶어 설정합니다.
container의 높이값은 직접 입력해도 되지만, height: inherit를 이용해 부모요소의 높이값을 그대로 상속받도록 합니다.

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

결과