HTML DOM에서 <a>(앵커) 태그와 연결된 target 속성은 사용자가 URL을 클릭했을 때 새 웹 페이지가 어느 위치에서 열릴지를 지정합니다. 이 속성은 다음과 같은 값을 가질 수 있습니다.
- _blank − 링크된 문서를 새 창(또는 새 탭)에서 엽니다.
- _parent − 링크된 문서를 부모 프레임셋(parent frameset)에서 엽니다.
- _top − 링크된 문서를 전체 본문 창(full body window)에서 엽니다.
- _self − 링크된 문서를 현재 창과 동일한 창에서 엽니다. 이것이 기본 동작입니다.
- framename − 링크된 문서를 지정한 프레임 이름(framename)에서 엽니다.
문법(Syntax)
target 속성을 반환하는 문법은 다음과 같습니다.
anchorObject.target
target 속성을 설정하는 문법은 다음과 같습니다.
anchorObject.target = "_blank|_self|_parent|_top|framename"
예제(Example)
앵커 target 속성의 실제 사용 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<p><a id="Anchor" target="_self" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.examplesite.com">example site</a></p>
<p>버튼을 클릭하면 target 속성의 값을 확인할 수 있습니다.</p>
<button onclick="getTarget1()">GetTarget</button>
<button onclick="setTarget2()">SetTarget</button>
<p id="Target1"></p>
<script>
function getTarget1() {
var x = document.getElementById("Anchor").target;
document.getElementById("Target1").innerHTML = x;
}
function setTarget2(){
document.getElementById("Anchor2").target = "newframe";
document.getElementById("Target1").innerHTML = "Target이 설정되었습니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
GetTarget 버튼을 클릭한 후 −
SetTarget 버튼을 클릭한 후 −
예제 상세 설명
위 예제에서는 두 개의 앵커 태그를 사용했습니다. 첫 번째 링크에는 target="_self"가 명시적으로 설정되어 있고, 두 번째 링크에는 target 속성이 따로 지정되어 있지 않습니다.
<p><a id="Anchor" target="_self" href="https://www.examplesite.com">example site</a></p> <p><a id="Anchor2" href="https://www.examplesite.com">example site</a></p>
또한 각각 getTarget1() 함수와 setTarget2() 함수를 실행하는 두 개의 버튼(GetTarget, SetTarget)을 만들었습니다.
<button onclick="getTarget1()">GetTarget</button> <button onclick="setTarget2()">SetTarget</button>
getTarget1() 함수는 첫 번째 링크의 target 값을 읽어와 id="Target1"인 단락(<p>)에 표시합니다. 반면 setTarget2() 함수는 두 번째 링크의 target 값을 사용자 정의 프레임인 "newframe"으로 변경하고, 그 결과를 화면에 출력합니다.
function getTarget1() {
var x = document.getElementById("Anchor").target;
document.getElementById("Target1").innerHTML = x;
}
function setTarget2(){
document.getElementById("Anchor2").target = "newframe";
document.getElementById("Target1").innerHTML = "Target이 설정되었습니다";
}참고: target="_blank" 사용 시 보안 팁
_blank로 새 창을 열 때는 성능 및 보안상의 이유로 rel="noopener noreferrer" 속성을 함께 추가하는 것이 권장됩니다. 이렇게 하면 새로 열린 페이지가 원래 페이지에 접근하는 것을 차단할 수 있습니다.
<a href="https://www.examplesite.com" target="_blank" rel="noopener noreferrer">example site</a>