티스토리 뷰
HTML5에서 meta 요소(Element)들은 IE, 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
웹페이지의 제목을 설정하는데 사용
<title>HTML5 학습 사이트</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:\htdocs” 디렉토리 내에 images 디렉토리를 윈도우 탐색기를 이용하여 만들고 그 안에 “shrimp.png” 파일을 복사합니다.
현재 “D:\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>
'HTML5-CSS' 카테고리의 다른 글
| jQuery 로 CSS의 미디어 쿼리를 활용하여 브라우저의 해상도를 감지하는 방법 (0) | 2016.07.23 |
|---|---|
| 2.2 meta 요소 (0) | 2016.05.20 |
| 1.4 HTML5 기본 편집기 (0) | 2016.04.28 |
| 1.3.2 HTML5에서 요소의 속성(Attribute) 작성 방법 (0) | 2016.04.28 |
| 1.3.1 HTML5의 요소(Element) 작성 방법 (0) | 2016.04.28 |
