2-3. article Element
article Element 는 블로그에 포스트된 글들, 뉴스사이트의 기사들의 묶음 같은 독립된 하나의 컨텐츠를 나타내며, 게시판 글이나 블로그 포스트의 댓글들, 위젯, 가젯영역 또한 article Element 의 영역이라 할 수 있겠다.
아래 그림을 참고하자.
각 포스트들은 Section 으로 나뉘고 Section 들을 하나의 article Element로 감싸고 있는 모습을 볼 수 있다.
단순히 페이지의 메인 컨텐츠라고 해서 전체를 article Element 로 감싸서는 안되므로 해당 컨텐츠가 영역의 성격에 적합한지 항상 다시한번 체크해 보아야 할 것이다.
 


2-4. aside Element
aside Element 는 보충기사, 사이드바, 광고 와 같이 Main 컨텐츠와는 관련이 적어 분리될 수 있다고 생각되는 것에 사용한다.
또한 이전 글의 nav Element 에서 살펴봤듯이 nav Element 들을 Group 화 할때도 사용할 수 있다.
컨텐츠에 직접적으로 관련이 되어 있어서 만약 삭제되면 컨텐츠내용이 구성되지 않는 내용이 있다면 그 부분은 aside Element 를 사용하면 안된다.
위 이미지의 경우는 main Content 로서 내용을 설명하고 있으므로 aside Element 를 사용하면 안되겠지만. 위 그림의 aside 부분이나 아래 그림의 도서쇼핑몰의 추천 도서과 같은 내용은 Main Contents 와는 직접적인 관계는 없으므로 aside Element 를 사용하기에 적합하다고 할 수 있다.


aside Element 의 경우 컨텐츠의 내용과 제작자의 의도에 따라서 다른 Element 로 사용할 수 있으므로 Outline 구성 Element 중에서 조심스럽게 사용해야하는 Element 중 하나다.

2-5. hgroup Element
hgroup Element 는 제목과 이에 따르는 소제목이나 부제, Catchphrase 를 그룹화하기 위해 사용하는데, h1~h6 Element 만 포함할 수 있다.

HTML 5 의 hgroup Element 를 사용하기 이전, HTML 4.01 에서 아래와 같은 index 를 가진 Page를 제작하기 위해서는


뭐 간단히 만든다하면...
<h1>HTML 5</h1>
<h2>3. Semantics, structure, and APIs of HTML documents</h2>
<h3>3.2 Elements</h3>
<h4>3.2.5 Content models</h4>
<h5>3.2.5.1 Kinds of content</h5>
<h6>3.2.5.1.7 Interactive content</h6>
<p>
Interactive content is content that is specifically intended for user interaction.</br></br> aaudio (if the controls attribute is present)buttondetailsembediframeimg (if the usemap attribute is present)input (if the type attribute is not in the Hidden state)keygenlabelmenu (if the type attribute is in the toolbar state)object (if the usemap attribute is present) selecttextareavideo (if the controls attribute is present)
</p>

아래 같이 표현이 될 것이다.


그런데, 만약에 한 Depth 더 내려가야한다면? ㅡㅡ'
어떻게 표현해야 할까?

HTML 4.01 까지는 한계가 있었다.
HTML 5 부터는 Outline 구성Element 에는 HeadLine Element Level의 높고 낮음에 따라 Outline 이 결정되며 H1 이나 H2와 같은 높은 Level 의 Headline Element 들도 이제는 각 Section 이나 Article 같은 Outline 구성Element 어디에서나 사용할 수 있게되었다. 

그럼, 이번엔 다음 이미지를 보자

 
이 HTML 문서의 붉은 색 줄
Headline Tag 다음 P Tag 를 이용해서 Headline 을 설명해주고 있다.
겉으로 보기엔 차이가 나지 않는다.
하지만 아래 Mark UP 을 보면 둘의 차이를 알 수 있는데 hgroup 의 용도를 알 수있을 것이라 생각한다.

<!DOCTYPE HTML>
<html lang="ko">
<HEAD>
<meta charset="UTF-8">
 <title>HTML 5 예제</title>
</HTAD>
<body>
 <header>
  <h1>HTML 5</h1>
 </header>
 <section>
  <h1>3. Semantics, structure, and APIs of HTML documents</h1>
  <p>....</p>
  <section>
   <h1>3.2 Elements</h1>
   <p>....</p>
   <section>
     <h1>3.2.5 Content models</h1>
    <p>....</p>
    <section>
      <h1>3.2.5.1 Kinds of content</h1>
     <h2>3.2.5.1.6 Embedded content</h2>
     <p>
      Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.
     </p>
    </section>
    </section>
   </section>
   <section>
     <hgroup>
      <h1>4. The elements of HTML</h1>
      <h2>4.8 Embedded content</h2>
      <h3>4.8.1 The img element</h3>
      <h4>4.8.1.1 Requirements for providing text to act as an alternative for images</h4>
      <h5>4.8.1.1.1 General guidelines</h5>
     </hgroup>
     <p>
      Except where otherwise specified, the alt attribute must be specified and its value must not be empty; the value must be an appropriate replacement for the image. The specific requirements for the alt attribute depend on what the image is intended to represent, as described in the following sections.      </p>
    </section>
 </section>
 <footer>
  footer
 </footer>
