반갑습니다. 잡지식스토리의 촉끼남입니다.
이번 '웹문서 공부' 주제는 <base>태그에 대한 것입니다.
<base>태그는 해당 웹페이지의 기준이 되는 URL을 절대경로 지정하는 태그입니다.
<base>태그는 <head>...</head>태그 안에서 지정하는데, 페이지 당 1개의 URL만 설정할 수 있습니다.
이 <base>태그를 이해하기 위해서는 절대경로와 상대경로가 먼저 무엇인지를 알고 있어야 합니다.
일단 절대경로와 상대경로의 개념부터 정리해 보겠습니다. '네이버 지식백과'에서 참조하였습니다.
절대경로....
인터넷 자원 주소와 경로를 완전하게 표시한 인터넷 주소.
예를 들어 " http://www.welcome365. tistory.com /category /진짜잡지식" 과 같이 서비스, 호스트, 파일 경로를 나타내는 완전한 URL주소를 말한다.(네이버 지식백과)
상대 경로...
파일 시스템에서 현재 작업 디렉터리로 부터 찾아갈 파일에 이르는 모든 디렉터리 목록으로 표시된 경로.
예를 들어 '진짜잡지식'카테고리에서 '웹문서 공부'카테고리 경로를 상대 경로로 나타내면, " ../웹문서 공부 " 라고 표현할 수 있다.(네이버 지식백과)
다시 말해, 기준이 되는 경로에서 대상이 되는 경로를 표시하는 방법입니다.
이해를 돕기 위해서 일단 HTML문서를 작성하고, 브라우저로 확인을 해 보겠습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>base태그 알아보기</title>
<base href="http://welcome365.tistory.com" target="_blank">
</head>
<body>
<p>잡지식스토리에는 <a href="/category/웹문서%20공부" target="_blank">웹문서 공부</a> 카테고리가 있습니다.</p>
</body>
</html>
위에서 HTML 소스문서를 보면 알 수 있듯이, <base>태그를 사용해서 제 블로그의 절대경로URL을 지정하였고, 본문 내용에서 '웹문서 공부'카테고리 링크 주소는 상대경로URL로 지정해 준 것을 확인할 수 있습니다.
그리고 이 HTML 소스문서를 웹브라우저로 실행해 보면, 본문 내용에서 '웹문서 공부' 단어가 링크 설정되어 있는 것을 알 수 있고, 이 링크를 통해서 '웹문서 공부'카테고리 페이지가 열리는 것을 확인할 수 있습니다.
쉽게 정리해서 말하자면, <base>태그로 해당 웹페이지에서 기준이 되는 URL주소를 절대경로로 한번만 지정해 주면, 그 웹페이지에서 연결되는 다른 웹페이지 경로는 상대경로URL로 간단하게 지정해도 된다는 말입니다.
이것은 해당 웹페이지에서 연결되는 링크페이지를 하나씩하나씩 일일이 절대경로를 지정해야 하는 번거러움을 없앨 수 있다는 장점이 있습니다.
--- 요 약 ---
<head>태그 안에서 <base>태그를 사용하여 기준 절대경로URL을 설정해 주면, 해당 웹페이지와 연결되는 링크 주소는 상대경로로 간소화하여 설정할 수 있다.
보기에는 복잡해 보이지만, 직접 해보면 무슨 말인지 쉽게 이해할 수 있을거라 생각됩니다.
이렇게 하여 이번 <base>태그 정리는 마무리 짓도록 하겠습니다.
지금까지 잡지식스토리의 촉끼남이였습니다.
'웹문서 공부' 카테고리의 다른 글
| [HTML]meta name태그, 웹문서의 정보를 나타내기 (0) | 2013.10.05 |
|---|---|
| [HTML]link태그, 각 웹문서끼리 연결하여 관계 나타내기 (0) | 2013.09.30 |
| [HTML]title태그, 웹페이지에 웹문서 제목 입력하기 (0) | 2013.09.27 |
| [HTML]HTML 요소들의 집합, HTML웹문서의 기본구조..!! (0) | 2013.09.25 |
| HTML의 기본구조, 요소(Element)/태그와 요소내용 (0) | 2013.09.23 |
