HTML <base> href 속성

HTML <base> 태그

정의와 사용법

href 속성은 페이지에 모든 상대 경로의 기본 URL을 지정합니다。

설명

base 요소는 HTML 문서에서 상대 링크를 기준으로解析할 기본 URL을 설정하는 데 사용됩니다。

상대 링크는 URL의 프로토콜, 호스트, 포트 부분을 제외하고 있으며, 다른 URL(또는 base에서 지정된 URL, 현재 문서의 URL)을 기준으로 완전한 형식을 얻어야 합니다。

href 속성은 문서 이후 부분에서 상대 경로를解析할 때 사용할 기본 URL을 지정합니다。

예제

예제 1

페이지에 모든 상대 경로에 대한 기본 URL을 지정합니다：

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.codew3c.com/i/photo/">
</head>
<body>
<h1>base href 속성</h1>
<img src="flower.png" width="60" height="60" alt="tullip">
</body>
</html>

직접 시도해보세요

예제 설명

이 예제에서 기본 URL을 https://www.codew3c.com/i/photo/로 설정했습니다. www.codew3c.com은 호스트 도메인이며, /i/photo/는 서버에 사진 파일이 포함된 디렉토리입니다。

문서의 마지막 부분에는 flower.png 이라는 상대 경로를 사용하여 이미지를 참조하는 img 요소가 있습니다. 브라우저가 이미지를 로드할 때, 기본 URL과 상대 경로를 결합하여 완전한 URL을 생성합니다：

https://www.codew3c.com/i/photo/flower.png

예제 2

페이지에 모든 상대 경로에 대한 기본 URL을 지정합니다：

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.codew3c.com/html/">
</head>
<body>
<h1>base href 속성</h1>
<a href="html_basic.asp">HTML 기본</a>
</body>
</html>

직접 시도해보세요

예제 설명

이 예제에서 기본 URL을 https://www.codew3c.com/html/로 설정했습니다. www.codew3c.com은 호스트 도메인이며, /html/는 서버에 사진 파일이 포함된 디렉토리입니다。

문서의 마지막 부분에는 링크를 생성하는 a 요소가 있으며, 이는 html_basic.asp 이라는 상대 경로를 사용합니다. 사용자가 이 슈퍼 링크를 클릭할 때, 브라우저는 기본 URL과 상대 경로를 완전한 URL로 결합합니다：

https://www.codew3c.com/html/html_basic.asp

추가 정보

base 요소를 사용하지 않거나, href 속성을 사용하여 기준 URL을 설정하지 않으면, 브라우저는 현재 문서의 URL을 모든 상대 URL의 해석 기준으로 인식합니다。

예를 들어, 브라우저가 https://www.codew3c.com/js/index.asp 이 URL에서 문서를 로드하면, 이 문서에 html_basic.asp 이 이름의 상대 URL을 사용한 하이퍼링크가 있으며, 이 하이퍼링크를 클릭할 때 브라우저는 https://www.codew3c.com/js/html_basic.asp 이 절대 URL에서 두 번째 문서를 로드하려고 시도합니다。

문법

<base href="URL">

속성 값

값 설명
URL 기준 URL로 사용되는 절대 URL（예: “http://www.example.com/”）。

브라우저 지원

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 지원 지원 지원 지원

HTML <base> 태그