HTML <base>: 기준 URL 요소

HTML <base> 요소는 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. 문서에는 하나의 <base> 요소만 존재할 수 있습니다.

스크립트에서 문서의 기준 URL을 알아내야 할 땐 Node.baseURI을 사용하세요. 문서에 <base> 요소가 존재하지 않을 때의 baseURI 속성의 값은 location.href와 같습니다.

<head>
  <base href="https://sorto.me/docs/Web" target="_top" />
</head>

특성

전역 특성을 포함합니다.

아래 특성 중 하나라도 지정할 경우, 상대 URL을 사용한 다른 모든 요소보다 <base> 요소를 HTML 문서의 위에 배치해야 합니다.

href

문서 내의 상대 URL이 사용할 기준 URL입니다. 절대 및 상대 URL을 사용할 수 있습니다.

target

target 특성을 명시하지 않은 <a>, <area>, <form> 요소가 탐색을 유발했을 때, 그 결과를 보여줄 기본 브라우징 맥락을 지정합니다. 키워드나 사용자 정의 이름을 사용할 수 있습니다.

다음 키워드는 특별한 의미를 갖습니다.

_self (기본값): 결과를 현재 브라우징 맥락에 보여줍니다.
_blank: 결과를 새롭게 생성한 이름 없는 브라우징 맥락에 보여줍니다.
_parent: 현재 페이지가 프레임 안에 존재하는 경우, 결과를 현재 브라우징 맥락의 부모에 보여줍니다. 부모가 없으면 _self와 동일합니다.
_top: 결과를 최상위 브라우징 맥락에 보여줍니다. 최상위 브라우징 맥락이란 현재 맥락의 조상 중 부모가 없는 맥락입니다. 현재 맥락이 부모를 가지지 않으면 _self와 동일합니다.

사용 일람

다수의 `<base>` 요소

<base> 요소가 여럿 존재하는 경우, 제일 처음으로 지정한 target 특성과 제일 처음으로 지정한 href 특성을 제외한 나머지는 모두 무시합니다.

<base href="https://sorto.me/docs/Web" />
<!-- 제일 처음으로 지정한 href 특성 -->
<base target="_blank" />
<!-- 제일 처음으로 지정한 target 특성 -->
<base href="https://example.org" target="_self" />
<!-- 무시함 -->

페이지 내부 앵커

<a href="#some-id">처럼 문서 프래그먼트를 가리키는 링크의 href도 <base>의 기준 URL을 사용합니다. 따라서 기준 URL 뒤에 프래그먼트를 붙인 주소로 HTTP 요청을 전송합니다. 예를 들어,

<base href="https://example.com">이고,
<a href="#anchor">앵커</a>일 때,
2번의 링크는 #anchor가 아니라 https://example.com/#anchor를 가리킵니다.

Open Graph

Open Graph 태그는 <base>를 인식하지 못하므로 항상 완전한 형태의 절대 URL을 지정해야 합니다.

<base href="https://example.com/" /> <meta property="og:image" content="/thumbnail.jpg" />

<meta property="og:image" content="https://example.com/thumbnail.jpg" />

명세

HTML Living Standard

브라우저 호환성

	IE	Edge	Chrome	Safari	Firefox	iOS Safari	Android WebView	Android Chrome	Android Firefox	Samsung Internet
`base`
`href`
`data:` and `javascript:` urls are not allowed
Relative URIs.
`target`

MDN browser-compat-data

특성