U E D R , A S I H C RSS

html5/outline


1. 아웃라인을 의식한 마크업

  • 웹 어플리케이션의 구조를 논리적으로 기술하기 위한 기본 요소
  • 문서 내 특정 내용을 의미론적으로 구분 짓는 새로운 element들
  • section, article
  • outline
    • 섹션의 중첩관계

1.1. 참고 사항

  • 섹션 요소를 사용할 때는 항상 아웃라인을 염두해 둘 것
  • 아웃라인과 상관 없는 범위를 지정하 ㄹ때는 div를 사용할 것
  • article 요소를 사용할 것인가 말 것인가는 콘텐츠를 해당 페이지에서 분리해서 사용 가능한가에 따라 결정
  • aside는 없어도 문제 없을 섹션에 사용

1.2. HTML5와 이전 문서의 차이

2. 요소

2.1. section

  • 범용적 섹션

2.1.1. section 제목

  • 하나만 지정 가능
  • 여러 제목을 묶어 하나로 만들기 위한 <hgroup> 태그 사용가능
  • 섹션에 두개 이상의 제목을 지정하면 암묵적으로 섹션이 생성된다. 그런데 어떤 규칙으로 생성될지 모른다.

2.1.2. section root

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

2.1.3. 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>

2.1.4. section header & footer


2.2. article

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

2.3. aside

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

2.4. nav

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

2.5. FIGURE

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

<figure>

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

    <figcaption> This is a figure</figcaption>

</figure>

3. 예제

3.1. section&section

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

3.2. 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>
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:31:40
Processing time 0.0219 sec