<link>: 외부 리소스 연결 요소

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

시도해보기

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

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

위의 간단한 예제는 href 특성에 스타일 시트의 경로를, rel 특성에 stylesheet을 사용합니다. rel 은 관계(relationship)를 뜻하며, 현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명합니다. 따라서 <link> 요소의 제일 중요한 기능 중 하나라고 볼 수 있습니다.

그중에서도 몇 가지 자주 쓰이는 유형이 있습니다. 사이트의 파비콘을 연결하려면 다음과 같이 사용합니다.

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

아이콘을 위한 rel 값도 여러개가 있으며, 주 용도는 다양한 휴대기기 플랫폼의 특별한 아이콘을 나타내기 위함입니다.

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

sizes 특성은 아이콘 크기를, type 특성은 연결한 리소스의 MIME을 포함합니다. 브라우저는 이런 여러가지 정보를 통해 가장 적합한 아이콘을 선택합니다.

media 특성을 사용해 미디어 유형이나 쿼리를 지정할 수도 있습니다. 그러면 해당 미디어 조건을 만족할 때만 리소스를 불러옵니다.

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

새로운 성능 및 보안 관련 기능도 <link> 요소에 추가됐습니다. 다음 코드로 살펴보겠습니다.

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

rel의 preload 값은 브라우저가 이 리소스를 미리 불러와야 한다는 것을 나타내고(자세한 정보는 rel="preload"를 참고하세요), as 특성은 가져오는 리소스가 어떤 리소스인지 나타냅니다. crossorigin 특성은 리소스를 CORS 요청으로 불러와야 하는지에 대한 값입니다.

기타 사용 일람:

  • <link> 요소의 링크 유형이 body-ok 인 경우, <head> 또는 <body> 요소에 포함될 수 있습니다. 예를 들어 stylesheet 링크 유형은 body-ok 이므로, <link rel="stylesheet">는 body 안에 포함될 수 있습니다. 그러나 이는 좋은 방법은 아닙니다. <link> 요소는 body 콘텐츠에서 분리해, <head> 안에 포함하는 것이 더 좋습니다.
  • <link>를 사용하여 사이트의 파비콘을 설정하고, 사이트가 보안을 강화하기 위해 콘텐츠 보안 정책(CSP)을 사용하는 경우 해당 정책은 파비콘에도 적용됩니다. 파비콘이 로드되지 않는 문제가 발생한다면 Content-Security-Policy (en-US) 헤더의 img-src 지시어가 접근을 막고 있는지 확인하십시오.
  • HTML 및 XHTML 명세서에는 <link> 요소에 대한 이벤트 처리기가 정의되어 있으나, 어떻게 사용되는지는 불분명합니다.
  • XHTML 1.0 이하에서, <link> 와 같은 빈 요소는 반드시 <link /> 처럼 슬래시가 따라와야 합니다.
  • WebTV는 rel 특성에서 next 값을 지원합니다. 이는 문서 시리즈의 다음 페이지를 미리 불러오기 위해 사용됩니다.

특성