</body>
</html>


위 파란색 Section 의 <P> Tag 는 H2 Headline 의 내용임을 나타낸다.
하지만 붉은색 Section 의 <P> Tag 는 Hgroup 에 해당되는 내용임을 나타낸다. 이와 같이 Headline 을 여러개로 묶을 필요성이 있을때 Hgroup Element  를 사용하게 된다.


아래 내용의 경우 위 Headline 을 Hgroup 으로 묶을 수 있을 것이다.




2-6. Header, Footer Element
Header Element 는 Section 의 Header 를 나타낸다.
Header Element 에는 HeadLine Element 나 hgroup, nav Element 를 넣는다.
Footer Element 는 Section이나 Page 의 Footer 를 표현한다.
Section 의 저자정보나, 관련링크, 저작권표기등을 표현하는데 사용한다.
몇번을 사용가능하지만, 사용하는 위치에 따라서 각각의 의미가 달라진다.
page 의 Body Tag 내의 Footer 는 Page 의 Footer, 블로그 포스트등의 article 내의 Footer 는 블로그 포스트에 관한 Footer 정보가 된다.
Footer Element 는 주로 페이지나 Section 의 마지막에만 사용하는 것은 아니다.   

아래는 스타일시트가 적용되어 있지는 않아 썰렁하지만, Blog Site 의 Header 와 Footer 를 표현해 보았다.
<!DOCTYPE HTML>
<html lang="ko">
<HEAD>
<meta charset="UTF-8">
 <title>Jump To VB.NET</title>
</HTAD>
<body>
 <header>
  <hgroup>
    <h1>Jump To VB.NET</h1>
    <h2>Have a nice day~!</h2>
  <hgroup>
  <nav>
    <ul>
      <li><a href="...">home</a></li>
      <li><a href="...">tag</a></li>
      <li><a href="...">media</a></li>
      <li><a href="...">location</a></li>
      <li><a href="...">guest</a></li>
      <li><a href="...">admin</a></li>
      <li><a href="...">write</a></li>
    </ul>
  </nav>
 </header>
 <section>
 <p>...</p>
 </section>
 <footer>
  <nav>
    <ul>
      <li><a href="...">home</a></li>
      <li><a href="...">tag</a></li>
      <li><a href="...">media log</a></li>
      <li><a href="...">location log</a></li>
      <li><a href="...">guestbook</a></li>
      <li><a href="...">admin</a></li>
      <li><a href="...">write</a></li>
    </ul>
  </nav>
  <p><small>Copyright &#169;2007-2009 woojja All Rights Reserved</small></p>
 </footer>
</body>
</html>





3. Text 의미 부여 Element
Text 의미 부여 Elemnet 에는 a, em, strong, small, cite, i, b, span 등 여러 Element들이 있다. 그 중 HTML 5 에 추가된 대표적인 mark, date Element 에 대해서 알아보도록 하겠다.

3-1. mark Element
mark Element 는 설명을 위해 특정키워드를 강조한다거나 인용문의 일부를 강조하기위해 또는 검색결과의 검색 키워드를 강조하는등의 시각적 주목효과를 Text 에 주려 한다는 것을 표현하기 위해 사용한다.


보는 바와 같이 mark Element 를 사용하여도 외관상 Browser 에는 나타나지 않는다. 외관은 CSS 를 사용하여 표현을 해야할 것이다.

3-2. Time Element
Time Element 는 Browser 나 Robot 등이 시간을 정확히 이해할 수 있어야 한다는 것을 전제로 만든 Element 라고 한다. 그러므로 애매한 시점을 나타내는 표현에 이 Element를 사용하면 안된다.
<time>06:43:21</time>
<time>2011-05-31</time>
<time>2011-05-31T06:43</time>
<time>2011-05-31T06:43:21+09:00</time>

Time Element 표현하는 방법은 아래와 같다.
연월일 : 붙임표 ==> 2011-05-31
연월일 시각 구분:대문자 T ==> 2011-05-31T06:43
시분초 구분 : 콜론(:) ==> 2011-05-31T06:43:21
타임존 포맷 추가 : +,- 표시  ==> 2011-05-31T06:43:21+09:00

년도, 월, 월일, 일, 시, 분, 초 만을 나타낼 수는 없다.
Time Element 는 두가지 속성이 있다. datetime 과 pubdate 인데

datetime 속성의 경우 아래와 같이 사용하여
<time datetime="2011-05-31">05월 31일</time>
<time datetime="04:30">기상시간</time>
표현하려는 내용을 컴퓨터가 이해할 수 있는 날짜 형식으로 넣을 수 있다.

pubdate 는 말그대로 published date 다.
블로그 article 을 작성한 시간, 페이지를 작성한 시간등을 나타낼 때 사용한다.
당연히 각 Section 마다 단 한번만 사용할 수 있다.
아래와 같이 사용할 수 있을 것이다.




