( 전체 특성 보기 좋게 정리하는 중 )
설명 : 외부 리소스 연결요소
특성(속성) 목록
href 특성은 연결할 리소스의 URL. 절대경로와 상대경로 URL 모두 가능
rel 특성은 관계(relationship)를 뜻하며, 현재 문서와 연결한 아이템의 관계를 설명한다. <link> 요소의 제일 중요한 특성 중 하나이다. 공백으로 구분한 리스트를 지정 ex) rel=" alternate stylesheet"
rel="stylesheet" : 외부 리소스가 스타일시트로 사용됨. type 특성을 지정하지 않으면 text/css 로 인식한다. alternate 키워드와 조합해서 사용하면 대체가능 스타일시트라고 정한다.(반드시 빈값이 아닌 title 특성과 함께 사용)
rel="preload" : 브라우저가 이 리소스를 미리 불러와야 한다는 것을 나타냄
rel="help" : 페이지 전체에 대한 추가 도움말을 제공하는 리소스를 가리킴을 나타낸다.
rel="author" : '저자에 대한 정보 및 저자와 연락 가능한 연락처 정보가 담긴 페이지로 향하는 하이퍼링크'라고 정의하는 값
rel="prev" : 하이퍼링크가 이전 문서를 가르킨다.
rel="next" : 하이퍼링크가 다음 문서를 가르킨다.
rel="search" : 하이퍼링크가 현재 문서 또는 사이트를 검색하기 위해 특별히 제작된 문서를 참조한다는 것을 가르킨다.
title 특성은 <link rel="stylesheet">에 사용되었을 경우 기본 혹은 대체 스타일시트를 정의
as 특성은 rel="preload" 또는 rel="moduleload" 일 때만 사용한다. 가져오는 리소스가 어떤 리소스인지 나타낸다.
as="audio" : <audio>
as="document" : <iframe>, <frame>
as="embed" : <embed>
as="fetch" : fetch, XHR
as="font" : CSS @font-face
as="image" : srcset 또는 imageset 특성을 가지고 있는 <img>, <picture>, SVG <image>, CSS *-image 규칙
as="object" : <object>
as="script" : <script>, Worker importScripts
as="style" : <link rel="stylesheet">, CSS @import
as="track" : <track>
as="video" : <video>
as="worker" : Worker, SharedWorker
crossorigin 특성은 리소스를 CORS 요청으로 불러와야 하는지에 대한 열거형 값, 특성이 존재하지 않으면 리소스를 CORS 요청 없이 가져오므로 리소스의 오염 없이는 사용이 불가능하다. 유효하지 않은 값은 anonymous를 지정한 것으로 간주한다. CORS 설정 특성 문서에서 더 자세한 정보를 확인가능.
crossorigin="anonymous" : 교차 출처 요청(Origin HTTP 헤더를 가진 요청)을 수행하지만 인증 정보(쿠키, X.509 인증서, HTTP Basic) 중 어떠한 것도 전송하지 않는다. 서버에서 Access-Control-Allow-Origin HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한된다.
crossorigin="use-credentials" : 교차 출처 요청(Origin HTTP 헤더를 가진 요청)을 수행하면서 인증 정보(쿠키, X.509 인증서, HTTP Basic) 중 한 가지 이상을 수행한다. 서버에서 Access-Control-Allow-Origin HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한된다.
sizes 특성은 아이콘 크기
type 특성은 text/css(생략시 기본값), text/html같은 MIME 타입으로 링크된 콘텐츠의 타입을 정의하는데 사용된다. 브라우저는 이런 여러가지 정보를 통해 가장 적합한 아이콘을 선택한다. rel="preload" 링크 유형에서 사용하면 브라우저가 지원하는 유형의 파일만 내려받게 할 수 있다.
media 특성을 사용해 미디어 유형이나 쿼리를 지정하면 해당 미디어 조건을 만족할 때만 리소스를 불러온다.
imagesizes 특성과 imagesrcset 특성은 rel="preload" 와 as="image" 에 한하여, img 요소에 사용되는 적절한 리소스를 해당 srcset 과 sizes 특성으로 preload 하도록 한다.
integrity 특성은 인라인 메타데이터를 포함한다. 브라우저에게 가져오도록 지시하려는 리소스(파일)의 Base64로 인코딩된 암호학적 해시입니다. 이를 이용해 브라우저는 가져온 리소스가 예기치 못한 조작 없이 전달되었는지 확인할 수 있다. 하위 리소스 무결성 참고
referrerpolicy 특성은 리소스를 가져올 때 사용할 레퍼러를 나타내는 문자열
referrerpolicy="no-referrer" : Referer 헤더가 전달되지 않음을 의미
referrerpolicy="no-referrer-when-downgrade" : TLS (HTTPS) 없이 출처로 이동할 때 Referer 헤더가 전달되지 않음을 의미. 따로 지정한 정책이 없는 경우의 사용자 에이전트 기본 동작입니다.
referrerpolicy="origin" : 레퍼러가 페이지의 출처(대략적으로 scheme, host, port)가 됨을 의미
referrerpolicy="origin-when-cross-origin" : 다른 출처로의 이동이 scheme, host, port로 제한되며, 같은 출처로의 이동에는 레퍼러의 경로가 포함됨을 의미
referrerpolicy="unsafe-url" : 레퍼러에 출처와 경로 (fragment, password, username은 제외)가 포함됨을 의미. 이 경우 TLS로 보호된 리소스의 출처와 경로가 안전하지 않은 출처로 유출될 수 있어 안전하지 않다.
예시)
스타일 시트 포함하기
<link href="style.css" rel="stylesheet" />
사이트의 파비콘을 연결
<link rel="icon" href="favicon.ico" />
대체 스타일시트 제공하기
<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" />
다양한 사용 환경에 맞는 아이콘 제공하기
<!-- 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" />
미디어 쿼리를 이용하여 조건에 맞는 리소스 로드하기
<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)" />