Latest revision as of 01:40, 27 March 2026

아웃라인을 의식한 마크업

웹 어플리케이션의 구조를 논리적으로 기술하기 위한 기본 요소
문서 내 특정 내용을 의미론적으로 구분 짓는 새로운 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 제목

하나만 지정 가능
여러 제목을 묶어 하나로 만들기 위한

<hgroup>

태그 사용가능

섹션에 두개 이상의 제목을 지정하면 암묵적으로 섹션이 생성된다. 그런데 어떤 규칙으로 생성될지 모른다.

section root

하나의 독립된 요소로 인정되는 태그들
body, fieldset(입력 필드 그룹), td, figure, blockquote
- body가 section root임. HTML5의 컨텐츠는 모두 section에 포함된다는 것을 유추 가능
밖의 아웃라인에는 영향을 주지 않는다.

section additional info

address
- 바로 위 부모 article이나 body 요소에 관한 연락처 정보

<article>
contents
<address>
<a href="mailto:smaple@example.com">name</a>
</address>
</article>

time

<article>
...contents...
<time datetime="2009-10-05" pubdate>10월 5일</time>
</article>

section header & footer

article

블로그 본문등 다른 부분으로 부터 독립된 섹션
article 요소만 뽑아내어 이용할 수 있는가가 판단 기준
중첩이 가능. 안쪽 article은 밖의 article과 밀접한 연관을 가진다.

aside

내용에서 분리되어도 문제없는 섹션

nav

네비게이션
내부는 어떻게 채워야 하는지 규정 되어 있지 않음. 흔히 ul, li 로 구성.

FIGURE

figure 요소를 사용하면 콘텐츠 흐름에서 요소를 분리할 수 있고 필요할 경우 캡션을 붙일 수도 있다.

<figure>

   <img src="./figure.jpg" alt="figure image" />

    <figcaption> This is a figure</figcaption>

</figure>

예제

section&section

    <article>
      본문.
      <section>
        <article>
          댓글.
        </article>
        <article>
          댓글2.
        </article>
      </section>
    </article>

css check

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>beonit</title>
  </head>
  <body>
    <h1> body header </h1>
    <section>
      <h2> section header </h2>
      <blockquote>
        <h3>block section</h3>
        <section>
          section content
        </section>
      </blockquote>
      <section>
        second section
      </section>
    </section>
    <footer>
      beonit
    </footer>
    <aside>
      test aside
    </aside>
  </body>
</html>

@@ Line 1: / Line 1: @@
-&#91;&#91;pagelist(html5)&#93;&#93;
+<!-- MONIWIKI PageList(html5) -->
+* [[html5]]
+* [[html5/VA]]
+* [[html5/canvas]]
+* [[html5/communicationAPI]]
+* [[html5/drag-and-drop]]
+* [[html5/form]]
+* [[html5/geolocation]]
+* [[html5/offline-web-application]]
+* [[html5/others-api]]
+* [[html5/outline]]
+* [[html5/overview]]
+* [[html5/richtext-edit]]
+* [[html5/section]]
+* [[html5/video&audio]]
+* [[html5/web-storage]]
+* [[html5/web-workers]]
+* [[html5/webSqlDatabase]]
+* [[html5/websocket]]
+* [[html5/문제점]]
+* [[html5practice]]
+* [[html5practice/roundRect]]
+* [[html5practice/계층형자료구조그리기]]
+* [[html5practice/즐겨찾기목록만들기]]
 __TOC__
 ----
 = 아웃라인을 의식한 마크업 =
 * 웹 어플리케이션의 구조를 논리적으로 기술하기 위한 기본 요소
+* 문서 내 특정 내용을 의미론적으로 구분 짓는 새로운 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
 = 요소 =
@@ Line 18: / Line 50: @@
 태그 사용가능
 * 섹션에 두개 이상의 제목을 지정하면 암묵적으로 섹션이 생성된다. 그런데 어떤 규칙으로 생성될지 모른다.
+=== section root ===
+* 하나의 독립된 요소로 인정되는 태그들
+* body, fieldset(입력 필드 그룹), td, figure, blockquote
+** body가 section root임. HTML5의 컨텐츠는 모두 section에 포함된다는 것을 유추 가능
+* 밖의 아웃라인에는 영향을 주지 않는다.
+=== section additional info ===
+* address
+** 바로 위 부모 article이나 body 요소에 관한 연락처 정보
+ &lt;article&gt;
+ contents
+ &lt;address&gt;
+ &lt;a href="mailto:smaple@example.com"&gt;name&lt;/a&gt;
+ &lt;/address&gt;
+ &lt;/article&gt;
+* time
+ &lt;article&gt;
+ ...contents...
+ &lt;time datetime="2009-10-05" pubdate&gt;10월 5일&lt;/time&gt;
+ &lt;/article&gt;
+=== section header & footer ===
+*
 == article ==
 * 블로그 본문등 다른 부분으로 부터 독립된 섹션
@@ Line 27: / Line 80: @@
 * 네비게이션
 * 내부는 어떻게 채워야 하는지 규정 되어 있지 않음. 흔히 ul, li 로 구성.
+== FIGURE ==
+* figure 요소를 사용하면 콘텐츠 흐름에서 요소를 분리할 수 있고 필요할 경우 캡션을 붙일 수도 있다.
+ &lt;figure&gt;
+    &lt;img src="./figure.jpg" alt="figure image" /&gt;
+     &lt;figcaption&gt; This is a figure&lt;/figcaption&gt;
+ &lt;/figure&gt;
 = 예제 =
 == section&section ==
@@ Line 40: / Line 102: @@
         &lt;/section&gt;
       &lt;/article&gt;
-== aside ==
+== css check ==
-== nav ==
+ &lt;!DOCTYPE html&gt;
+ &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+   &lt;head&gt;
+     &lt;title&gt;beonit&lt;/title&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+     &lt;h1&gt; body header &lt;/h1&gt;
+     &lt;section&gt;
+       &lt;h2&gt; section header &lt;/h2&gt;
+       &lt;blockquote&gt;
+         &lt;h3&gt;block section&lt;/h3&gt;
+         &lt;section&gt;
+           section content
+         &lt;/section&gt;
+       &lt;/blockquote&gt;
+       &lt;section&gt;
+         second section
+       &lt;/section&gt;
+     &lt;/section&gt;
+     &lt;footer&gt;
+       beonit
+     &lt;/footer&gt;
+     &lt;aside&gt;
+       test aside
+     &lt;/aside&gt;
+   &lt;/body&gt;
+ &lt;/html&gt;
 = 참고 =
+* [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에 관한 깊이 있는 글을 보여주는 블로그]