4. 상호작용 Element

4-1. Details Element
Details Element 는 사용자에게 추가적인 상세 정보를 제공할때 사용한다. 
Detail Element 에는 제일 처음에 Summary Element 를 넣어 추가정보의 요약이나 설명을 제공하고 Summary Element 다음에 상세한 정보를 입력하는데 그 순서를 반대로 해서는 안된다.
반듯이 Summary Element 를 제일 처음으로...

또 한가지 기억해야 할 것은 Details Element 를 보충설명이나 각주등의 용도로 사용해서는 안된다는 것이다.
<!DOCTYPE HTML>
<html lang="ko">
<HEAD>
<meta charset="UTF-8">
 <title>Jump To VB.NET</title>
</HTAD>
<body>
  <header>
    <hgroup>
      <h1>Jump To VB.NET</h1>
      <h2>Have a nice day~!</h2>
    <hgroup>   </header>   <section>
    <hgroup>
      <h1>사진촬영갑니다.</h1>
      <h2>석모도 낙조</h2>
    <hgroup>
 
    <details open="open">
      <summary>석모도 출사 정보</summary>
        <p>석모도 낙조 촬영정보 아래와 같습니다. 참고하세요.</p>
        <ul>
          <li>모델:woojja</li>
          <li>시간:<time datetime="2011-06-30T18:00:00+09:00">2011년 6월 30일 저녁 6시</time>입니다.</li>
          <li>장소:석모도 언저리</li>
        </ul>
    </details>

  </section></body>
</html>


Summary Element 는 Open 속성을 가지고 있는데 이 속성은 Details Element 의 상세정보를 기본적으로 보여줄지, 숨길지 여부를 나타낸다.

위 Markup 과 그림을 보면 알수 있 듯이 단순히 Text 를 표시하고 있는데... 내용을 표시하고 숨기는 기능은 javascript 를 사용하여 제어한다.

아래 Site 를 참고 해보면 어떨까?  ^^
http://remysharp.com/demo/details-with-js.html

 
4-2. Menu Element 와 Command Element
Command Element는 사용자가 호출할 수있는 명령을 나타낸다.
아래 그림과 같은 명령아이콘을 구성할 수 있을 것이다.



Menu Element 는 Form Control List 나 Command List 를 만들때 사용하는데 Command Element 는 Menu Element 내에 포함시켜 사용해야하며 Radio Button 이나 CheckBox, Button 을 이용하여 명령어 박스를 만들 수 있게 해준다.
Command Element 는 nav Element 와는 성격이 조금 달라서 URL 링크나 Form Action 을 처리하지 않는다.

아래는 Command Element 와 Menu Element 에 대한 MarkUP 예이다.
  <div>
    <menu type="toolbar">
      <command type="radio" radiogroup="alignment" checked="checked"
          label="Left" icon="icons/alL.png" onclick="setAlign('left')">
      <command type="radio" radiogroup="alignment"
          label="Center" icon="icons/alC.png" onclick="setAlign('center')">
      <command type="radio" radiogroup="alignment"
          label="Right" icon="icons/alR.png" onclick="setAlign('right')">
      <hr>
      <command type="command" disabled
          label="Publish" icon="icons/pub.png" onclick="publish()">
    </menu>
  </div>


  <div>
    <menu type="toolbar">
      <li>
        <menu label="File">
          <button type="button" onclick="fnew()">New...</button>
          <button type="button" onclick="fopen()">Open...</button>
          <button type="button" onclick="fsave()">Save</button>
          <button type="button" onclick="fsaveas()">Save as...</button>
        </menu>
      </li>
      <li>
        <menu label="Edit">
          <button type="button" onclick="ecopy()">Copy</button>
          <button type="button" onclick="ecut()">Cut</button>
          <button type="button" onclick="epaste()">Paste</button>
        </menu>
      </li>
      <li>
        <menu label="Help">
          <li><a href="help.html">Help</a></li>
          <li><a href="about.html">About</a></li>
        </menu>
      </li>
    </menu>
  </div>

(출처:http://www.w3.org/TR/html5/interactive-elements.html)

아래 이미지는 위 menu Element Makrup 을 표현한 화면이다.

(출처:http://www.w3.org/TR/html5/interactive-elements.html)



여기까지 Sementic Element 들에 대해서 간단히? 짚어 보았다.

글을 진행하면서 계속 느끼는 것이지만 조금더 간단히 쓸수 있지 않을까를 생각한다.
언제쯤 글이 간단명료해져서 내용이 확~! 줄어들수 있을까? ㅋㅋㅋ
오늘도 긴글 읽어 주신분들 수고하셨습니다.


행복한 고수되십시요.



woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\






 

반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 7. Rich Text Edit API  (0) 2011.06.08
[HTML 5] 6. Strong Web Form  (0) 2011.06.05
[HTML 5] 4. Sementic Element (1)  (0) 2011.05.29
[HTML 5] 2. HTML4 vs HTML5 (1)  (0) 2011.05.14
[HTML 5] 3. HTML4 vs HTML5 (2)  (0) 2011.05.11

+ Recent posts