이번 주제는 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>
위 예제가 생각나시는지 모르겠다. <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">
<section class="content">
<p>본문</p>
</section>
</section>
위와 같이 Element 를 구성하게되면 제목과 본문을 다른 Section 으로 해석하게 될 것이다.
본문의 Level 이 하나 더 내려가게 되겠지?
그래서 위그림과 같은 구조에서는 아래와 같이 Mark up해야 할 것이다.
<section class="title">
<h1>제목</h1>
<div class="content">
<div class="content">
<p>본문</p>
</div>
</section>
또한 아래와 같은 구성에서도
각각을 모두 Section Element 로 나누는 것이 아닌 HTML 5 의 OutLine 구성 Element 들을 적절히 사용하여 구성해야 할 것이다.
<body>
<header>제목</header>
<div class="left">
<div class="left">
<nav>...
</nav>
</nav>
</div>
<div>
<div>
<article>...
</article>
</article>
</div>
<div>
<div>
<aside>....
</aside>
</aside>
</div>
<footer>....</footer>
<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>
<ul>
<li><a href="...">분류전체보기</a></li>
<li><a href="...">VB.NET</a></li>
...
<li><a href="...">VB.NET</a></li>
...
</ul>
</nav>
<nav>
<nav>
<h3>글보관함</h3>
<ul>
<ul>
<li><a href="">2011/05(8)</a></li>
<li><a href="">2011/04(4)</a></li>
...
<li><a href="">2011/04(4)</a></li>
...
</ul>
</nav>
한가지 더 생각해 보자면
위 그림상에 있는 컨텐츠의 내용은 aside element 에 속하는 것으로
아래와 같이 nav Element 들을 aside Element 내에 포함시킬 수 있을 것이다.
<aside>
<nav>
<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] 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 |
