2. metadata Elements
HTML5에서 meta 요소(Element)들은
IE9, Firefox 같은 웹 브라우저에게 HTML5로 작성된 웹 문서와 관련된 정보를
제공하는데 사용됩니다. 이러한 metadata 요소들은 title, meta, link, style, script 등이 있으며
metadata 요소(들)의 컨테이너 역할을
하는 head 요소 블록 내에 다음과 같이 나타날 수 있습니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>웹페이지의 제목</title>
<base></base>
<meta></meta>
<link></link>
<style></style>
<script></script>
</head>
<body>
</body>
</html>
해당 요소들을 표로 정리하여 간략히 나타내면 다음과 같습니다.
|
메타 요소 |
기능 |
|
title |
웹페이지의 제목을 설정하는데 사용 |
|
base |
웹페이지와 연관된 기본적인 URL 경로나 목적지(target) 경로 명시하는데 사용 |
|
meta |
웹페이지의 인코딩 정보, 문서에 대한 저자, 설명, 몇 초 후 다시 읽기(refresh) 등을 설정할 때 사용 |
|
link |
주로 외부에 있는 스타일 파일(.css)을 명시하는데 사용 |
|
style |
웹페이지를 구성하는 요소들에 대한 배경색, 글꼴 크기 등과 같은 스타일을 적용하는 코드를 작성하는데 사용 |
|
script |
웹페이지의 동적인 작업을 위한 javaScript 코드 등을 작성하거나 참조할 때 사용 |
이제 차례대로 알아볼까요? 위에서 title 요소에 대해서는 특별한 설명이 필요 없을 정도로 그대로 이해가 가능할 것이므로 base 요소부터 알아봅니다.
2.1 base 요소
base 요소는 <head>…</head> 블록
내에 위치하여 웹페이지와 연관된 기본적인 URL 경로 혹은웹페이지나 목적지(Target) 경로를 나타내는데
사용됩니다. base 요소는 절대경로를 나타내는데 사용하는 href 속성이나
프레임이나 윈도우(window)를 명시하는 target 속성
중 하나 이상을 반드시 사용하여 다음과 같이 나타낼 수 있습니다.
<base href=”절대경로 URL” />
<base target=”” />
<base href=”절대경로 URL” target=”” />
정리하면 웹
페이지에 base 요소를 이용하여 기본 URL을 명시하면
다른 상대적인 링크(link)들의 시작 위치 역할을 수행하게 됩니다.
이에 대한 이해를 위해서 이제 간단한 예제를 하나 해볼까요?
“D:\Apache Software Foundation\Apache2.2\htdocs” 디렉토리 내에 images 디렉토리를 윈도우 탐색기를 이용하여 만들고 그 안에 “shrimp.png”
파일을 복사합니다.
현재 “D:\Apache Software Foundation\Apache2.2\htdocs” 디렉토리
내에서 메모장을 열어서 다음과 같이 코드를 작성한 후 “baseEx.html”로 저장합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>base 요소 예제</title>
</head>
<body>
<p>점심
간식</p>
<img
src="shrimp.png" alt="새우튀김" width="64" height="64"
/>
</body>
</html>
그 다음 IE9로 로컬 웹사이트(http://localhost/baseEx.html)에
접속하면 다음과 같이 나타납니다.
이제 base 요소의 기능을 알아보기 위해서 다음과 같이 <head> …
</head>블록을 작성합니다.
<head>
<title>base 요소 예제</title>
<base
href="http://localhost/images/" target="_blank" />
</head>
위와 같이 base 요소의 href 속성에 “shrimp.png”
이미지 파일을 포함하는 images 디렉토리까지의 경로를 명시해주고 target 속성값을 “_blank” 형태로 설정해주면 기본 웹페이지에
저장한 후 IE9로 로컬 웹사이트(http://localhost/baseEx.html)에
다시 접속하면 다음과 같이 정상적으로 새우 튀김 그림이 나타나게 됩니다.
예제에 사용한 파일 첨부
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
그 처음 시작 부분이며 본 저작물에 대한 모든 권리는 본인(원철연)에서
있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온 오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 3. Section Elements (0) | 2013.07.31 |
|---|---|
| 2.2 meta 요소 (12) | 2013.07.31 |
| 1.4 환경 설정 및 기본 편집기 (3) | 2013.07.31 |
| 1.3.2 HTML5에서 요소의 속성(Attribute) 작성 방법 (6) | 2013.07.31 |
| 1.3.1 HTML5의 요소(Element) 작성 방법 (3) | 2013.07.31 |
