1. input Element 의 새로운 Type
web form 은 10년이 넘도록 checkbox, radio, password, select, file, submit, text 와 같은 몇개의 입력타입만 가지고 있었습니다. 많은 이들이 그동안 javascript 와 씨름하느라 몸고생, 맘고생 많이들 하셨으리라... ^^

이젠 새롭게 몇가지?의 Type 이 추가되었습니다.

1-1. datetime, week, month, date, time
날짜 관련 Type 들입니다.
Web Browser 들마다 지원하는 Form  이 다른데요...
Opera 가 젤루다 좋은 것 같아요. 그래서 Browser 비교는 internet explore 9 과 opera 11 과 했습니다.
현재 PC 에 internet explore 10 을 설치할 수 없어서 image Capture 가... ^^;

Markup은 아래와 같이...
<input type="datetime">
<input type="week">
<input type="month">
<input type="date">
<input type="time">
<input type="datetime-local">


입력합니다.

datetime 부터 이미지로 확인해 보죠...



Opera 에서는 날짜 선택 Control 이 rendering 되네요... ^^

다음은 date Type 입니다.

똑같이 날짜 선택 Control 이 나타나죠?
month Type 은 date Type 과 동일하게 나타납니다.

다음은 Week Type 입니다.

날짜 선택 Control 좌측에 Week 가 표시되어 있는 것을 보실 수 있습니다.

다음은 time type.
시간을 선택할 수 있도록 Spin Control 을 rendering 합니다.



1-2. email
email 을 받아들이는 input type 입니다.
뭐 type 에 email type 을 부여한다고 해서 달라지는 것이 있을까?
email Type 을 지원하지 않는 Web Browser 는 text type 으로 인식을 할 것이고 Web Browser 에 따라서는 Validation Check 까지 할 수 있도록 지원해 줄 것입니다.

(참고 : naradesign.net)


또한, iphone 의 경우에는 input field 에 커서를 가져갔을 때 "@" 와 "." 이 포함된 Screen Keyboard 를 띄워 줄것입니다. 

(참고 : naradesign.net)

<input type="email" />


1-3. url
이번엔 URL type 입니다.
Web Browser 에서는 text type 의 외관과 별 차이가 없으므로 iphone 에서 어떻게 보이는지만 확인하도록 하죠.

 

이미지 하단을 보시면 "/" 와 ".com" 버튼이 보이실 겁니다.
URL 에 맞게 Screen Keyboard 가 배치되어 있군요.

<input type="url" />

1-4. color
Color Type 은 여러분이 생각하시기에도 Color 를 선택할 수 있는 Control 이 나타나야 한다고 생각하지 않으십니까?

Opera 에서는 구현이 되어있군요.
먼저 단순한 Color 선택 Control 이 나타나고 "Other..." 버튼을 Click 하게 되면 Color 대화상자가 뜨는 군요...

<input type="color" />

1-5. search
Search Type 또한 외관은 Text Type 과 다르지 않습니다. 그래서 iphone 의 모양을 살펴보도록 하겠습니다.

보시는 바와 같이 이미지 하단 우측의 버튼이 "Search" 버튼으로 바뀌어 있는 것을 보실 수 있습니다.

<input type="search" />

1-6. number
이번엔 number Type 입니다.

일단 숫자를 마우스로도 입력할 수 있도록 Spin Control 로 rendering 하고 있고요.

iphone 에서는 Screen Key Board 의 상단에 숫자 Key 가 배열되어 있는 것을 보실 수 있습니다.

<input type="number" min="1" max="100" />

1-7. range
range Type 은 입력형태를 number Type 에서 제공할 수 있는 Spin Control 과는 다르게 Slide Control 로 rendering 합니다.

<input type="range" min="0" max="100" step="10" value="0" />


1-8. tel
tel Type 의 경우는 완전히 숫자만 입력하지요.
iphone 에서는 아래와같이 숫자 입력 Screen Keyboard 가 나타나는 군요... ^^

