[HTML]아웃라인 잡기 순서

<행 중심의 레이아웃 분할>

1행	Header (Navigation            Navigation)
2행	Section ,aside
3행	Footer

 
(레이아웃의 구성) 

아웃라인을 구성하는 요소들을 사용해서 레이아웃을 만들어야한다면 어떻게 해야할까?

먼저 Section  Element를 사용해 장이나 절 단위 나눠준다음 제목과 본문을 하나로 묶어준다.
그다음 Div Element를 사용해 style 적용해서 크기와 위치를 정해준다.

---

아웃라인 구성 요소들

 

<Section  Element>

nav Element

(Header,좌측 우측에 포함되는 Link에 사용. 주로 ul Element를 사용하여 목록으로 Navigation Link Markup한다.)

article Element

(블로그에 포스트 된 글들, 뉴스사이트의 기사들의 묶음 같은 독립된 하나의 컨텐츠 나타냄. 

각 포스트들은 Section으로 나뉘고 section들을 하나의 article Element로 감싸는 방식으로 사용.)

aside Element

(보충기사, 사이드바,광고 와같이 Main 컨텐츠와 관련이 적어 분리될 수 있는곳에 사용.

nav Element를 그룹화 할때도 사용.)

hgroup Element

(제목과 관련된 소제목이나 부제등을 그룹화하기 위해 사용. h1~h6 Element 만 포함할 수 있다.)
Header Element(HeadLine Element나 hgroup, nav를 넣는다.)

Footer Element(Section의 저자정보나, 관련링크, 저작권 표기등을 표현하는데 사용.)

---

Section을 나눌때에는 단독, 전체로 묶어준다는 개념으로 생각하면 편하다.
예를 들어 본문Section인지 aside인지 헷갈릴때, 본문이 지워진다고 가정한다면  
본문과 분리될수 있는 컨텐츠인지를 기준으로 잡고 구분해주자.

---

<Div Element>

style(스타일)

width(가로 길이)

height(세로 길이)

border(테두리 굵기)

background-color(배경 색)

float(좌우 정렬)

margin(상하좌우 여백)