HTML <link>: 외부 리소스 링크 요소

HTML <link> 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. <link>는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘 (“파비콘”과 홈 화면 아이콘) 이미지 연결 등 다른 여러가지 용도로도 사용할 수 있습니다.

외부 스타일 시트를 연결하려면 <link> 요소를 <head> 안에 배치하세요.

<head>
  <link href="main.css" rel="stylesheet" />
</head>

위의 코드는 href 특성에 연결하려는 스타일 시트의 경로를 지정하고, rel 특성에 stylesheet을 사용하는 짧은 예제입니다. rel은 현재 문서와 연결한 아이템의 관계(relationship)가 어떻게 되는지 설명하는, <link>의 제일 중요한 기능 중 하나라고 볼 수 있습니다. 지정할 수 있는 관계에는 다양한 종류가 있고, 전체 목록은 링크 유형 참고서에서 볼 수 있습니다.

일부 관계 유형은 특히 더 자주 쓰입니다. 예를 들어, 사이트에 파비콘을 추가하려면…

<link rel="icon" href="favicon.ico" />

아이콘 추가에 사용하는 rel에는 다른 값도 있으며, 주로 다양한 휴대기기 플랫폼에서 사용하는 특별한 아이콘을 지정할 때 사용합니다.

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png" />

sizes 특성은 아이콘 크기를 나타내고, type 특성은 연결할 리소스의 MIME 유형입니다. 브라우저는 이런 추가 정보를 바탕으로 현재 가장 적합한 아이콘을 선택합니다.

media 특성에 미디어 유형이나 쿼리를 지정할 수도 있는데, 그러면 해당 미디어 조건을 만족할 때만 연결된 리소스를 불러옵니다.

<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)" />

최근에는 <link>에 성능 및 보안 관련 기능도 추가됐습니다. 다음 코드로 살펴보겠습니다.

<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous" />

rel의 preload 값은 브라우저가 이 리소스를 미리 불러와야 한다는 것을 나타내고, as 특성은 가져오려는 리소스가 어떤 리소스인지 나타냅니다. 마지막으로 crossorigin 특성은 리소스를 CORS 요청으로 불러와야 하는지 결정합니다.

기타 특징도 확인하세요.

  • 링크 관계의 유형이 “body-ok”라면 <link>를 <body> 안에 배치할 수도 있습니다. 예를 들어 stylesheet 링크 유형은 body-ok며, 따라서 <link rel="stylesheet">은 <body> 내에 배치할 수 있습니다. 그러나 가능한 방법이 좋은 방법은 아닙니다. <link>는 콘텐츠와 분리해 <head>에 배치하는 편이 낫습니다.
  • <link>를 사용해 파비콘을 추가할 때, 사이트가 보안 향상을 위해 콘텐츠 보안 정책(CSP)을 적용하고 있으면 파비콘도 CSP의 대상이 됩니다. 파비콘을 불러올 수 없으면 Content-Security-Policy 헤더의 img-src 지시어가 접근을 막고 있나 확인해보세요.

특성

전역 특성을 포함합니다.

as

rel="preload" 또는 rel="prefetch"를 지정한 경우에만 사용합니다. <link>가 불러오는 콘텐츠의 유형을 나타낼 수 있으며, 요청 매칭과 올바른 콘텐츠 보안 정책 적용, 올바른 Accept 요청 헤더 설정에 필요합니다. 또한 rel="preload" 특성은 as 특성의 값을 요청 우선순위 결정에 참고합니다. 아래는 as의 값과, 대응하는 요소 또는 리소스를 나열한 표입니다.

값적용 대상
audio<audio> 요소
document<iframe>, <frame> 요소
embed<embed> 요소
fetchfetch, XMLHttpRequest.
참고: 이 값을 사용하려면 <link>에 crossorigin 특성도 지정해야 합니다.
fontCSS @font-face
image<img>, srcset 또는 imageset을 지정한 <picture>, SVG <image>, CSS *-image 속성
object<object> 요소
script<script> 요소, Web Worker importScripts
style<link rel="stylesheet"> 요소, CSS @import
track<track> 요소
video<video> 요소
workerWorker, SharedWorker
crossorigin

지정한 리소스를 가져올 때 CORS를 사용해야 하는지 나타내는 열거형 특성입니다. CORS 활성화 리소스는 <canvas> 요소에 사용해도 캔버스가 오염(taint)되지 않습니다. 가능한 값은 다음과 같습니다.

anonymous

