HTML DOM 앵커 rel 속성이란?
HTML DOM의 앵커(anchor) rel 속성은 링크 요소(<a> 태그)의 rel 속성값을 반환하거나 설정하는 데 사용됩니다. 여기서 rel 속성은 현재 실행 중인 문서와 연결된 대상 문서 사이의 관계(relationship)를 설명하는 역할을 합니다.
구문(Syntax)
rel 속성은 다음 두 가지 방식으로 사용할 수 있습니다.
1) rel 속성값 반환
anchorObject.rel
2) rel 속성값 설정
anchorObject.rel = "value"
예제
다음은 HTML DOM 앵커 rel 속성을 활용한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Example</h1>
<p><a id="anchorExample" rel="Rel Property" href="https://www.examplesite.com/">
Anchor Rel Property</a></p>
<p>Click on the button</p>
<button onclick="display()">Click me!</button>
<p id="show"></p>
<script>
function display() {
var docs = document.getElementById("anchorExample").rel;
document.getElementById("show").innerHTML = docs;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 아래와 같은 화면이 출력됩니다.
"Click me!" 버튼을 클릭하면 HTML DOM 앵커 rel 속성값이 화면에 표시됩니다.
코드 상세 분석
위 예제에서 수행되는 작업을 단계별로 살펴보겠습니다.
1. 앵커 태그 정의: rel 속성을 사용하여 연결된 문서와의 관계 유형을 지정했습니다. 이 예제에서 대상 문서는 href 값인 https://www.examplesite.com/ 입니다.
<p> <a id="anchorExample" rel="Rel Property" href="https://www.examplesite.com/">Anchor Rel Property</a> </p>
2. 버튼 생성: 클릭 시 display() 함수를 호출하는 "Click me!" 버튼을 만들었습니다.
<button onclick="display()">Click me!</button>
3. display 함수 구현: 이 함수는 id가 "anchorExample"인 요소의 rel 속성값을 가져온 뒤, id가 "show"인 요소의 innerHTML에 그 값을 출력합니다.
function display() {
var docs = document.getElementById("anchorExample").rel;
document.getElementById("show").innerHTML = docs;
}참고: 자주 사용되는 rel 속성값
rel 속성에는 목적에 따라 다양한 값을 지정할 수 있으며, 실무에서 많이 쓰이는 대표적인 값은 다음과 같습니다.
- nofollow – 검색 엔진 크롤러에게 해당 링크를 추적하지 말라고 지시
- noopener – target="_blank"로 열린 페이지가 window.opener 객체에 접근하지 못하도록 차단하여 보안 강화
- noreferrer – 링크 이동 시 참조자(referrer) 정보를 전달하지 않음
- external – 현재 사이트가 아닌 외부 사이트로 연결되는 링크임을 명시
- tag – 해당 링크가 현재 문서의 태그(키워드)임을 나타냄