<base> 요소의 href 속성은 문서 내 모든 상대 URL이 참조할 기준 URL(베이스 URL)을 지정하는 역할을 합니다.
예를 들어, 기준 URL을 https://example.com/tutorials로 설정하면 /html, /java, /jquery와 같은 상대 URL들은 최종적으로 다음과 같이 해석됩니다.
https://example.com/tutorials/html
https://example.com/tutorials/java
https://example.com/tutorials/jquery
기본 문법
href 속성의 사용 문법은 다음과 같습니다.
<base href="절대_URL">
여기서 절대_URL(absolute_URL)은 기준 URL이 되는 전체 주소를 의미합니다. 이렇게 지정된 기준 URL은 문서 안에 있는 모든 상대 경로 링크, 이미지, 스크립트 등에 일괄 적용됩니다.
예제 코드
다음은 <base> 요소의 href 속성을 실제로 활용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<base href="https://www.example.com/tutorials/">
</head>
<body>
<h2>튜토리얼 목록</h2>
<p><a href="java.html">Java 튜토리얼</a></p>
<p>(https://www.example.com/tutorials/java.html 로 연결됨)</p>
<p><a href="jquery.html">jQuery 튜토리얼</a></p>
<p>(https://www.example.com/tutorials/jquery.html 로 연결됨)</p>
<p><a href="blockchain.html">블록체인 튜토리얼</a></p>
<p>(https://www.example.com/tutorials/blockchain.html 로 연결됨)</p>
<p><a href="python.html">Python 튜토리얼</a></p>
<p>(https://www.example.com/tutorials/python.html 로 연결됨)</p>
</body>
</html>
실행 결과
위 예제에서는 먼저 기준 URL을 아래와 같이 설정했습니다.
<base href="https://www.example.com/tutorials/">
이후 본문에서 링크를 java.html처럼 상대 경로로 작성하면, 브라우저는 이를 자동으로 다음과 같은 절대 URL로 해석하여 이동합니다.
https://www.example.com/tutorials/java.html
정리
<base> 태그의 href 속성을 활용하면 여러 개의 링크마다 도메인과 경로를 반복해서 작성할 필요 없이, 짧은 상대 경로만으로도 일관된 URL 구조를 유지할 수 있습니다. 단, <base> 태그는 반드시 <head> 영역 안에 위치해야 하며, 하나의 문서에는 하나만 사용할 수 있다는 점을 기억하세요.