자격 증명 없이 교차 출처 요청을 전송합니다. 즉, Origin 헤더를 포함해 요청하지만 쿠키, X.509 인증서, HTTP Basic 인증은 전송하지 않습니다. 서버에서 Access-Control-Allow-Origin 헤더를 설정하지 않아 요청 출처가 인증 정보를 받지 못하면 리소스는 오염되고, 사용처가 제한됩니다.

user-credentials

자격 증명과 함께 교차 출처 요청을 전송합니다. 즉, Origin 헤더를 쿠키, X.509 인증서, 또는 HTTP Basic 인증과 함께 전송합니다. 서버에서 Access-Control-Allow-Origin 헤더를 설정하지 않아 요청 출처가 인증 정보를 받지 못하면 리소스는 오염되고, 사용처가 제한됩니다.

이 특성이 존재하지 않으면 리소스를 CORS 요청 없이 (Origin HTTP 헤더 없이) 가져오므로 리소스가 오염됩니다. 유효하지 않은 값의 경우 anonymous 깂을 사용한 것으로 간주합니다.

disabled

rel="stylesheet" 전용 불리언 특성입니다. 스타일 시트를 불러온 후에 문서에 적용해야 하는지 지정합니다. HTML을 불러온 시점에 disabled가 지정되어 있는 경우 스타일 시트를 아예 불러오지 않고, 값이 false로 바뀌거나 아예 특성이 제거되는 시점에 불러옵니다.

DOM에서 disabled 특성을 지정하면 문서의 styleSheets 리스트에서 스타일 시트가 제거됩니다.

fetchpriority

리소스를 가져올 때의 우선순위에 대한 힌트를 브라우저에 제공합니다. 가능한 값은 다음과 같습니다.

high

다른 리소스에 비해 높은 우선순위로 가져와야 함을 표시합니다.

low

다른 리소스에 비해 낮은 우선순위로 가져와야 함을 표시합니다.

auto

기본 값입니다. 브라우저가 우선순위를 자동으로 판단합니다.

href

연결할 리소스의 URL입니다. 절대 URL과 상대 URL 모두 지정할 수 있습니다.

hreflang

href로 연결한 링크의 인간 언어를 지정합니다. 별도의 기능은 없습니다. 전역 lang 특성과 같은 값을 사용합니다.

imagesize

as="image" rel="preload" 전용 특성입니다. Sizes 특성으로, <img> 요소에 사용할 이미지 리소스를 미리 불러올 때 그 sizes 특성으로 이 값을 사용합니다.

imagesrcset

as="image" rel="preload" 전용 특성입니다. Srcset 특성으로, <img> 요소에 사용할 이미지 리소스를 미리 불러올 때 그 srcset 특성으로 이 값을 사용합니다.

integrity

가져올 리소스의 해시 값을 Base64로 인코딩해 지정하면, 주어진 해시와 실제로 가져온 리소스의 해시를 브라우저가 비교해서 변형이나 조작이 있었는지 판별합니다. 하위 리소스 무결성 문서를 참고하세요.

media

가져온 리소스를 적용할 매체를 지정합니다. 매체 유형이나 미디어 쿼리 문자열을 지정할 수 있습니다. 매체에 따라서 스타일 시트를 다르게 적용할 때 유용합니다.

prefetch

다음 탐색 발생 시 이 리소스가 필요할 수도 있으므로 사용자 에이전트가 미리 불러오도록 지정합니다. 실제로 리소스가 필요해지면 새로 불러올 필요가 없으므로 응답 속도가 더 빨라질 수 있습니다.

referrerpolicy

리소스를 가져올 때 사용할 리퍼러를 지정합니다. 다음 값을 사용해야 합니다.

  • no-referrer: Referer 헤더를 전송하지 않습니다.
  • no-referrer-when-downgrade: TLS(HTTPS) 지원을 하지 않는 출처에 대해서는 Referer 헤더를 전송하지 않습니다.
  • origin: Referer 헤더가 요청의 출처, 즉 스킴, 호스트, 포트를 포함합니다.
  • origin-when-cross-origin: 다른 출처로 요청할 땐 리퍼러 데이터를 스킴, 호스트, 포트로 제한합니다. 동일 출처로 요청할 땐 전체 경로도 포함합니다.
  • same-origin: 동일 출처 요청에는 리퍼러를 전송하고, 교차 출처 요청에는 전송하지 않습니다.
  • strict-origin: 보안 수준이 동일(HTTPS→HTTPS)할 땐 문서의 출처를 리퍼러로 전송하고, 더 낮을(HTTPS→HTTP) 땐 전송하지 않습니다.
  • strict-origin-when-cross-origin (기본 값): 동일 출처 요청에는 전체 URL을 전송합니다. 교차 출처 요청에 대해서는 보안 수준이 동일(HTTPS→HTTPS)할 땐 문서의 출처를 리퍼러로 전송하고, 더 낮을(HTTPS→HTTP) 땐 전송하지 않습니다.
  • unsafe-url: 리퍼러가 항상 출처, 경로, 쿼리 문자열을 포함합니다. 프래그먼트, 비밀번호, 사용자 이름은 포함하지 않습니다. 안전하지 않은 값입니다. TLS로 보호받는리소스에서 보호 없는 출처로 정보가 누출될 수 있습니다.
