반갑습니다. 잡지식스토리의 촉끼남입니다.
이번에는 HTML의 link 태그에 대해서 정리해 보도록 하겠습니다.
--- <link>태그 ---
해당 웹페이지가 다른 웹페이지와 연결되어 있을 때, 어떤 관계로 연결되는지 나타내는 태그.
<head>...</head>태그 안에서 정의해야 하며, 연결되는 웹페이지의 URL은 href 속성으로 나타내고, rel속성을 사용하여 연결되는 웹페이지가 어떤 관계로 연결되는지 정의한다.
일단 기본적인 정리는 위와 같습니다.
그럼 HTML소스 문서와 브라우저 실행 페이지를 통해서 어떤 내용인지 알아보겠습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>link태그 알아보기</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="prev" href="page0.html">
<link rel="next" href="page2.html">
<link rel="help" href="help.html">
</head>
<body>
<p>link태그를 통해서 서로 연결된 웹페이지의 관계를 나타냅니다.</p>
</body>
</html>
HTML소스 문서입니다. <head>...</head>태그 안에서 <link rel="..." href="...">형식으로 정의하였습니다.
처음에 말했던 것 처럼, rel 속성을 통해서 각 웹페이지와의 관계를 나타내고 있습니다.
link태그의 rel속성에 사용하는 키워드는 이미 지정되어 있는데,
alternate(대체페이지) / auther(저자) / help(도움말) / icon(아이콘) / license(저작권) / prev(이전페이지) / next(다음페이지) / prefetch(프리패치) / search(검색페이지) / stylesheet(스타일시트 파일) / tag(태그 적용페이지)
가 그것입니다.
위에서는 stylesheet 키워드로 CSS 파일을 불러 왔고, 이전페이지 / 다음페이지 / 도움말페이지를 설정하였습니다.
자.. 그럼 브라우저를 통해서 어떻게 표시되는지 확인해 보겠습니다.
웹페이지 제목과 본문내용만 표시되는 것을 알 수 있습니다.
당연합니다. link태그는 head태그 안에서 정의되기 때문입니다.
브라우저를 통해서 실행되는 웹페이지는 body태그 내용만 표시만 됩니다.
그래도 태그를 확인하려면, '소스보기' 기능을 통해서 어떻게 정의되었는지 확인할 수 있습니다.
그리고 '오페라' 브라우저를 통해서 link태그가 사용된 것을 눈으로 확인할 수 있는 기능이 있다고 하는데, 사실인지는 모르겠습니다.
(어쨌든 저는 '익스플로어'로 실행시켰기 때문에 안보인다는 거~~)
음.. 여기 저기 뒤져보니까, link태그나 rel속성에 대해서 제대로 정리를 하려면 내용이 끝이 없을 것 같다는 생각을 해서 일단 기본적인 내용만 정리하였습니다.
어차피 웹문서 공부를 하려면 필요한 내용들이니, 나중에 하나씩 하나씩 정리할 수 있도록 하겠습니다.
그러면서 일단 이번 포스팅은 이정도에서 마치는 것으로 하겠습니다.^^;;
지금까지 잡지식스토리의 촉끼남이였으며, 다음에는 더 유익한 웹문서 공부거리를 가지고 올 수 있도록 하겠습니다.
'웹문서 공부' 카테고리의 다른 글
| [HTML]meta http-equiv 태그, 웹문서 초기 정보 설정하기 (0) | 2013.10.10 |
|---|---|
| [HTML]meta name태그, 웹문서의 정보를 나타내기 (0) | 2013.10.05 |
| [HTML]base태그, 기준이 되는 URL 절대경로 지정하기 (0) | 2013.09.29 |
| [HTML]title태그, 웹페이지에 웹문서 제목 입력하기 (0) | 2013.09.27 |
| [HTML]HTML 요소들의 집합, HTML웹문서의 기본구조..!! (0) | 2013.09.25 |
