[HTML5] 레이아웃 구성하기

레이아웃 구성하기

---

사이트의 전체 넓이와 정렬을 구성하기 위한 <div> 태그 안에 각 영역을 구성하기 위한 <div>태그를 배치하고, 

float 속성을 사용하여 각 영역을 배치하는 처리

3단 레이아웃

1
2
3
4
5
    <div id="container">
        <div id="hedaer">상단영역</div>
        <div id="content">내용영역</div>
        <div id="footer">하단영역</div>
    </div>
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

또는

1
2
3
4
5
    <div id="container">
        <header>상단영역</header>
        <section>내용영역</section>
        <footer>하단영역</footer>
    </div>
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

- #container에 넓이와 margin속성을 사용하여 정렬을 구성

- #header, #footer에 각 영역에 대한 height지정 (고정높이)

- #content 영역은 내용에 따라 높이가 변경되어야 하므로 min-height지정(가변 높이)

사이드바 구성

1
2
3
4
5
6
7
8
    <div id="container">
        <div id="hedaer">상단영역</div>
        <div id="content">
            <div id="sidebar">사이드바</div>
            <div id="body">내용영역</div>
        </div>
        <div id="footer">하단영역</div>
    </div>
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

- 3단 레이아웃 상태에서 #content에 사이드바와 본문영역을 위한 <div<를 추가

- #sidebar와 #body를 float 속성을 사용하여 가로 배치