이 요소는 전역 특성을 포함합니다

  • as
    • : <link> 요소에 rel="preload" 또는 rel="modulepreload" (en-US) 특성을 지정했을 때만 사용합니다. as 특성은 <link> 요소가 불러오는 콘텐츠의 유형을 지정합니다. 요청 매칭, 올바른 콘텐츠 보안 정책의 적용, 올바른 Accept 요청 헤더 적용에 필요합니다. 이에 더해, rel="preload"는 as 특성을 사용해 요청 우선순위를 매깁니다. 다음 표는 특성의 유효한 값과, 해당 값이 적용되는 요소 또는 리소스를 나열합니다.
      값 적용되는 요소 또는 리소스
      audio <audio> 요소
      document <iframe> 과 <frame> 요소
      embed <embed> 요소
      fetch

      fetch, XHR

      참고: 이 값은 crossorigin 특성을 포함하기 위해 <link> 를 필요로 합니다. CORS가 활성화된 fetch를 확인하세요.
      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
  • blocking
    • : 이 특성은 외부 리소스를 가져올 때 특정 작업이 차단되어야 함을 명시적으로 나타냅니다. 차단할 작업은 아래에 나열된 차단 특성을 공백으로 구분한 리스트 형태여야 합니다.
      • render: 화면의 콘텐츠 렌더링이 차단됩니다.
  • crossorigin
    • : 리소스를 가져올 때 CORS를 사용해야 하는지 나타내는 열거형 특성입니다. CORS 활성화 이미지는 <canvas> 요소를 "오염"(taint)시키지 않고 재사용할 수 있습니다. 가능한 값은 다음과 같습니다.
    • anonymous
      • : 교차 출처 요청(Origin HTTP 헤더를 가진 요청)을 수행하지만 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 어떠한 것도 전송하지 않습니다. 서버에서 Access-Control-Allow-Origin HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.
    • use-credentials
      • : 교차 출처 요청(Origin HTTP 헤더를 가진 요청)을 수행하면서 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 한 가지 이상을 수행합니다. 서버에서 Access-Control-Allow-Origin HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.
    crossorigin 특성이 존재하지 않으면 리소스를 CORS 요청 없이 가져오므로 리소스의 오염 없이는 사용이 불가능합니다. 유효하지 않은 값은 anonymous를 지정한 것으로 간주합니다. CORS 설정 특성 문서에서 더 자세한 정보를 알아보세요.
  • disabled
    • : rel="stylesheet"에 한정하여, disabled 불리언 특성은 스타일시트를 불러와서 문서에 적용할지 나타냅니다. HTML을 불러오는 시점에 disabled를 지정한 경우 스타일시트는 페이지 로딩 시점에 불러오지 않습니다. 이후에 disabled 특성이 false로 바뀌거나 아예 제거될 때는 불러옵니다. DOM에서 disabled 속성을 지정하면 문서의 document.styleSheets 리스트에서 스타일시트를 제거합니다.
  • fetchpriority
    • : preload된 리소스를 가져올 때 사용할 상대적 우선순위의 힌트를 제공합니다. 허용되는 값은 다음과 같습니다.
      high

      같은 유형의 다른 리소스에 비해 우선순위가 높은 가져오기를 호출합니다.

      low

      같은 유형의 다른 리소스에 비해 우선순위가 낮은 가져오기를 호출합니다.

      auto

      기본값: 같은 유형의 다른 리소스와 비교하여 가져오기 우선순위를 자동으로 결정합니다.

  • href
    • : 연결할 리소스의 URL입니다. 절대와 상대 URL 모두 가능합니다.
  • hreflang
    • : 연결할 리소스가 사용하는 언어입니다. 오직 제안하는 용도로만 사용합니다. 가능한 값은 RFC 5646(BCP 47)에 따릅니다. href 특성이 존재할 때만 사용하세요.
  • imagesizes
    • : rel="preload" 와 as="image" 에 한하여, imagesizes 특성은 img 요소에 사용되는 적절한 리소스를 해당 srcset 과 sizes 특성으로 preload 하도록 하는 크기 특성입니다.
  • imagesrcset
    • : rel="preload" 와 as="image" 에 한하여, imagesrcset 특성은 img 요소에 사용되는 적절한 리소스를 해당 srcset 과 sizes 특성으로 preload 하도록 하는 소스 세트 특성입니다.
  • integrity
    • : 인라인 메타데이터를 포함합니다. 브라우저에게 가져오도록 지시하려는 리소스(파일)의 Base64로 인코딩된 암호학적 해시입니다. 이를 이용해 브라우저는 가져온 리소스가 예기치 못한 조작 없이 전달되었는지 확인할 수 있습니다. 하위 리소스 무결성을 참고하십시오.
  • media
    • : 연결된 리소스를 적용할 미디어를 명시합니다. 값으로는 반드시 미디어 유형이나 미디어 쿼리를 사용해야 합니다. media 특성은 사용자 에이전트가 현재 장치에 맞춰 최적의 스타일시트를 선택하도록 할 수 있으므로 주로 외부 스타일시트를 연결할 때 유용합니다.

      참고:

      • HTML 4에서는 이 특성의 값으로 사용할 수 있는 print, screen, aural, braille 등과 같은 값을 공백으로 구분한 미디어 설명 문자열 목록, 예를 들어, 미디어 유형 및 그룹(media types and groups)일 수 있습니다.HTML5에서는 이를 확장하여 HTML 4에서 허용되는 값 외에 어떤 유형의 미디어 쿼리든 사용할 수 있습니다.
      • CSS3 Media Queries를 지원하지 않는 브라우저는 이를 타당한 링크로 인식하지 않을 수 있으므로 HTML 4에 정의되어 있는 제한된 media query의 집합을 이용한 폴백(fallback) 링크를 설정하는 것을 잊지 말기 바랍니다.
  • referrerpolicy
    • : 리소스를 가져올 때 사용할 레퍼러를 나타내는 문자열입니다.
      • no-referrer 는 Referer 헤더가 전달되지 않을 것을 의미합니다.
      • no-referrer-when-downgrade 는 TLS (HTTPS) 없이 출처로 이동할 때 Referer 헤더가 전달되지 않을 것을 의미합니다. 이것은 따로 지정한 정책이 없는 경우의 사용자 에이전트 기본 동작입니다.
      • origin 은 레퍼러가 페이지의 출처(대략적으로 scheme, host, port)가 됨을 의미합니다.
      • origin-when-cross-origin 은 다른 출처로의 이동이 scheme, host, port로 제한되며, 같은 출처로의 이동에는 레퍼러의 경로가 포함됨을 의미합니다.
      • unsafe-url 은 레퍼러에 출처와 경로 (fragment, password, username은 제외)가 포함됨을 의미합니다. 이 경우 TLS로 보호된 리소스의 출처와 경로가 안전하지 않은 출처로 유출될 수 있으므로 안전하지 않습니다.
  • rel
    • : 연결할 리소스와 현재 문서의 관계. 링크 유형의 값을 공백으로 구분한 리스트를 지정해야 합니다.
  • sizes
    • : 리소스에 포함된 시각 매체의 아이콘 크기를 정의합니다. rel 이 icon 값을 가지고 있거나, Apple의 apple-touch-icon과 같은 비표준 유형인 경우에만 사용되어야 합니다. 이 특성은 다음과 같은 값을 가질 수 있습니다.
      • any는 image/svg+xml와 같은 벡터 유형 그대로 어떤 크기로든 조정 가능함을 의미합니다.
      • 각각 <width in pixels>x<height in pixels> 혹은 <width in pixels>X<height in pixels> 형식으로 작성한, 공백으로 구분된 크기 목록. 목록에 명시된 크기들은 반드시 리소스에 포함되어 있어야 합니다.

      참고: 대부분의 아이콘 형식은 한 개의 단일 아이콘만을 저장할 수 있습니다. 따라서 대부분의 경우, sizes 특성은 하나의 항목만 가지고 있습니다. MS의 ICO 형식도 그러하며, Apple의 ICNS도 마찬가지입니다. ICO는 더 보편화되어 있으므로, 브라우저 간 지원(특히 오래된 IE 버전)을 고려하는 경우 이 형식을 사용해야 합니다.

  • title
    • : title 특성은 <link> 요소에서 특수한 의미를 가집니다. <link rel="stylesheet">에 사용되었을 경우, title은 기본 혹은 대체 스타일시트를 정의합니다.
  • type
    • : 이 특성은 링크된 콘텐츠의 타입을 정의하는데 사용됩니다. 특성의 값은 text/html, text/css와 같은 MIME 타입이여야 합니다. 이 특성은 text/css와 같이 링크된 스타일시트의 타입을 지정하는데 쓰이는것이 보통입니다. 다만 웹에서 사용되는 스타일시트 언어는 CSS가 유일하기에 유형 속성을 생략할 수 있을 뿐 아니라, 권장되고 있습니다. type 특성은 브라우저가 지원하는 유형의 파일만 내려받게 하기 위해 rel="preload" 링크 유형에서도 사용됩니다.