rel

연결하는 리소스와 현재 문서 사이의 관계를 명시합니다. 공백으로 구분한 링크 유형 값의 목록이어야 합니다.

sizes

리소스가 담고 있는 아이콘의 크기를 지정합니다. rel의 값이 icon이거나, 비표준 아이콘 값인 apple-touch-icon 등일 때만 지정해야 합니다. 가능한 값은 다음과 같습니다.

  • any: image/svg+xml 등 벡터 형식 아이콘이라서 어떠한 크기라도 될 수 있음을 나타냅니다.

  • <너비 픽셀>x<높이 픽셀> 또는 <너비 픽셀>X<높이 픽셀>의 형식으로 나타내는 아이콘 크기입니다. 공백으로 구분한 리스트로, 복수의 값을 지정할 수 있습니다. 단, 복수의 값을 지정하는 경우 해당 아이콘 리소스가 모든 크기를 포함하고 있어야 합니다.

대부분의 아이콘 파일 형식은 단일 크기의 이미지만 저장할 수 있으므로 대부분의 sizes 특성 역시 하나의 값만 갖게 됩니다. Microsoft의 ICO 파일 형식이 다양한 크기를 지원하는 이미지 형식의 예시입니다.

title

<link> 요소의 title 특성은 전역 title 특성과 다른 의미를 갖습니다. <link>의 title을 rel="stylesheet"와 함께 사용하면 선호 스타일 시트와 대체 스타일 시트를 지정할 수 있습니다.

예제

스타일 시트 연결

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

다양한 맥락에서 사용할 아이콘 제공하기

한 페이지가 서로 다른 아이콘 여러 개와 연결되면, 브라우저는 rel과 sizes 값을 참고해서 최적의 아이콘을 선택합니다.

<!-- Retina 디스플레이 iPad -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png" />
<!-- Retina 디스플레이 iPhone -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png" />
<!-- 구형 iPad -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- 구형 iPhone -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- 기본 아이콘 -->
<link rel="icon" href="favicon32.png" />

미디어 쿼리에 맞는 스타일 시트만 불러오기

요소의 media 특성에 매체 유형이나 미디어 쿼리를 지정하면 현재 매체가 조건을 만족할 때만 리소스를 가져오게 됩니다.

<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)" />
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)" />

스타일 시트 load 이벤트

<link> 요소에서 발생하는 load 이벤트를 통해 스타일 시트를 불러온 시점을 알아낼 수 있습니다. 마찬가지로, 스타일 시트를 불러오다가 오류가 발생하면 error 이벤트를 통해 감지할 수 있습니다.

<script>
  const stylesheet = document.querySelector('#stylesheet')

  myStylesheet.onload = function () {
    console.log('스타일 시트를 불러왔습니다.')
  }

  myStylesheet.onerror = function () {
    console.error('스타일 시트를 불러오지 못했습니다!')
  }
</script>

<link rel="stylesheet" href="stylesheet.css" id="stylesheet" />

load 이벤트는 정확히 해당 스타일 시트 본문과 그 스타일 시트에서 가져오는 다른 콘텐츠까지 모두 불러와서 분석을 마친 후, 콘텐츠에 적용하기 직전에 발생합니다.

명세

HTML Living Standard

브라우저 호환성

IEEdgeChromeSafariFirefoxiOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
link
as
blocking
charset
crossorigin
disabled
fetchpriority
href
hreflang
imagesizes
imagesrcset
integrity
media
referrerpolicy
no-referrer-when-downgrade
origin-when-cross-origin
unsafe-url
rel
rel="alternate stylesheet"
rel=dns-prefetch
rel=expect
rel=icon
rel=manifest
rel=modulepreload
rel=preconnect
rel=prefetch
rel=preload
as=fetch
as=font
as=image
as=script
as=style
as=track
rel=prerender
rev
sizes
target
type
MDN browser-compat-data

같이 보기

  • 문서 내 스타일 시트: <style>
  • 문서 내 스크립트 및 외부 스크립트: <script>