<input type="tel" />

1-9. file
file Type 의 경우 예전에는 하나의 input Tag 에 하나의 파일만 선택할 수 있었습니다.
하지만 HTML 5 에서는 multiple 속성을 주어 여러 파일들을 선택할 수 있고
accept 속성을 사용하여 MIME type 을 선택하여 파일들을 filtering 할 수 있습니다.

<input type="file" accept="image/*" multiple />

위 Tag 를 Markup 하면 아래 이미지와 같은 파일 선택 대화상자가 나타나며 image 를 Filtering  할 수 있습니다. 




2. input Element 의 새로운 Attribute

2-1. placeholder

PlaceHolder 가 뭐냐구요?


위 이미지를 보시면 비어있는 TextBox 에 미리 Text을 넣어 두는 것인데요... 사용자가 Click 을 하거나 Control 에 Focus 가 가게되면 Placeholder Text 는 잽싸게 사라지죠.
이젠 이 기능을 javascript 의 도움없이도 사용할 수 있게 되었답니다.

<input name="w" placeholder="Email 을 적어주셔요.">



이렇게 말이죠...

2-2. autofocus
기존의 페이지들은 Autofocus 기능을 Javascript 를 이용해서 구현을 했습니다. 하지만, 구현하는 것이 그리 만만하지는 않았죠. 구현보다도 구현후에 페이지 Loading 과 사용자의 엑션 사이에서 문제가 좀 있었습니다. Page Loading 중 사용자가 입력을 하고 있는 상황이라면 사용자가 원하지 않는 곳(Page Loading 후에 autofocus 가 위치한 곳) 에 입력을 하고 있을 수 있습니다.
사이트 로그인을 하겠다고 id 란에 id 를 입력하고 password 란에 password 를 입력하고 있는데... 그 순간 Focus 가 javascript 에 의해서 다른 입력 Field 에 가 버려서... 입력한 Password 가 훤히 다 보인다면? ㅋㅋㅋ
사용자는 쬐끔 퐝당하겠죠? 이런 경험 한번쯤 있으실지도...

이젠 javascript 를 사용하지 않아도 됩니다. autoscript 속성을 설정하면 page 가 Load 되자마자 Focus 가 설정된 곳으로 이동할 것입니다.
또 Script 가 아닌 Markup 으로 동작하는 것이기 때문에 모든 Web Browser 에서 똑같이 동작할 것이구요. (Web Browser 가 설정해 놓았다면요... 옵션으로 제공할 수도 있겠죠.)

그리고 autofocus 는 다음과 같이 설정하면 됩니다.
<input name="w" autofocus>


2-3. formaction
formaction 속성을 사용하면 Page Form 의 action 이 되는 대상 Page에 가기전에 input Element 단에서 대상 Page 를 바꾸어 버릴수 있습니다. 

<form action="woolla.aspx" method="post">
    <input type="submit" formaction="woojja.aspx" value="Submit" />
</form>
위 Markup 의 내용을 보면 "woolla.aspx" 페이지로 이동할 것이 "woojja.aspx" 페이지로 이동하게 되겠죠...


3. 새로 추가된 Element

3-1. Keygen Element
Keygen Element 는 form 을 전송할 때 키를 생성하는 Control 입니다. form 이 전송되면 비밀키와 공개 키를 생성하여 비밀키는 Client 측에 저장하고 공개키는 서버에 전송합니다. HTML 5 에서 규정하는 Key 의 Type 은 "RSA" 뿐이므로 keytype 속성에는 "rsa" 만을 사용할 수 있습니다. 지정하지 않아도 기본값으로 지정합니다.
이젠 Keygen 요소를 사용하여 기존 ActiveX 를 사용하던 방식을 떨쳐버릴수 있을 것입니다.  기다려보도록 하죠...

<keygen name="key" type="rsa">


