HTML에서는 <base> 태그를 사용하여 페이지 전체에 적용되는 기본 URL(base URL)을 설정할 수 있습니다. <head> 섹션 안에 이 태그를 한 번만 작성해 두면, 그 이후 문서에 포함된 모든 상대 경로 링크와 이미지가 해당 URL을 시작점으로 삼아 해석됩니다.
기본 URL 설정의 장점
기본 URL을 활용하면 다음과 같은 이점이 있습니다.
- 여러 페이지에서 동일한 도메인의 리소스를 사용할 때 경로를 짧게 유지할 수 있습니다.
- 사이트 도메인이 변경되더라도
<base>태그 한 곳만 수정하면 되므로 유지보수가 쉬워집니다.
예제
아래 코드를 실행하면 HTML 페이지의 모든 링크에 기본 URL을 추가하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML base Tag</title> <base href = "https://www.qries.com" /> </head> <body> Qries.com <img src = "/images/banner_logo.png" /> </body> </html>
위 예제에서 이미지 경로 /images/banner_logo.png는 상대 경로이지만, <base href="https://www.qries.com"> 덕분에 브라우저는 자동으로 https://www.qries.com/images/banner_logo.png로 해석합니다. 즉, 문서 내의 모든 상대 링크가 별도의 접두어 없이도 올바른 전체 URL로 연결됩니다.