ELEMENTS

Editing
  • account_tree
  • bug_report

<link>

문서에 사용할 외부 리소스와의 관계를 설정하고 연결한다.

  • 콘텐츠 분류

  • 허용된 부모 요소 또는 위치

    <HEAD>

  • 태그 생략

    종료 태그 생략 가능

  • DOM Interface

    HTMLLinkElement

    [Exposed=Window]
    interface HTMLLinkElement : HTMLElement {
      [HTMLConstructor] constructor();
    
      [CEReactions] attribute USVString href;
      [CEReactions] attribute DOMString? crossOrigin;
      [CEReactions] attribute DOMString rel;
      [CEReactions] attribute DOMString as;
      [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
      [CEReactions] attribute DOMString media;
      [CEReactions] attribute DOMString integrity;
      [CEReactions] attribute DOMString hreflang;
      [CEReactions] attribute DOMString type;
      [SameObject, PutForwards=value] readonly attribute DOMTokenList sizes;
      [CEReactions] attribute USVString imageSrcset;
      [CEReactions] attribute DOMString imageSizes;
      [CEReactions] attribute DOMString referrerPolicy;
      [SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;
      [CEReactions] attribute boolean disabled;
      [CEReactions] attribute DOMString fetchPriority;
    
      // also has obsolete members
    };
    HTMLLinkElement includes LinkStyle;

애트리뷰트

href non-empty URL

유효한 URL을 설정한다. 설정된 URL은 요소에 따라 용도가 정해진다. 리소스를 가져오거나 하이퍼링크를 위한 목적지로 사용될 수 있다. 또한 참조되는 값으로 사용될 수 있다.

About Non-empty URL

비워있지 않은 유효한 URL을 나타내는 문자열을 나타낸다.

사용 예

<link href="./style.css" rel="stylesheet" type="text/css">
crossorigin enumerated attribute

교차출처(CORS) 정책에 따라 리소스를 가져올지를 나타낸다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

이 요소에서의 특징

유효하지 않은 값을 가진 경우의 기본값은 anonymous이고 누락된 경우 기본값은 NO CORS 상태이다.

사용 예

<link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" 
    crossorigin="anonymous" referrerpolicy="no-referrer" />

사용되는 키워드

anonymous

교차 출처(CORS) 요청을 수행하지만  별도의 자격 증명을 보내지 않고 same-origin으로 설정되어 익명으로 요청을 한다. 

use-credentials

교차 출처(CORS) 요청을 수행하면서 쿠키(cookie), X.509 인증서, HTTP Basic 인증 중 한 가지 이상의 자격 증명을 포함하는 include로 설정되어 요청을 한다. 

rel unordered set of unique space-separated tokens

리소스를 연결하는 경우 관계를 정의한다. 연결 유형은 지정된 값을 공백으로 구분한 리스트로 작성해야 한다. 그러나 특별히 명시된 경우를 제외하고는 두 번 이상 지정할 수 없다.

About Unordered set of unique space-separated tokens

순서가 없는 공백으로 구분된 고유한 토큰 세트를 나타낸다.

사용되는 키워드

alternte

사용되는 요소가 <link>이고 stylesheet 키워드가 설정된 경우라면 추가적으로 alternate 키워드를 지정하는 경우 대체 스타일 시트로 연결된다. 이 경우 빈 문자열 값을 허용하지 않으며 유효한 값을 가진 title 애트리뷰트가 반드시 존재해야 한다.

일반적으로 외부의 CSS 파일을 연결할 때 <link> 요소를 사용하므로 주로 위와 같은 경우처럼 alternate가 사용된다.

<a>, <area>, <link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

author

작성자에 대한 정보 및 작성자와 연락 가능한 연락처 정보가 담긴 페이지로 연결되는 하이퍼링크로 정의한다.

<a>, <area>, <link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

bookmark

가장 가까운 조상 <article> 요소에 대해 퍼머링크(permalink)를 제공하는 하이퍼링크로 정의한다. 만약에 <article> 요소가 없다면 <link> 요소와 가장 가까운 관계를 가지고 있는 섹션(section)에 대한 퍼머링크(permalink)로 인식된다.

<a>, <area>요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

canonical

현재 문서의 기본 URL을 지정한다.

<link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

dns-prefetch

유저 에이전트(user agent)가 대상 리소스의 출처에 대한 DNS 확인을 선제적으로 수행하도록 지정한다.

<link> 요소에서 외부 리소스(external resource)로 사용이 가능하다.

external

연결될 문서가 현재 웹사이트 외부의 리소스임을 알린다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

help

상황에 맞는 도움말에 대한 링크를 제공한다.

만약 <a> 요소이거나 <area> 요소이면 help는 하이퍼링크가 부모와 자손 요소에 대한 추가 도움말을 제공하는 리소스임을 나타낸다.

<link> 요소라면 help는 하이퍼링크가 페이지 전체에 대한 추가 도움말을 제공하는 리소스임을 나타낸다.

<a>, <area>, <link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

icon

현재 문서를 나타내는 아이콘을 가져오는 것으로 처리한다. 때때로 icon 앞에 shortcut 유형을 작성하는 경우가 있는데 이는 비표준이며 웹브라우저가 무시하므로 사용하지 않아야 한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

참고로 애플(Apple)의 iOS는 icon 유형을 사용하지 않을 수 있다. 더 자세한 사항은 iOS의 사파리(safari) 웹브라우저의 최신 기술 명세를 확인하라.
license

현재 문서의 주요 콘텐츠가 하이퍼링크(hyperlink)로 참조된 문서에 설명된 저작권 라이선스의 적용을 받는다는 것을 나타낸다.

<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

manifest

애플리케이션의 매니페스트(manifest)를 가져오거나 연결한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

mask-icon

단색의 투명한 배경을 갖는 SVG 아이콘을 나타낸다. color 애트리뷰트와 함께 사용될 수 있다. W3C 명세에는 반드시 지원하지 않아도 되는 것으로 정했다. 따라서 모든 최신 유저 에이전트가 지원한다고 보기 어렵다.

사파리(safari) 웹브라우저에서 지원한다.
modulepreload

유저 에이전트(user agent)가 모듈 스크립트(moduel script)를 선제적으로 가져와 나중에 평가할 수 있도록 문서의 모듈 맵(moduel map)에 저장하도록 지정한다. 선택적으로 모듈의 종속성도 가져올 수 있다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

next

현재 문서가 구조화된 문서의 일부이며 하이퍼링크(hyperlink)로 연결될 문서가 다음 순서에 해당하는 것을 의미한다.

<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

nofollow

현재 문서의 게시자(또는 원저자)가 연결될 문서를 보증하지 않음을 나타낸다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

noopener

하이퍼링크(hyperlink)가 현재 문서와 컨텍스트(context)가 단절되어 열린다. 즉 하이퍼링크(hyperlink)로 열린 문서에서 window.opener 속성 값은 null을 갖는다. 신뢰할 수 없는 문서를 연결할 때 유용하다. target 애트리뷰트는 기본적으로 _blank로 적용된다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

noreferrer

하이퍼링크(hyperlink) 연결을 정의한 현재 문서를 하이퍼링크(hyperlink)로 열릴 문서에서 참조하도록 헤더(header)에 포함시키지 않는다. 즉 문서를 열게한 문서와 단절된다는 측면에서 noopener와 동일한 작용을 한다고 할 수 있다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

opener

하이퍼링크(hyperlink)로 열릴 문서는 현재 문서의 탐색 컨텍스트(context)를 포함한다. 즉 noopener와 반대 작용을 한다고 볼 수 있다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

pingback

현재 문서에 대한 핑백(pingback)을 처리하는 핑백(pingback) 서버의 주소를 지정한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

preconnect

유저 에이전트가 대상 리소스의 오리진(origin)에 선제적으로 연결하도록 지정한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

prefetch

후속 탐색이 가능하도록 유저 에이전트가 대상 리소스를 선제적으로 가져와 캐시(cache)하도록 지정한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

preload

유저 에이전트가 as 애트리뷰트에 지정된 잠재적 목적지와 연결 우선 순위에 따라 현재 탐색을 위해 대상 리소스를 선제적으로 가져와 캐시(cache)하도록 지정한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

prev

현재 문서가 구조화된 문서의 일부이며 하이퍼링크(hyperlink)로 연결될 문서가 이전 순서에 해당하는 것을 의미한다.

<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

search

현재 문서 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스에 대한 링크를 나타낸다.

<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

stylesheet

현재 문서에 스타일시트 문서를 리소스로 가져온다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

tag

하이퍼링크가 현재 문서에 적용되는 태그를 설명하는 문서임을 나타낸다.

<a>, <area> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

as keywords and enumerated attributes

<link> 요소에 rel 애트리뷰트가 preload 또는 prefetch 값을 가지고 있을 때만 설정한다. as 애트리뷰트는 href 애트리뷰트에 설정한 리소스에 대한 사전 로드(load) 요청의 잠재적 대상의 유형을 지정한다.

사용되는 키워드

audio

<audio> 요소를 나타낸다.

document

<iframe><frame> 요소를 나타낸다.

embed

<embed> 요소를 나타낸다.

fetch

fetch, XHR 리소스를 나타낸다.

font

CSS @font-face를 나타낸다.

image

srcset 또는 imageset 특성을 가진 <img><picture> 요소와 SVG <image> 요소, CSS *-image 규칙을 나타낸다.

object

<object> 요소를 나타낸다.

script

<script> 요소, 워커(WORKER) importScripts를 나타낸다.

style

<link rel="stylesheet"> 요소, CSS @import를 나타낸다.

track

<track> 요소를 나타낸다.

video

<video> 요소를 나타낸다.

worker

워커(Worker), 공유 워커(SharedWorker)를 나타낸다.

disabled boolean attributes

rel 애트리뷰트의 값이 stylesheet인 경우 함께 사용되는 부울(boolean) 유형의 애트리뷰트이다. disabled를 지정한 경우 스타일시트는 페이지 로딩 시점에 불러오지 않는다. 이후 disabled 값이 제거되거나 false로 바뀌는 경우 불러온다.

About Boolean attributes

불리언(boolean) 값을 나타낸다. 다음 불리언 값을 갖는 애트리뷰트인 disabled를 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

사용 예

<link href="/style.css" disabled >
media media query list

미디어쿼리 리스트(media query list)를 지정한다.

About Media query list

CSS <media-query-list> 타입을 나타낸다.

이 요소에서의 특징

연결될 리소스를 적용할 미디어 규칙을 명시한다. 

사용 예

<link href="/style.css" type="text/css" rel="stylesheet" media="screen and (max-width: 1000px)" >
hreflang BCP47

연결할 대상 리소스의 사용 언어를 나타낸다. 가능한 값은 BCP47에 따른다. 권고 사항으로 어떤 경우이든 반드시 강제하지 않는다. 리소스를 가져올 때 리소스 링크에 포함된 메타데이터가 아니라 리소스와 관련된 언어 정보만 사용하여 언어를 결정해야 한다.

About BCP47

국제인터넷표준화기구(IETF)에서 콘텐츠에 사용되는 (사람이 사용하는)언어를 태그로 정의한 BCP 47 기술 사양을 나타낸다. HTTP, HTML, XML, PNG 등과 같은 대부분의 기술 표준에서 채택되어 사용한다.

사용 예

<link href="/author.html" rel="license" hreflang="en" >
integrity string

요청에 대한 무결성 메타데이터를 나타낸다.

지원하는 해시(hash)는 sha256, sha384, sha512이다. 온라인에서 해시를 생성하는 서비스가 있으므로 참고한다. 오픈 소스 라이브러리를 CDN으로 서비스하는 경우에 기본적으로 무결성 해시 키를 제공하는 곳도 있다.

이 요소에서의 특징

rel 애트리뷰트의 값이 stylesheet, preload, modulepreload인 요소에게만 적용한다.

사용 예

<link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" 
    integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" 
    crossorigin="anonymous"
    referrerpolicy="no-referrer" />
type MIME type string

가장 많이 사용되는 대표적인 text/html, text/css, text/javascript가 있고 그외의 유형은 Media Types를 참고하라.

About MIME type string

미디어 유형 토큰(token) 생성과 일치하는 문자열이다. 매개변수가 포함될 수 있다. 매개변수가 없는 유효한 MIME 형식 문자열은 U+003B(;)을 포함하지 않은 MIME 형식 문자열이다.

사용 예

<link href="style.css" type="text/css" rel="stylesheet" >

사용되는 키워드

text/css

*.css와 같이 스타일시트(stylesheet) 파일을 나타내는 MIME 유형이다.

text/html

*.html, *.htm 파일을 나타내는 MIME 유형이다.

text/javascript

*.js 파일을 나타내는 MIME 유형이다.

referrerpolicy enumerated attribute

리소스를 가져올 때 사용할 리퍼러(referrer)를 나타낸다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

사용되는 키워드

no-referrer

리퍼러(referrer) 헤더(header)가 전송되지 않는다.

no-referrer-when-downgrade

요청의 리퍼러(referrer)로 사용할 수 있도록 요청의 전체 referrerURL을 제거하여 보낸다. TLS(HTTPS)를 사용하지 않고 오리진(origin)으로 요청할 때 리퍼러(referrer) 헤더(header)를 보내지 않음을 의미한다. 명시적으로 지정한 정책이 없다면 기본값으로 처리된다.

origin

same-origin-referrer 요청 및 cross-origin-referrer 요청을 모두 수행할 때 요청의 referrerURL의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.

origin-when-cross-origin

same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청의 경우는 요청의 referrerURL 원본의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.

same-origin

same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되도록 한다. 반면에 cross-origin-referrer 요청에는 전송되지 않는다.

strict-origin

요청에 대한 referrerURL 원본의 ASCII 직렬화를 전송한다.

strict-origin-when-cross-origin

same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청시에는 요청의 referrerURL 원본의 ASCII 직렬화만 전송되도로 한다.

unsafe-url

요청의 전체 referrerURLsame-origin-referrer 요청과 cross-origin-referrer 요청 모두에게 전송되도록 한다.

sizes space-separated tokens

any 키워드 또는 지정된 크기 목록을 값으로 지정한다. rel 애트리뷰트가 icon인 경우에만 사용 가능하다.

구문 예

공통으로 사용하는 애트리뷰트의 경우 구문에 사용된 요소가 다를 수 있다.

구문 형식
any | [<width>"x"<height>]+

사용 예

<!-- 1 sizes -->
<link href="favicon.png" sizes="16x16" rel="icon" type="image/png" >

<!-- 2 sizes -->
<link href="favicon.png" sizes="16x16 32x32" rel="icon" type="image/png" >

사용되는 키워드

any

아이콘이 확장 가능하도록 한다.

imagesrcset srcset attribute

rel 애트리뷰트 값이 preload이고 as 애트리뷰트 값이 image로 설정되어야 한다.

About Srcset attribute

콤마(,)로 구분된 하나 이상의 문자열 값이며 유저 에이전트가 환경에 따라 선택적으로 사용할 수 있는 이미지 리소스를 나타낸다.

구문 예

공통으로 사용하는 애트리뷰트의 경우 구문에 사용된 요소가 다를 수 있다.

구문 형식
[<image-url> <width-descriptor>]#

사용 예

<link rel="preload" as="image"
   imagesrcset="foo_400px.jpg 400w, foo_800px.jpg 800w, foo_1600px.jpg 1600w"
   imagesizes="50vw">
imagesizes sizes attribute

rel 애트리뷰트 값이 preload이고 as 애트리뷰트 값이 image로 설정되어야 한다. 또한 imagesrcset 애트리뷰트도 명시적으로 설정되어야 한다.

About Sizes attribute

리소스의 크기 집합을 나타내는 콤마로 구분된 하나 이상의 문자열을 나타낸다.

구문 예

공통으로 사용하는 애트리뷰트의 경우 구문에 사용된 요소가 다를 수 있다.

구문 형식
[<media-query-list>? <width>]#

사용 예

<link rel="preload" as="image"
   imagesrcset="foo_400px.jpg 400w, foo_800px.jpg 800w, foo_1600px.jpg 1600w"
   imagesizes="(min-width: 400px) 700px, (max-width: 800px) 100vw">
blocking unordered set of unique space-separated tokens

외부 리소스를 가져올 때 특정 작업(예: render)을 차단해야 함을 명시적으로 설정한다. 기본값은 차단 가능성이 없는 상태이다.

About Unordered set of unique space-separated tokens

순서가 없는 공백으로 구분된 고유한 토큰 세트를 나타낸다.

이 요소에서의 특징

rel 애트리뷰트가 stylesheet 값을 갖는 경우에 사용이 가능하다.

사용 예

<link href="./style.css" rel="stylesheet" type="text/css" blocking="render" >

사용되는 키워드

render

평가를 하지만 렌더링을 차단한다.

color 

rel 애트리뷰트 값이 mask-icon인 경우 사용이 가능하다. CSS에서 사용하는 색상 값으로 아이콘의 색상을 지정한다.

사용 예

<link href="./mask-icon.svg" rel="mask-iocn" color="#CCCCCC">
fetchpriority enumerated attribute

연결된 리소스를 가져와 처리할 때 우선 순위를 결정한다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

사용되는 키워드

auto

동일한 대상을 가진 다른 리소스와 비교하여 가져오기 우선 순위를 자동으로 결정한다.

high

동일한 대상을 가진 다른 리소스에 비해 우선 순위가 높은 가져오기를 알린다.

low

동일한 대상을 가진 다른 리소스에 비해 우선 순위가 낮은 가져오기를 알린다.

글로벌 애트리뷰트

일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.

버전 명세

HTML Standard
#the-link-element

지원 웹브라우저