3. Section Elements
HTML5에서는 웹 페이지의 헤더(header)나 꼬리말(footer), 사이트 탐색, 뉴스 기사, 저작권 명시 등과 같은 부분들을 정의하여 사용할 수 있도록 Section 요소들을
정의하고 있으며 이와 관련된 요소들을 표로 정의하면 다음과 같습니다.
|
요소 |
기능 |
|
body |
HTML5의 2번째 요소로 HTML5 문서의 컨텐츠를 포함하는 요소 |
|
nav |
HTML 문서에서 이동할 페이지링크와 같은 탐색 부분을 정의할 때 사용 |
|
article |
기사(article)나 완전한 컨텐츠를 정의할 때 사용 |
|
aside |
본문 내용 옆에 광고나 사이드바를 위치시키고자 할 때 사용 |
|
section |
페이지의 논리적인 영역을 정의하거나 하나의 컨텐츠 그룹을 정의할 때 사용하는 요소로 하나의 웹페이지 내에서 여러 개 사용될 수 있음 |
|
h1,h2,h3,h4,h5,h6 |
제목이나 주제를 나타낼 때 사용하는 요소로 가장 중요한 제목이나 주제에 h1을 상대적으로 덜 중요한 제목, 주제는 h2, h3, … 순으로 적용 |
|
hgroup |
HTML 문서나 섹션(section)의 헤더를 정의하는데 사용 |
|
header |
제목, 소제목, 버전 정보 등을 나타낼 때 사용 |
|
footer |
HTML 문서나 섹션(section)의 꼬리말을 정의할 때 사용 |
|
address |
문서의 저자(작가)나 소유권자에 대한 연락 정보를 명시할 때 사용 |
이와 같은 Section 요소들을 이해하기 위해서 하나의 웹 페이지를
구성하는데 있어서 위의 요소들을 이용하여 어떻게 적용할 수 있는지 알아볼까요?
다음 그림과 같이 HTML5 웹 문서의 컨텐츠를 포함하는 요소인 body 내에 nav, article, aside, section,
header, footer 요소가 위치할 수 있으며 이들 요소들 안에 h1, … h6,
hgroup, address 요소들이 위치할 수 있습니다.
이제 위에 표시된
번호대로 실제로 예제를 통해서 하나씩 만들어보면서 section 요소들의 사용방법을 익혀봅니다.
3.1 nav, header 요소(Element)를 이용한 구성
먼저 header 요소는 nav, section, article 요소 등의 제목, 소제목, 버전 정보 등을 나타낼 때 사용하는 요소로 보통 h1, h2, …, h6 요소나 hgroup 요소와 함께 사용하며 다음과 같은 형식을 이용합니다.
<header>
<h1>제목</h1>
…
</header>
<header>
<hgroup>
<h1>제목</h1>
<h2>소제목</h2>
</hgroup>
…
</header>
위와 같이 하나의 h1 요소를 이용하여 제목을 나타내거나 h1, h2 요소를 2개 이상을 그룹핑하는 hgroup 요소를 이용하여
header 요소를 사용할 수 있습니다. 예를 들어
hgroup 요소를 이용하여 header 요소 블록을 구성한다면 다음과 같은 형태로 사용할
수 있습니다.
<header>
<hgroup>
<h1>HTML5</h1>
<h2> A vocabulary and associated
APIs for HTML and XHTML</h2>
</hgroup>
…
</header>
다음으로 nav 요소는 사용자로 하여금 HTML 문서 내에서 다른 웹 페이지로
이동을 위한 링크들에 대한 영역을 정의할 때 사용하는 요소로 다음과 같은 형식을 사용합니다.
<nav>
<a href=”이동할 페이지”>이동할
페이지에 대한 텍스트</a>
...
</nav>
위에서 a 요소는 하나의 링크를 나타내며 href 속성은 이동할 페이지를 명시하는데 사용하는 속성입니다. 그래서 nav 요소태그 블록 안에 여러 개의 a 요소를 배치하여 여러 개의 이동 가능한 페이지를 명시할 수 있습니다. 예를 들어 포탈 사이트에 나타나는 다음과 같은 형태의 부분을 nav 요소를 이용하여 작성한다고 가정합니다.
웹페이지에 위와
같이 나타내려면 각각의 텍스트를 클릭했을 때 이동할 웹페이지를 정의해야 하는데 간단하게 다음과 같이 정의를 해볼까요?
인터넷 클릭시 이동 페이지 : internet.html
휴대폰/통신 클릭시 이동 페이지 : phoneandCom.html
게임 클릭시 이동 페이지 : game.html
IT 일반 클릭시 이동 페이지 : general.html
이제 메모장을
열어서 다음과 같이 작성합니다.
<body>
<nav>
<a href="internet.html">인터넷 |</a>
<a href="phoneandCom.html">휴대폰/통신 |</a>
<a href="game.html">게임 |</a>
<a href="general.html">IT
일반 </a>
</nav>
</body>
물론 실제로
이동할 웹페이지들 즉, internet.html, phoneandCom.html 파일을 여기서는 만들지
않아도 됩니다. 위와 같이 작성한 후
SectionEx_first.html 로 저장하고 브라우저를 통해서 보면 다음과 같이 나타납니다.
원하는 형태로 나타나긴 했는데 밑줄이 그어져 나타나서 원래의 모습과는 조금 다르게 표시되는 것을 알 수 있습니다. 이러한 미세한 조정을 하기 위해서 SectionEx_first.html을 열어서 <head>.. </head> 안에 다음과 같이 코드를 작성합니다.
<head>
<title> Section 요소 예제-1 </title>
<style type="text/css">
a:link { text-decoration: none;}
a:hover { text-decoration:
underline;}
</style>
</head>
위와 같이 style 요소 안에 a 요소에 대한 스타일을 적용해주면 되는데 간략히
보면 다음과 같습니다.
a:link { text-decoration: none;} -> a 요소의 하이퍼링크
밑줄 없애기
a:hover { text-decoration: underline;}
-> 마우스를 올렸을 때 밑줄 나타내기
저장한 후 브라우저를 통해 보면 다음과 같이 나타나게 됩니다.
이제 여기에 header 요소를 이용하여 “오늘의 IT 주요 뉴스”라고 설정을 해볼까요? 메모장으로 navEx.html을 열어서 <nav> 태그 위에 다음과 같이 header 요소 태그를
이용하여 제목을 설정합니다.
<header
id="page_header">
<h1>오늘의 IT 주요 뉴스</h1>
<nav>
<a href=" internet.html">인터넷 |</a>
<a href=" phoneandCom.html">휴대폰/통신 |</a>
<a href=" game.html">게임 |</a>
<a href="general.html">IT 일반 </a>
</nav>
</header>
위와 같이 작성한 후 확인해보면 다음과 같이 header 요소 내에 nav 요소가 포함된 형태로 출력됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 3.3 section, header, footer, article, aside 요소(Element)를 이용한 우측면 구성 (5) | 2013.07.31 |
|---|---|
| 3.2 section, header, nav 요소(Element)를 이용한 좌측면 구성 (4) | 2013.07.31 |
| 2.2 meta 요소 (12) | 2013.07.31 |
| 2. metadata Elements (3) | 2013.07.31 |
| 1.4 환경 설정 및 기본 편집기 (3) | 2013.07.31 |