비표준 특성

methods

이 특성의 값은 객체에서 수행될 수 있는 함수에 대한 정보를 제공합니다. 값은 일반적으로 HTTP 프로토콜이 사용될 때 주어지지만, title 특성과 비슷한 이유로 미리 link에 지침 정보를 포함시키는 것이 유용할 수도 있습니다. 예를 들어, 브라우저는 명시된 메서드의 함수에 따라 링크의 렌더링을 다르게 선택할 수 있습니다. 검색할 수 있는 링크에는 다른 아이콘을 사용한다거나, 외부 링크에는 현재 사이트를 떠난다는 것을 나타내는 아이콘을 사용할 수 있습니다. 이 특성은 제대로 이해되거나 지원되지 않았습니다. 심지어 정의한 브라우저인 Internet Explorer 4에서도 이 특성을 제대로 지원하지 못합니다.

target

정의된 링크 관계가 있거나 링크된 리소스의 렌더링을 표시할 프레임 또는 창 이름을 정의합니다.

폐기된 특성

charset

이 특성은 링크된 리소스의 문자 인코딩을 정의합니다. 이 값은 RFC 2045에 정의되어 있는 공백이나 쉼표로 구분된 문자 집합의 목록입니다. 기본값은 iso-8859-1 입니다.

참고: 이 폐기된 특성과 동일한 효과를 구현하려면, 링크된 리소스에서 Content-Type HTTP 헤더를 사용하십시오.

