이번 주제는 Sementic Element 이다.
아래 내용들은 본인의 생각도 물론 많이? 포함되어 있지만
http://www.w3.org/TR/2011/WD-html5-20110525/
.
<!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>
오늘은 여기까지 실습을 해봅니다.
직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면
아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)
'홈페이지제작 > HTML' 카테고리의 다른 글
| HTML5 표 관련 태그 (0) | 2017.10.27 |
|---|---|
| HTML5 문서의 기본 구조 (0) | 2017.10.26 |
| HTML 5 는 HTML 보다 훨씬 더 Sementic 한 Web을 구성 (0) | 2017.10.25 |
| HTML 5 를 시작해야하는 이유 (0) | 2017.10.25 |
| [홈페이지 제작 ] HTML 기초와 HTML 편집기 (0) | 2017.10.17 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.