HTML DOM의 Link rel 속성은 현재 문서와 <link> 요소로 연결된 외부 문서 사이의 관계(relationship)를 설정하거나 반환하는 속성입니다. 웹 표준상 rel 속성은 필수로 명시해야 하며, 스타일시트 연결, 아이콘 지정, 성능 최적화 등 다양한 용도로 활용됩니다.
문법(Syntax)
rel 속성의 기본 사용 문법은 다음과 같습니다.
1. rel 속성 값 반환하기
linkObject.rel
2. rel 속성 값 설정하기
linkObject.rel = valueString
valueString 종류
rel 속성에 지정할 수 있는 valueString 값과 각각의 의미는 아래 표와 같습니다.
| valueString | 설명 |
|---|---|
| alternate | 연결된 문서의 대체 표현(예: 다른 언어 버전, RSS 피드 등)을 제공합니다. |
| author | 연결된 문서의 작성자 정보로 연결되는 링크를 제공합니다. |
| dnsprefetch | 브라우저가 대상 리소스의 출처(origin)에 대해 DNS 조회를 미리 수행하도록 지정합니다. |
| help | 도움말 문서가 존재하는 경우 해당 문서로 연결되는 링크를 제공합니다. |
| icon | 문서를 대표하는 아이콘(파비콘 등)을 가져옵니다. |
| license | 연결된 문서의 저작권 관련 정보를 제공합니다. |
| next | 일련의 문서 목록에서 다음 문서로 연결되는 링크를 제공합니다. |
| pingback | 현재 연결된 문서의 핑백(pingback)을 처리하는 핑백 서버의 주소를 제공합니다. |
| preconnect | 브라우저가 대상 리소스의 출처에 미리 연결(pre-connect)하도록 지정합니다. |
| prefetch | 이후 문서 탐색에 필요할 것으로 예상되는 대상 리소스를 브라우저가 미리 가져와 캐시하도록 지정합니다. |
| preload | "as" 속성으로 지정된 용도(및 해당 우선순위)에 따라 현재 탐색에 필요한 대상 리소스를 브라우저가 반드시 미리 가져와 캐시하도록 지정합니다. |
| prerender | 브라우저가 지정된 웹페이지를 백그라운드에서 미리 로드하도록 지정합니다. 사용자가 실제로 해당 페이지로 이동하면 로딩 속도가 크게 향상됩니다. |
| prev | 현재 문서가 시리즈의 일부이며, 참조된 연결 문서가 시리즈의 이전 문서임을 나타냅니다. |
| search | 현재 문서와 관련 페이지를 검색하는 데 활용할 수 있는 리소스 링크를 제공합니다. |
| stylesheet | 외부 스타일시트를 현재 문서로 가져옵니다. |
예제(Example)
다음은 Link rel 속성을 활용한 예제입니다. 연결된 문서의 rel 값이 'stylesheet'인지 확인하고 결과를 화면에 출력합니다.
<!DOCTYPE html>
<html>
<head>
<title>Link rel</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-rel</legend>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var extStyle = document.getElementById("extStyle");
if(extStyle.rel === 'stylesheet')
divDisplay.textContent = '연결된 문서는 stylesheet 유형입니다';
else
divDisplay.textContent = '연결된 문서의 유형은 ' + extStyle.rel + ' 입니다';
</script>
</body>
</html>위 예제에서 외부로 연결된 'style.css' 파일의 내용은 다음과 같습니다.
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