rev

이 특성의 값은 href 특성에 정의된 대로 현재 문서와 링크된 문서의 관계를 나타냅니다. 따라서 이 특성은 rel 특성의 값과 비교했을 때 반대되는 관계를 정의합니다. rev 특성의 연결 유형 값은 rel에서 사용 가능한 값들과 유사합니다.

참고: rev를 사용하는 대신, 반대되는 연결 유형 값을 가지는 rel 특성을 사용하십시오. 예를 들어, made의 역방향 링크를 설정하려면 author를 명시해야 합니다. 또한 이 특성은 "리비전(revision)"의 축약어가 아니며, 버전 번호와 함께 사용되어서는 안됩니다. 많은 사이트에서 이런 식으로 오용하고 있습니다.

예제

스타일 시트 포함하기

페이지에 스타일 시트를 포함하려면 다음 구문을 사용하세요.

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

대체 스타일시트 제공하기

대체 스타일시트를 제공할 수도 있습니다.

유저는 View>Page Style 메뉴에서 사용할 스타일시트를 고를수 있습니다. 이것은 유저가 페이지를 여러 버전으로 볼수 있는 방법을 제공합니다.

html
<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />

다양한 사용 환경에 맞는 아이콘 제공하기

같은 페이지에 여러 개의 서로 다른 아이콘 link들을 포함할 수 있으며, 브라우저는 rel과 sizes 특성을 통해 특정 환경에 가장 적합한 아이콘을 선택합니다.

html
<!-- third-generation iPad with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="favicon114.png" />
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- basic favicon -->
<link rel="icon" href="favicon32.png" />

미디어 쿼리를 이용하여 조건에 맞는 리소스 로드하기

미디어 유형이나 쿼리를 media 특성 안에 제공할 수 있습니다. 이 리소스는 미디어 조건이 참일 경우에만 로드됩니다.

html
<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 이벤트

당신은 load 이벤트를 통해 스타일시트가 언제 로드되는지 확인할수 있습니다. 비슷한 방법으로, 당신은 error 이벤트를 통해 스타일시트를 처리하는 도중 에러가 발생했는지 확인할 수 있습니다.

html
<script>
  function sheetLoaded() {
    // Do something interesting; the sheet has been loaded
  }

  function sheetError() {
    alert("An error occurred loading the stylesheet!");
  }
</script>

<link
  rel="stylesheet"
  href="mystylesheet.css"
  onload="sheetLoaded()"
  onerror="sheetError()" />

참고: load 이벤트는 스타일시트를 포함한 불러온 모든 콘텐츠가 로드되고 분석된 뒤, style이 콘텐츠에 적용 시작되기 직전에 발생합니다.

Preload 예제

rel="preload"를 이용해 콘텐츠 프리로딩하기에서 더 많은 <link rel="preload"> 예제들을 찾아볼 수 있습니다.

리소스를 가져올 때까지 렌더링 차단하기

blocking 특성 안에 render 토큰을 넣을 수 있습니다. 이렇게 하면 리소스를 가져올 때까지 페이지 렌더링이 차단됩니다.

html
<link blocking="render" href="critical-font.woff2" as="font" />

기술 요약

콘텐츠 카테고리 메타데이터 콘텐츠. itemprop이 존재하면 플로우 콘텐츠 및 구문 콘텐츠.
가능한 콘텐츠 없음. 빈 요소입니다.
태그 생략 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.
가능한 부모 요소 메타데이터 콘텐츠를 허용하는 모든 요소. itemprop이 존재하면 구문 콘텐츠를 허용하는 모든 요소.
포함되는 ARIA 역할 href 특성이 있는 link (en-US)
가능한 ARIA 역할 없음
DOM 인터페이스 HTMLLinkElement (en-US)

명세

Specification
HTML Standard
# the-link-element

브라우저 호환성

BCD tables only load in the browser

같이 보기