HTML DOM Base href 속성 완벽 정리 – 사용법과 예제 코드

HTML DOM의 Base href 속성은 HTML의 <base> 태그와 연관된 속성입니다. <base> 태그는 현재 HTML 문서 내에 존재하는 모든 상대 URL(relative URL)의 기준이 되는 기본 URL을 지정하는 역할을 합니다. 하나의 HTML 문서에는 <base> 태그를 최대 한 개까지만 사용할 수 있으며, Base href 속성은 base 요소의 href 속성값을 반환합니다.

문법(Syntax)

Base href 속성의 사용 문법은 다음과 같습니다.

href 속성값 설정하기

baseObject.href = URL

여기서 URL은 해당 문서의 기본 URL(base URL)을 의미합니다.

href 속성값 가져오기

baseObject.href

예제(Example)

Base href 속성의 실제 동작을 확인할 수 있는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<base id="myBase" href="https://www.bing.com">
</head>
<body>
<a href="/images">IMAGES</a>
<p>아래 버튼을 클릭하면 위 링크의 href 값이 변경됩니다</p>
<button onclick="SetHref()">SET IT</button>
<button onclick="GetHref()">GET IT</button>
<p id="Sample"></p>
<script>
    function SetHref() {
        document.getElementById("myBase").href = "https://duckduckgo.com";
        document.getElementById("Sample").innerHTML = "기본 URL이 bing.com에서 duckduckgo.com으로 변경되었습니다";
    }
    function GetHref(){
        var x = document.getElementById("myBase").href;
        document.getElementById("Sample").innerHTML = x;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Base href 속성 완벽 정리 – 사용법과 예제 코드

SET IT 버튼을 클릭한 경우 −

HTML DOM Base href 속성 완벽 정리 – 사용법과 예제 코드

GET IT 버튼을 클릭한 경우 −

HTML DOM Base href 속성 완벽 정리 – 사용법과 예제 코드

예제 코드 상세 설명

위 예제가 어떻게 동작하는지 단계별로 살펴보겠습니다.

1. base 요소 생성

먼저 id가 "myBase"이고, href 속성값이 https://www.bing.com인 <base> 요소를 생성했습니다.

<base id="myBase" href="https://www.bing.com">

2. 앵커(anchor) 요소 생성

다음으로 href 속성값이 "/images"인 앵커(<a>) 요소를 만들었습니다. 여기서 "/images"는 상대 경로이며, 기준 경로는 <base> 태그에서 지정한 값입니다. 따라서 base URL과 앵커의 상대 경로가 결합되어 최종 URL은 https://www.bing.com/images가 됩니다.

<a href="/images">IMAGES</a>

3. 버튼 생성 및 함수 호출

SET IT과 GET IT 두 개의 버튼을 만들어 각각 SetHref() 함수와 GetHref() 함수를 호출하도록 구성했습니다.

<button onclick="SetHref()">SET IT</button>
<button onclick="GetHref()">GET IT</button>

4. SetHref() 함수 동작

SetHref() 함수는 "myBase"라는 id를 이용해 <base> 요소에 접근한 뒤, href 속성을 통해 기본 URL을 https://www.duckduckgo.com으로 변경합니다. 변경이 성공했다는 메시지는 id가 "Sample"인 단락(<p>)에 표시됩니다.

function SetHref() {
    document.getElementById("myBase").href = "https://duckduckgo.com";
    document.getElementById("Sample").innerHTML = "기본 URL이 bing.com에서 duckduckgo.com으로 변경되었습니다";
}

5. GetHref() 함수 동작

GetHref() 함수 역시 "myBase" id로 <base> 요소를 가져온 후, href 속성값을 읽어 변수 x에 할당합니다. 이후 innerHTML 속성을 사용해 단락의 내용을 x 값으로 교체하면, <base> 요소의 현재 href 값을 화면에서 확인할 수 있습니다.

function GetHref(){
    var x = document.getElementById("myBase").href;
    document.getElementById("Sample").innerHTML = x;
}

정리

HTML DOM의 Base href 속성을 활용하면 자바스크립트만으로 문서 전체의 기본 URL을 동적으로 읽거나 변경할 수 있습니다. 특히 상대 경로로 작성된 링크나 리소스들이 많은 대규모 웹 페이지에서 기준 URL을 유연하게 관리해야 할 때 유용하게 활용할 수 있습니다.