[HTML] base 태그 (상대 경로, 절대 경로)

728x90

HTML <base> 태그란?

<base> 태그는 HTML 문서에서 기본 URL(기본 주소)과 기본 대상(target)을 설정하는 역할을 합니다. 이를 통해 문서 내의 상대 경로 링크와 리소스(이미지, CSS, JavaScript 등)의 기본 경로를 지정할 수 있습니다.

주요 특징

기본 URL 설정 (href 속성 사용)
- 문서 내 상대 경로 링크의 기본 주소를 정의합니다.
- 페이지에 있는 모든 상대 URL 링크(href, src 등)가 <base>에 설정된 경로를 기준으로 해석됩니다.
기본 대상(target) 설정 (target 속성 사용)
- 문서의 모든 하이퍼링크(<a> 태그)의 기본 target 값을 설정할 수 있습니다.
- 예: _blank, _self, _parent, _top 등.
<head> 내부에서만 사용 가능
- <base> 태그는 <head> 요소 내부에서만 사용 가능하며, 문서당 하나의 <base> 태그만 존재해야 합니다.

사용 예시

💡 기본 URL 설정 (href)

<!DOCTYPE html>
<html lang="ko">
<head>
  <base href="https://example.com/">
</head>
<body>
  <a href="page1.html">페이지 1</a>
  <img src="images/logo.png" alt="로고">
</body>
</html>

출력 결과:

<a href="page1.html">는 https://example.com/page1.html로 변환됨.
<img src="images/logo.png">는 https://example.com/images/logo.png로 변환됨.

즉, <base> 태그가 설정되면 상대 경로가 해당 href 값을 기준으로 해석됩니다.

💡 기본 대상 설정 (target)

<!DOCTYPE html>
<html lang="ko">
<head>
  <base target="_blank">
</head>
<body>
  <a href="https://google.com">Google</a>
  <a href="https://naver.com">Naver</a>
</body>
</html>

출력 결과:

모든 링크(a 태그)는 새 탭에서 열림 (_blank 설정).
<a target="_blank">를 개별적으로 설정하지 않아도 <base> 태그에서 기본값을 지정함.

모든 <a> 태그에 target="_blank"가 적용됨.

<base> 태그의 속성

속성	설명
href	문서 내 모든 상대 URL의 기본 주소를 설정 (예: https://example.com/)
target	문서 내 모든 링크의 기본 대상 창을 설정 (예: _self, _blank, _parent, _top)

<base> 태그 사용시 주의 사항

문서에 <base> 태그는 하나만 존재 가능
- <head> 태그 내부에서 한 번만 사용해야 합니다.
- 여러 개의 <base> 태그가 있을 경우, 첫 번째 <base> 태그만 적용됩니다.
<base> 태그 이후의 절대 경로 사용 주의
- <base>가 설정된 후에도 절대 경로(예: https://naver.com)는 원래대로 동작합니다.
- 하지만 상대 경로(page1.html, images/logo.png 등)는 <base>에서 설정한 URL을 기준으로 변경됩니다.
CSS 및 JavaScript 파일 경로에도 영향 미침
- <link>, <script>, <img> 태그 등의 상대 경로도 <base> 태그를 따르게 됩니다.
- 예를 들어 <script src="js/script.js">는 <base>의 href 값을 기반으로 해석됩니다.

<base> 태그와 절대 경로 vs 상대 경로 비교

<head>
  <base href="https://example.com/">
</head>
<body>
  <a href="page1.html">상대 경로 링크</a>
  <a href="/page2.html">절대 경로 링크</a>
  <a href="https://google.com">외부 사이트 링크</a>
</body>

링크 코드	실제 해석된 URL
<a href="page1.html">	https://example.com/page1.html
<a href="/page2.html">	https://example.com/page2.html
<a href="https://google.com">	https://google.com (변경 없음)

<base>가 설정되더라도 절대 경로(슬래시 / 포함)는 여전히 제대로 동작합니다.