2011/10/06 글 목록

2011/10/06 에 해당되는 글 2건

2011.10.06 7.9 HTML5 Semantic <article>
2011.10.06 7.8 HTML5 Semantic <nav>

2011. 10. 6. 12:30

7.9 HTML5 Semantic <article>

HTML5 2011. 10. 6. 12:30

기존에 웹 문서 안에서 특정 글이나 내용을 표현하기 위한 방법이 딱히 없었습니다. 그래서 이런 경우에는 폭넓게 혹은 암묵적으로 사용했던 방법이 <div class="article">과 같이 <DIV> 태그를 사용하는 방법이 있었습니다.
HTML5에서는 이런 경우에 사용하기 위해서 <ARTICLE>이라는 태그가 따로 준비 되어 있습니다.
<ARTICLE>은 전체 웹 페이지 안에서 특정 내용이나 기사 혹은 글을 표시하기 위해서 제공됩니다.

<body>
<h1>My blog</h1>
<article>

<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>

<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>

<footer>
<a href="?comments=1">Show comments...</a>
</footer>

</article>
<body>

위의 예에서 보는 바와 같이 하나의 <ARTICLE> 요소 안에서 <HEADER><FOOTER>와 같이 완전한 하나의 형식을 구현할 수도 있으며 하나의 웹 페이지 안에서 <ARTICLE>요소가 여러번 반복되어도 상관없습니다.

나중에 특정 앱에서 <ARTICLE> 요소만 찾아서 보여주는 등의 작업을 해도 괜찮은 기사 뷰어 앱을 만들 수 있을 것으로 보입니다.

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.

HTML5 강좌 전체 목록

저작자표시변경금지

html5, HTML5시리즈, Semantic

0 0

2011. 10. 6. 08:18

7.8 HTML5 Semantic <nav>

HTML5 2011. 10. 6. 08:18

<NAV>태그는 네비게이션을 위한 부분을 표시하기 위한 태그 입니다. HTML5는 기본적으로 외부 장치나 앱에서 잘 활용되기 위한 목적이 강함니다. 때문에 이 부분이 메뉴이고 이동을 위해서 정의 되었다는 것을 알려주는 것이 필요 합니다.

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</nav>

아직까지 <NAV> 태그가 구체적으로 어떻게 사용되는지 보여주는 실 사용예는 찾아보기 어렵습니다만 메뉴등에서 사용하면 나중에 앱에서 이해하기 수월해 질것 같습니다.

김영욱 iwinkey@hotmail.com