3-2. Output Element
Output Element 는 무언가의 계산 결과를 나타냅니다.
range Element 와 output Element 를 함께 사용하는 예를 살펴보도록 하지요.

<input type="range" id="rng" value="0"><output onformchange="value=form.elements.rng.value" for="rng">0</output>


output Element value 속성을 넣을 수 없으므로 주의하시길...

3-3. progress Element
Progress Element 는 작업의 진행정도를 나타냅니다.

<progress value="0.75" max="1">0</progress>

 



3-4. meter
meter Element 는 한정된 범
meter Element 는 한정된 범위에서의 값을 나타내고 싶을때 사용하는 것으로 최솟값과 최댓값을 지정할 수 없는 곳에서는 meter Element 를 사용할 수 없습니다.

예를 한번 볼까요?

<meter value="25" min="0" low="30" high="70" max="100" optimum="100">25점</meter>





지금까지 새로 추가된 Element 들 중 중요하다고 생각한 것들을 중심으로 간략하게 살펴보았습니다.

어떤가요? 지금까지 고생하던 것들이 조금은 사라질 것 같지 않습니까? ^^
저만 기분이 좋아진걸 까효? ^^;

마지막으로 페이지하나 소개하려합니다.
사용하는 Web Browser 를 이용하여 아래 Page 를 가셔서 input type 의 속성 지원여부를 확인할 수 있습니다.
http://miketaylr.com/code/input-type-attr.html

한번 방문해 보시기 바랍니다.

아 참...
위 내용들은 본인의 생각도 물론 많이? 포함되어 있지만


등을 참고했습니다.


