[[pagelist(html5)]]
[[tableofcontents]]
----
= 아웃라인을 의식한 마크업 =
* 웹 어플리케이션의 구조를 논리적으로 기술하기 위한 기본 요소
* 문서 내 특정 내용을 의미론적으로 구분 짓는 새로운 element들
* section, article
* outline
* 섹션의 중첩관계
== 참고 사항 ==
* 섹션 요소를 사용할 때는 항상 아웃라인을 염두해 둘 것
* 아웃라인과 상관 없는 범위를 지정하 ㄹ때는 div를 사용할 것
* article 요소를 사용할 것인가 말 것인가는 콘텐츠를 해당 페이지에서 분리해서 사용 가능한가에 따라 결정
* aside는 없어도 문제 없을 섹션에 사용
== HTML5와 이전 문서의 차이 ==
=== before HTML5 ===
* http://www.webguru.pe.kr/zbxe/files/attach/images/2848/655/824/structure-div.gif
=== HTML5 ===
* http://www.webguru.pe.kr/zbxe/files/attach/images/2848/655/824/structure-html5.gif
= 요소 =
== section ==
* 범용적 섹션
=== section 제목 ===
* 하나만 지정 가능
* 여러 제목을 묶어 하나로 만들기 위한 {{{}}} 태그 사용가능
* 섹션에 두개 이상의 제목을 지정하면 암묵적으로 섹션이 생성된다. 그런데 어떤 규칙으로 생성될지 모른다.
=== section root ===
* 하나의 독립된 요소로 인정되는 태그들
* body, fieldset(입력 필드 그룹), td, figure, blockquote
* body가 section root임. HTML5의 컨텐츠는 모두 section에 포함된다는 것을 유추 가능
* 밖의 아웃라인에는 영향을 주지 않는다.
=== section additional info ===
* address
* 바로 위 부모 article이나 body 요소에 관한 연락처 정보
{{{
contents
name
}}}
* time
{{{
...contents...
}}}
=== section header & footer ===
*
== article ==
* 블로그 본문등 다른 부분으로 부터 독립된 섹션
* article 요소만 뽑아내어 이용할 수 있는가가 판단 기준
* 중첩이 가능. 안쪽 article은 밖의 article과 밀접한 연관을 가진다.
== aside ==
* 내용에서 분리되어도 문제없는 섹션
== nav ==
* 네비게이션
* 내부는 어떻게 채워야 하는지 규정 되어 있지 않음. 흔히 ul, li 로 구성.
== FIGURE ==
* figure 요소를 사용하면 콘텐츠 흐름에서 요소를 분리할 수 있고 필요할 경우 캡션을 붙일 수도 있다.
{{{
This is a figure
}}}
= 예제 =
== section§ion ==
{{{~HTML
본문.
댓글.
댓글2.
}}}
== css check ==
{{{
beonit
body header
section header
block section
section content
second section
}}}
= 참고 =
* [http://gsnedders.html5.org/outliner/ HTML5 Outliner]
* [http://www.webguru.pe.kr/zbxe/web2/824655 outline 요소에 대한 전반적인 예제와 설명]
* [http://appletree.or.kr/blog/category/web-development/css/ HTML에 관한 깊이 있는 글을 보여주는 블로그]
