💡 퀵 접속: htm.kr/base

HTML <base> 태그

태그 설명

<base> 태그는 문서의 모든 상대 URL에 대한 기본 URL과 기본 target 속성을 지정합니다. <head> 섹션 내에서 사용되어야 하며, 문서당 하나의 <base> 태그만 사용할 수 있습니다.

주요 속성

속성 값 설명
href URL 문서의 모든 상대 URL에 대한 기본 URL을 지정합니다.
target _blank
_self
_parent
_top		 기본 target 속성을 지정합니다.

기본 예제

<!DOCTYPE html>
<html>
<head>
    <base href="https://example.com/images/">
    <base target="_blank">
</head>
<body>
    <!-- 이미지 URL이 자동으로 https://example.com/images/photo.jpg로 해석됨 -->
    <img src="photo.jpg" alt="사진">
    
    <!-- 링크가 새 탭에서 열림 -->
    <a href="about.html">소개</a>
</body>
</html>

블로그 실전 예제

<!-- 1. CDN 기반 리소스 관리 -->
<base href="https://cdn.myblog.com/assets/">
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
<img src="images/logo.png" alt="로고">

<!-- 2. 다국어 블로그 구조 -->
<base href="https://myblog.com/ko/">
<base target="_self">
<nav>
    <a href="about.html">소개</a>
    <a href="posts/latest.html">최신글</a>
    <a href="categories/web.html">웹 개발</a>
</nav>

<!-- 3. 미디어 서버 분리 -->
<base href="https://media.myblog.com/2024/">
<article>
    <img src="posts/featured/image1.jpg" alt="주요 이미지">
    <video src="videos/tutorial.mp4" controls></video>
    <audio src="podcasts/episode1.mp3"></audio>
</article>

실제 보여지는 모양

base 태그는 시각적으로 보이지 않지만, 다음과 같은 효과를 가집니다:

1. 상대 경로 변환:

images/photo.jpg → https://example.com/images/photo.jpg

2. 링크 동작:

링크 클릭 시 새 탭에서 열림

참고사항

  • <base> 태그는 반드시 <head> 섹션 내에 위치해야 합니다.
  • 문서당 하나의 <base> 태그만 사용할 수 있습니다.
  • href 속성은 절대 URL이어야 합니다.
  • target 속성은 모든 링크에 영향을 미칩니다.
  • JavaScript의 location.href에는 영향을 주지 않습니다.

블로그 작성 팁

  • CDN을 사용할 때 리소스 경로를 단순화할 수 있습니다.
  • 다국어 블로그에서 언어별 기본 경로를 설정할 수 있습니다.
  • 미디어 파일을 별도 서버로 분리할 때 유용합니다.
  • 모든 외부 링크를 새 탭에서 열도록 설정할 수 있습니다.
  • 리소스 경로 변경 시 한 곳에서만 수정하면 됩니다.

브라우저 지원

모든 주요 브라우저에서 지원됩니다.

  • Chrome: 지원
  • Firefox: 지원
  • Safari: 지원
  • Edge: 지원
  • Opera: 지원