행복한 고수되셔요.


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형

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

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

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] 5. Sementic Element (2)  (1) 2011.06.01
[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
  1. 박세정 2012.06.28 12:16

    친절한 설명. 감사히 읽고 갑니다.
    행복하세요~


이번 주제는 Sementic Element 이다.
HTML 4 vs HTML 5 (1), (2) 주제의Contents Model 과  Language  에서 언급되었던 이야기를 조금 더 자세히, 특히 아웃라인인과 과 관련된 엘리먼트를 좀 더 살펴보려고 한다.

아래 내용들은 본인의 생각도 물론 많이? 포함되어 있지만

등을 참고하고 재구성 했음을 미리 말씀드립니다.

<!DOCTYPE HTML>
<html lang="ko">
  <head>
    <
meta charset="UTF-8">
  <title>HTML 5 예제</title>
  </head>  <body>
    <!-- 아시다시피 여기서부터 Body Contents 가 들어가겠죠? -->
    <p>안녕하시렵니까? HTML 5?</p>
  </body>
</html>
위 예제가 생각나시는지 모르겠다.
^^
위 요소들을 몇가지 살펴보려한다.


1. 문서타입과 Root 요소

1-1. 문서타입.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


이 문서타입은 Microsoft 가 Mac 용 internet explorer 5 를  개발하면서 예전에 만든 HTML페이지들이 제대로 표시되지 않는 심각한 문제가 발생하여, 이를 해결하기 위해서 문서의 상단에 HTML DocType 을 추가하였다...
Mac 용 Internet explorer의 경우 이 DocType 을 확인하도록 하여 이 DocType 이 포함되지 않은 기존 HTML 페이지는 옛날방식으로 렌더링하도록 하였다.

그래서 새 명세를 적용하려면 HTML Element 앞에 적절한 Doc Type만 지정하면 됐다.

그런데 아이디어가 남용되면서 (^^;) 명세를 최대한 지키는 표준모드와 표준을 따르지 않는 비표준모드로 나뉘고, 또 몇몇 요소에서 표준을 따르지 않는 준 표준모드까지 나오게 되었다.

위 DocType 은 여러 표준 Doc type 중 하나다 나머지는 이곳(http://www.w3.org/QA/2002/04/valid-dtd-list.html) 에서 확인할수 있다.

여러분이 생각해도 정리를 해야할 것 같다는 생각이 들지 않는가?
그래서 확~! 줄여서 나온 DocType !!!

<!DOCTYPE HTML>

인 것이다.
머리나쁜 본인도 외운다. ㅋㅋㅋ
그리고 모든 브라우져가 표준모드로 작동할 것이다.
한가지 주의할 점은 있는데...
맨 첫줄에 써주어야 한다는 것이다. 빈줄이 있으면 안된다는 것.
그렇지 않으면 비표준모드로 랜할 수 있다는...

그리고 또 한가지...
기존에 HTML 4.01 이나 XHTML 1.0, 1.1 로 작성한 페이지를 HTML 5로 변환하는 작업의 시작!!! 이라는 것. ^^

1-2. Root Element
HTML 페이지의 루트 엘리먼트인 <HTML> 는 기존에 XHTML 에서 사용하는 namespace 가 포함되어있었는데 이제 HTML 5 에서는 Lang 속성만 있다.( manifast 속성은 추후에 다시 알아보기로 하자...)
그래서... 
<html lang="ko"> 만 적으시면 된다.

1-3. <head> Element
head Element 는 변화 요소가 거의 없는데 문서의 Metadata 를 담는 Element 이며
Title Element 가 필수로 들어가고 Meta Element, Link Element, Script Element 가 들어간다는 것은 기본적인 사항이라 모두들 알고 있을 것이다.

1-4. Meta Element
Meta Element 는 Content 속성을 사용해서 나타내는데 이번에 새로 Charset 속성을 사용하여 문자 Encoding 을 나타낼 수 있게되었습니다.
HTTP Header 에 문자 Encoding 이 포함되어 있다면 Meta Element 의 문자 Encoding 보다 우선한다는 것도 알아두시길...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
위와 같이 적긴하지만 다른 요소들은 생략하시더라도 아래와 같이 charset을 포함한 Meta Element 를 포함하기 바란다.
<meta charset="utf-8">


2. 아웃라인 구성 Element들
이번엔 이번에 추가된 아웃라인을 구성하는 Element 들을 살펴보려한다.
이전 글에서 소개했듯이 HTML 5 에 문서의 구조화와 관련된 요소들이 많이 추가되었다.

아래와 그림과 같이 간단히 나타낼 수 있는데 하나하나 중요하게 생각해야하는 사항들만 짚어 보도록 하자.


2-1. Section Element

Outline 을 구성하는 Element 들을 설명하기 위해서는 먼저 Section Element 를 알아봐야 할 것이라 생각한다.
Section Element 는 일반적인 Section을 나타낸다.
그런데 의미 자체로만 보게되면 기존에 사용하던 Div Element 와 사용하기에 혼동하기 쉽다.
Section Element 는 장이나 절 단위를 나타낸다고 생각하면 된다. 스타일을 적용하기위해서 Section Element 를 사용해서는 안되며 그런 용도라면 Div Element 를 사용하도록 해야한다.
Section Element 는 장이나 절을 나타내므로 제목과 본문을 하나로 묶을 때 사용합니다.
만약에 아래와 같이 제목과 본문에 스타일을 적용하고 싶다거나 구분을 지으려 한다면 Div Element 를 사용해야 할 것입니다.



 

<section class="title">
<h1>제목</h1>
<section class="content">
<p>본문</p>
</section>
</section>


위와 같이 Element 를 구성하게되면 제목과 본문을 다른 Section 으로 해석하게 될 것이다.
본문의 Level 이 하나 더 내려가게 되겠지?

그래서 위그림과 같은 구조에서는 아래와 같이 Mark up해야 할 것이다.
<section class="title">
<h1>제목</h1>
<div class="content">
<p>본문</p>
</div>
</section>

또한 아래와 같은 구성에서도
각각을 모두 Section Element 로 나누는 것이 아닌 HTML 5 의 OutLine 구성 Element 들을 적절히 사용하여 구성해야 할 것이다.


<body>
<header>제목</header>
<div class="left">
<nav>...
</nav>
</div>
<div>
<article>...
</article>
</div>
<div>
<aside>....
</aside>
</div>
<footer>....</footer>
</body>


이와 같이 말이다...
아직 언급하지 않은 Element 가 있지만 후에 알아볼테니 그런것이 있구나 식으로 생각하시면 되겠다. ^^'

2-2. nav Element
nav Element 는 Navigation Section 을 나타냅니다. 페이지상의 Header 나 좌측, 우측에 표현하는 Link 모음이고 간혹 Footer 에도 표현하기도 하지요.
모든 Link 에 nav Element 를 사용하면 안되겠고, 다시한번 이야기 하지만 스타일을 적용하기 위해서 nav Element 를 사용하면 안될 것입니다.
또 한가지!! Site Map Page 를 nav Element 로 표현하면 안될 것입니다.
Site Map 의 Link 는 nav 특성보다는 Main Contents 이기 때문입니다.

주로 nav Element 내에 ul Element 를 사용하여 목록으로 Navigation Link 를 Markup 합니다.

이번엔 nav Element를 그룹화하는 방법을 몇가지 알아보죠.


 


위 이미지는 제 블로그의 우측에 있는 링크들입니다.
붉은 부분만 떼어놓고 본다면 아래와 같이 Markup 할 수 있을 것입니다.
<nav>
<h3>카테고리</h3>
<ul>
<li><a href="...">분류전체보기</a></li>
<li><a href="...">VB.NET</a></li>
...
</ul>
</nav>
<nav>
<h3>글보관함</h3>
<ul>
<li><a href="">2011/05(8)</a></li>
<li><a href="">2011/04(4)</a></li>
...
</ul>
</nav>

한가지 더 생각해 보자면
위 그림상에 있는 컨텐츠의 내용은 aside element 에 속하는 것으로
아래와 같이 nav Element 들을 aside Element 내에 포함시킬 수 있을 것이다.
<aside>
<nav>
<h3>카테고리</h3>
<ul>
<li><a href="...">분류전체보기</a></li>
<li><a href="...">VB.NET</a></li>
...
</ul>
</nav>
<nav>
<h3>글보관함</h3>
<ul>
<li><a href="">2011/05(8)</a></li>
<li><a href="">2011/04(4)</a></li>
...
</ul>
</nav>
</aside>

이렇게 말이다.

글이 너무 길어진듯하여 나누어야 겠다.
다음 글에서는 article Element 부터 진행하도록 하겠다.


행복한 고수되십시요...


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형

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

[HTML 5] 6. Strong Web Form  (0) 2011.06.05
[HTML 5] 5. Sementic Element (2)  (1) 2011.06.01
[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
[HTML 5] 1. HTML 5 의 개요  (2) 2011.05.09
HTML 4 Vs HTML 5

둘의 차이점을 알기위해서 반드시 먼저 짚고 넘어가야할 주제가 있다.

그것은...

바로 Contents Model  이다.

HTML 5 이전의 HTML 문서는 <div>, <p>, <h1>, <h2>... Tag 와 같은 Block Level Element 와 <img>, <input>, <i>, <b> Tag 와 같은 Inline Element 로 구분되어지는 Tag 들로 구성되어 두 종류의 Tag 들을 적절히 사용하여 표현하였다.
그리고 이러한 Tag 들은 Tree 형태의 계층구조를 이루어 문서의 OutLine 을 구성하고 그 구조를 따라 Contents 에 접근할 수 있다.(JavaScript 나 CSS 에서 특정 Element 에 접근하는 방식을 떠올린다면 이해가 쉬우리라...)

HTML 5 문서 또한 다르지 않다.
하지만 HTML 5 는 "Contents Model" 이라는 새로운 개념을 추가하여 문서의 Outline 을 잡고 Contents 를 구성하게 된다.
HTML 5 는 기존의 Tag 에
한마디로 HTML 5 는 구성에 중점을 둔 구조라고 할 수 있겠다.
따라서 기존 DOM Tree 계층구조에서의 Contents 접근이 아닌 구성에 따라서 접근이 가능하게 되었다.(<Header>, <Footer>, <article> Tag 를 떠올려 보라. DOM Tree 를 따라갈 필요없이 곧바로 Contents 에 접근이 가능하다.-<Header>, <Footer>, <article> 과 같은 Tag 를 아직 모르시는 분께 죄송... 하지만 곧바로 다음에서 다루겠다. 일단은 그런게 있구나 식으로만이라도...>)
이런 이유로 HTML 5 의 Element들은 추가되었고, 기존의 HTML 보다 훨씬 더 Sementic 한 Web을 구성 할 수 있게 되었다는데에 집중해야 할 것이다.

따라서, 이제 우리는 HTML 5 의 각 Tag(Element)가 갖는 역할과 의미를 확실히 이해하여 Content Model 에 적합한 HTML 문서를 작성할 수 있도록 한층 더 많은 생각을 해야할 것이다.

HTML 5 에서는 아래 그림과 같이 Contents 의 종류에 따라 Element 들을 분류하고 있다.

Contents 는 다음과 같이 분류한다.
1. Metadata Contents
2. Flow Contents
3. Sectioning Contents
4. Heading Contents
5. Phrasing Contents
6. Embedded Contents
7. Interactive Contents


다음은 위 분류에 대해 간단히 설명해 보았다.
Category
설명
Tag
 Metadata Content  나머지 Contents 의 Presentation 이나 behavior를 설정하거나 현재문서와 다른 문서와의 관계를 설정. 또는, 기타 "Out Of Band"정보를 전달한다.  base, command, link, meta, noscript, script, style, title
 Flow Content  문서와 Application 의 Body 에서 사용되는 대부분의 Element들은 Flow Content 로 분류된다. a, abbr, address, area (map 요소의 자손인 경우) , article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style (scoped 속성이 있으면) , sub, sup, svg, table, textarea, time, ul, var, video, wbr, Text
 Sectioning Content  Headings 와 Footers 의 범위를 정의한다.  article, aside, nav, section
 Heading Content  Section 의 Header 를 정의한다.  h1, h2, h3, h4, h5, h6, hgroup
 Phrasing Content  문서의 Text 이다. 또한 그 Text 를 intra-paragraph Level 로 Markup 하는 Element 이다.  a (구문 컨텐츠만을 포함하는 경우) , abbr, area (map 요소의 자손인 경우) , audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del (구문 컨텐츠만을 포함하는 경우) , dfn, em, embed, i, iframe, img, input, ins (구문 컨텐츠만을 포함하는 경우) , kbd, keygen, label, map (구문 컨텐츠만을 포함하는 경우) , mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, Text
 Embedded Content  문서에 다른 Resource 를 삽입하는 Content 이다.  audio, canvas, embed, iframe, img, math, object, svg, video
 Interactive Content  사용자의 상호작용을 위해 특별하게 의도된 Content 이다.  a, audio (controls 속성이 있으면) , button, details, embed, iframe, img (usemap 속성이 있으면) , input (type 속성이 Hidden 상태가 “아니면”) , keygen, label, menu (type 속성이 toolbar 상태면) , object (usemap 속성이 있으면), select, textarea, video (controls 속성이 있으면)

자세한 내용은 http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html 를 참고하시길...


다음은 위 내용을 바탕으로 변화된 HTML 5 의 모습을 살펴보기로 하겠다.

 


<참고>
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
철저해설 HTML 5
http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents
http://www.clearboth.org/html5/





행복한 고수되십시요...


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형

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

[HTML 5] 5. Sementic Element (2)  (1) 2011.06.01
[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
[HTML 5] 1. HTML 5 의 개요  (2) 2011.05.09
[HTML 5] HTML 5 is... (2)  (2) 2011.05.08

+ Recent posts