HTML5와 시맨틱 태그
HTML5의 문서 구조
HTML5에서는 문서 구조를 정의할 수 있는 새로운 요소들이 도입되어 태그만 보고도 쉽게 페이지 구조를 이해할 수 있다. 사람들이 소스를 쉽게 이해할 수 있도록 태그를 의미가 통하게, 즉 시맨틱(semantic, 의미가 통하는) 태그로 바뀐 겁니다. HTML5에서 새로 추가된 시맨틱 태그에 대해 알아보자..
-시맨틱 태그가 사용된 HTML5의 문서 구조
인터넷상의 문서들을 살펴보면 서로 다른 듯 보이면서도 그 구조는 크게 다르지 않다. 사이트의 제목과 로고, 검색 창 등이 있는 헤더(header) 부분과 여러 내용이 있는 콘텐츠(contents) 부분, 본문 외의 내용을 나타내는 사이드 바(side bar), 그리고 저작권 정보과 제작자 정보를 표시하는 푸터(footer) 부분이 문서의 대부분이며, 사이트에 따라 한 두 가지 영역이 추가되곤 한다. 따라서 HTML5의 표준을 만드는 WHATWG에서는 웹 문서의 레이아웃을 어느 정도 표준화할 수 있겠다고 생각하고, 아래 그림에서 보는 것처럼 레이아웃을 만들 때 사용하는 주요 태그를 미리 약속해 놓고 해당 태그만 보면 어느 부분이 헤더이고 어느 부분이 실제 내용인지 쉽게 알 수 있도록 했다.
다음 예제는 앞에서 HTML4로 만들었던 문서를 HTML5의 시맨틱 태그를 사용해서 바꿔본 것이다.
<!DOCTYPE html> ->HTML5의 문서 유형 선언
<html lang = “ko”>
<head>
<meta charset = “utf-8”>
<title> 내가 처음 만드는 HTML 문서</title>
</head>
<body>
<header> ->헤더 부분
<h1> 입양하기 </h1>
<nav> -> 네비게이션 메뉴 부분
…..
</nav>
</header>
<section> ->콘텐츠 내용 부분
<article>
<h2>강아지 용품 준비하기</h2>
…..
</article>
</section>
<footer> -> 푸터 부분
<p>Copyright 2012 funnycom</p>
</footer>
</body>
</html>
레이아웃을 위한 HTML5 시맨틱 태그들
HTML5의 시맨틱 태그를 사용하여 만든 문서나 HTML4 시절에 만든 문서나, 브라우저에서 열어보면 겉 모습은 똑같다. 그러나 HTML5를 이용하여 웹 표준 문서를 만들려면 시맨틱 태그를 사용해야 한다. 이제부터 배울 시맨틱 태그들은 모두 <body> 태그와 </body> 태그 사이에 들어간다.
-<header> 태그 - 머리말(제목) 지정하기
<header> 태그는 특정 부분의 머리말에 해당한다. 사이트 전체의 제복 부분이 될 수도 있고, <article>의 제목 부분이 될 수도 있다. 사이트 시작 부분에 사용하는 헤더라면 사이트 맨 위쪽이나 왼쪽에 주로 삽입하며, 헤더 안에 <form> 태그를 사용해서 검색 창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣는다.
è <header> 내용 </header>
: <header>태그를 이용해 로고 이미지와 <nav> 태그를 감싸서 사이트 제목으로 사용한 예제이다.
또한 <header> 태그를 본문 중에 사용할 수도 있다. 다음 사이트는 본문 중 <section> 태그 부분의 제목을 표시하는 데 사용하고 있다.
-<nav> 태그 – 문서를 연결하는 내비게이션 링크
<nav> 태그는 같은 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크를 나타낸다.
è <nav> 내용 </nav>
<nav> 태그는 웹사이트에서 내비게이션 부분인 메뉴 부분에 많이 사용된다. HTML이나 XHTML로 웹 문서를 만들 때는 별도의 <div> 태그를 이용해 ‘nav’니 ‘menu’ 등 특별한 ID를 지정해 주어야 했지만, HTML5에서는 <nav> 태그가 있기 때문에 이 태그를 사용하면 어느 부분이 내비게이션인지 손쉽게 알 수 있다. <nav> 태그는 <header>나 <footer> 태그, 또는 <aside> 태그 안에 포함시킬 수도 있고, 독립해서 사용할 수도 있다. 즉 위치에 영향 받지 않는다.
다음 사이트는 <nav> 태그가 독립적으로 사용되어 다른 태그의 영향을 받지 않는다.
하지만 다음 사이트는 <nav> 태그가 <header> 태그 안에 포함되어 있다. 따라서 헤더 위치를 옮기면 헤더 안의 메인 메뉴 위치도 옮겨지게 된다.
-<hn> 태그 – 제목 표시하기
<hn> 태그는 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그이다. 제목 태그는 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그처럼 여섯 단계로 나누어져 있고, 숫자가 클수록 그 크기가 작아진다.
è <hn> 텍스트 </hn>
<p> 태그를 사용한 후 글자 크기를 크게 하거나 진하게 하는 식으로 스타일을 적용해 제목 텍스트를 만들기도 하는데, 이것은 웹 표준에 맞지 않는다. 가장 큰 제목에는 <h1> 태그를 사용하고, 그것보다 작은 제목은 <h2>, <h3>태그와 같은 식으로 사용한다. <hn>태그는 문서 안에서 여러 번 사용할 수 있으며, 같은 <hn> 태그라도 스타일을 사용해서 서로 다른 형태로 표시할 수 있다.
-<iframe> 태그 - 외부 문서 삽입하기
HTML5에서는 기존 HTML의 프레임 세트 구조를 허용하지 않지만, 웹 문서 안에 다른 웹 문서를 가져와 표시하는 인라인 프레임은 계속해서 지원한다. 인라인 프레임을 삽입한느 태그는 <iframe> 태그이다.
è <iframe src = “삽입할 문서 주소” [속성 = “속성 값” ] > </iframe>
---<iframe> 태그 속성 값
* width : 인라인 프레임의 너비이다. 픽셀 값으로 표시한다.
* height : 인라인 프레임의 높이이다. 픽셀 값으로 표시한다.
* name : 인라인 프레임의 이름이다.
* seamless : 프레임의 테두리를 없애서 마치 본문의 일부처럼 보이게 한다. 이 속성은 크롬과 사파리에서만 지원합한다.
* src : 프레임에 표시할 문서의 주소를 지정한다.
-<section> 태그 - 콘텐츠 영역 나타내기
<section> 태그는 문서에서 콘텐츠 영역을 나타낸다.
è <section> 내용 </section>
보통 <section> 태그와 <article> 태그가 혼동되기도 하는데, <section>태그는 <article> 태그가 혼동되기도 하는데, 각<section> 태그는 문맥의 흐름 중에서 주제별로 콘텐츠를 묶을 때 사용한다. 따라서 <header> 태그 안에는 섹션 제목을 나타내는 <h1>~<h6> 제목 태그가 함께 사용된다. <section> 태그 안에는 또 다른 <section> 태그를 넣을 수도 있고, 실제 콘텐츠가 들어있는 <article> 태그를 넣을 수도 있다. 다음 사이트는 <section> 태그를 사용해 <header> 와 <footer> 영역으로부터 공간을 구분하고, 또 다른 <section> 태그를 사용해 <section> 영역을 여럿으로 나누고 있다.
-<article>태그 - 실제 콘텐츠 내용 넣기
article의 사전상 의미가 신문이나 잡지에서 ‘기사’를 뜻하는 것처럼, <article> 태그 역시 웹상의 실제 내용을 말한다. 보통 블로그의 포스트나 웹사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 모두 여기에 해당된다.
è <article> 내용 </article>
다음 사이트는 모두 <section>태그 안에 <article>태그를 이용하여 실제 콘텐츠를 넣은 것이다. 실제로 전달하려고 하는 주된 내용은 <article>태그 안에 들어 있음을 알 수 있다.
-<aside>태그 – 본문 이외의 내용 표시하기
<aside> 태그는 본문 내용 외에 주변에 표시되는 기타 내용들을 나타낸다.
è <aside> 내용 </aside>
흔히 블로그 등에서 왼쪽이나 오른쪽, 혹은 하단에 표시되는 광고나 링크 같은 사이드 바를 표시할 때 사용하는 태그이다. 사이드 바는 필수 요소가 아니기 때문에 필요한 경우에만 사용한다. 다음 사이트의 경우 상단에 <header> 태그로 사이트 로고와 메인 메뉴를 배치하고, 왼쪽에는 <section> 태그 안에 본문을 표시한 후, 오른쪽에 <aside> 태그로 사이드 바를 표시했다.
-<footer>태그 – 제작 정보와 저작권 정보 표시하기
HTML5에서는 간단하게 <footer>태그를 이용해 표시한다.
è <footer> 내용 </footer>
예를 들어 <footer>태그 안에서 사이트 제작자의 연락처 정보를 표시할 수 있다.
또한 <footer>태그 안에는 <header>태그를 비롯하여 <section>, <article> 등 다른 레이아웃 태그들을 모두 사용할 수 있고, 이런 태그를 이용해 푸터 안에 다양한 정보를 포함할 수 있다.
-<address>태그 – 사이트 제작자 정보, 연락처 정보 나타내기
<address> 태그는 주로 <footer> 태그 안에 사용되는데, 웹 페이지 제작자의 이름이나 제작자의 웹 페이지, 또는 피드백을 위한 이메일 주소 같은 연락처 정보를 넣는 데 사용된다.
è <address> 내용 </address>
실제 우편 주소를 넣기 위한 태그가 아니지만, 웹 사이트와 관련된 주소라면 <address> 태그 안에 표시한다. 하지만 단순히 우편주소를 표기하기 위한 용도라면 <address>태그가 아닌 <p> 태그를 이용해서 표시한다. 다음은 <address> 태그를 사용하여 웹 페이지에 연락처 정보를 넣은 예제이다.
-<div> 태그는 언제 사용할까?
HTML5에서 <dir> 태그는 중요하게 사용된다. HTML5에서는 주로 콘텐츠를 묶어 시각적인 효과를 적용하려고 할 때, 즉 콘텐츠에 CSS를 적용할 때 <dir>태그를 사용한다.
'IT > 프로그래밍' 카테고리의 다른 글
| Node.js 클라이언트의 요청에 response를 2개 보내는 방법 (0) | 2016.07.11 |
|---|---|
| Node.js의 확장모듈 Express를 설치하여 웹 서버 구축하기 (0) | 2016.07.09 |
| Node.js 설치 및 접속 실행하기 (0) | 2016.07.08 |
| 아톰(Atom) 에디터 사용법(Window 기준) (0) | 2016.07.07 |
| jQuery 노드 다루기 - 4편 (0) | 2016.07.06 |
