레이아웃 - 04

레이아웃04

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

float을 이용한 레이아웃

container영역을 만들어 레이아웃을 설정합니다. id는 하나의 이름만 사용가능하나 class는 중복하여 사용이 가능합니다. 따라서 전체적인 틀은 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;
}
.container {
    width: 1200px;
    height: inherit;        /* class는 중복 가능, 부모에게 height값 받아옴 */
    margin: 0 auto;
    background-color: rgba(0,0,0,0.3);       
}

태그 설정

<div id="wrap">
    <div id="header">
        <div class="container"></div>
    </div>
    <div id="nav">
        <div class="container"></div>
    </div>
    <div id="section">
        <div class="container"></div>
    </div>
    <div id="footer">
        <div class="container"></div>
    </div>
</div>

결과