외부 문서를 연결할 때 사용합니다.
특히 HTML 외부에서 작성된 CSS 문서를 불러와 연결할 때 사용합니다.
현재 문서와 외부 문서와의 관계(relationship)를 지정합니다.
다음 표에 나열된 링크 타입 속성은 HTML에서 두 문서간의 관계를 명시할 때 사용합니다.
이 때 <a>, <area>, <link> 요소를 사용해 한 쪽에서 다른 쪽으로 향하는 연결고리를 만듭니다.
| Keyword | Description |
|---|---|
stylesheet |
*외부 리소스를 스타일 시트로 사용하도록 정의합니다. |
| type이 설정되어 있지 않은 경우 브라우저는 추가 검사가 있을 때까지 해당 스타일 시트가 text/css 스타일 시트임을 가정해야 합니다.* | |
canonical |
캐노니컬 링크 요소는 웹 마스터의 SEO 작업 중, 중복 콘텐츠 이슈를 해소하기 위해 웹 페이지의 “공식” 혹은 “선호” URL을 지정할 수 있는 HTML 입니다. |
author |
해당 문서의 저자에 대한 링크를 제공함. |
icon |
사용자 인터페이스에서 해당 문서를 나타낼 리소스(일반적으로 아이콘)를 불러옴. |
license |
해당 문서의 저작권 정보에 대한 링크를 제공함 |
prefetch |
사용자가 요청할 가능성이 있으므로, 브라우저가 대상 리소스를 미리 가져와 캐시(cache)하도록 명시함 |
preload |
브라우저가 as 속성과 해당 대상과 관련된 우선순위에 따라 현재 탐색에 사용할 대상 리소스를 미리 가져와 캐시하도록 명시함 |
search |
현재 문서 및 관련 페이지를 검색하는데 사용할 수 있는 리소스에 대한 링크를 제공함 |
<!-- stylesheet -->
<link rel="stylesheet" href="./style.css" />
<!-- icon -->
<!-- *파비콘 적용(URL 왼쪽에 붙는 대표 아이콘 적용) -->*
<link rel="icon" href="favicon.png">
*<!-- 바탕화면에 바로가기 아이콘 이미지 적용
(파일 경로에 .ico 파일이 존재하면 굳이 link 태그 작성 불필요) -->*
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- *아이폰에 파비콘 적용(안드로이드도 가능) -->*
<link rel="apple-touch-icon" href="favicon.png">
외부 문서의 위치를 지정 (경로)
*<audio>, <img>, <link>, <script>, <video>에 있는 crossOrigin 속성은 element가 CORS 요청을 처리하는 방식을 명시하여 element가 fetch한 데이터를 CORS 가능하게 합니다.*
→ 요청 시 Origin 헤더를 포함시켜 준다.