728x90
반응형
728x90
목 차
반응형
1. link 태그란?
- HTML의 <link> 태그는 외부 리소스를 현재 HTML 문서에 연결할 때 사용됩니다. 주로 스타일시트(CSS)를 연결하거나, 아이콘을 정의하거나, 피드를 연결하는 등의 용도로 사용됩니다. <link> 태그는 일반적으로 <head> 태그 내에 위치하며, 다른 리소스를 가져오기 위한 메타데이터 역할을 합니다.
2. 사용법
- styles.css라는 외부 스타일시트 파일을 HTML 문서에 연결하여, 해당 CSS 규칙이 웹 페이지에 적용됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
3. 속성
3-1. rel
- rel 속성은 HTML 문서와 연결된 외부 리소스 간의 관계를 정의합니다. 이 속성은 <link> 태그에서 필수적으로 사용되며, 다양한 값을 가질 수 있습니다.
- stylesheet: HTML 문서에 연결된 CSS 파일을 나타냅니다. 이 값이 가장 많이 사용됩니다.
- icon: 웹 브라우저 탭이나 즐겨찾기에서 사용될 아이콘을 지정합니다.
- manifest: 웹 애플리케이션의 메타 정보를 담은 웹 애플리케이션 매니페스트 파일을 연결합니다.
- alternate: 다른 언어 버전의 문서나 피드와 같은 대체 리소스를 지정합니다.
- preload: 특정 리소스를 미리 로드하여 페이지 성능을 향상시킬 수 있습니다. 주로 CSS, 폰트, 이미지 등을 사전에 로드할 때 사용됩니다.
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="manifest" href="/site.webmanifest">
<link rel="alternate" hreflang="fr" href="index-fr.html">
<link rel="preload" href="style.css" as="style">
3-2. href
- href 속성은 연결할 외부 파일의 경로를 지정합니다. 이 경로는 상대 경로나 절대 경로일 수 있으며, 리소스가 위치한 URL을 나타냅니다.
<link rel="stylesheet" href="styles.css">
3-3. type
- type 속성은 연결할 리소스의 MIME 타입을 지정합니다. 예를 들어, 스타일시트는 text/css 타입으로 지정될 수 있습니다. 하지만, 브라우저는 기본적으로 리소스 타입을 자동으로 감지하기 때문에 이 속성은 대부분 생략됩니다.
<link rel="stylesheet" href="styles.css" type="text/css">
3-4. media
- media 속성은 스타일시트가 적용될 미디어 타입이나 조건을 정의합니다. 이 속성은 반응형 디자인에서 유용하며, 특정 화면 크기나 장치에만 스타일시트를 적용할 수 있습니다.
- print: 인쇄 미디어에 적용할 스타일시트를 정의할 때 사용됩니다.
- screen: 화면에 적용될 스타일시트를 정의할 때 사용됩니다.
- all: 모든 미디어에 적용됩니다. 이 값은 기본값이며 생략 가능
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="screen.css" media="screen and (min-width: 600px)">
3-5. crossorigin
- crossorigin 속성은 다른 도메인에서 리소스를 가져올 때의 CORS(Cross-Origin Resource Sharing) 정책을 정의합니다. 이 속성은 외부 리소스의 접근 권한을 제어할 때 사용됩니다.
<link rel="stylesheet" href="https://example.com/styles.css" crossorigin="anonymous">
3-6. as
- as 속성은 rel="preload" 또는 rel="prefetch"와 함께 사용될 때 로드하는 리소스의 타입을 지정합니다. 예를 들어, 미리 로드하는 리소스가 스타일시트, 스크립트, 이미지, 폰트 등의 종류일 때 이를 명시해줍니다.
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="app.js" as="script">
4. link 태그의 활용
4-1. 파비콘 (favicon)
- 브라우저의 탭에 나타나는 작은 아이콘을 설정할 때, <link> 태그를 사용합니다.
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16">
4-2. 폰트 로딩
- 웹 폰트를 미리 로드하거나 연결할 때도 <link> 태그를 사용할 수 있습니다. 구글 폰트를 연결하는 예시는 다음과 같습니다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
4-3. 피드 (feed)
- RSS 또는 Atom 피드를 연결할 때도 <link> 태그를 사용합니다. 이를 통해 사용자가 사이트의 피드를 구독할 수 있습니다.
<link rel="alternate" type="application/rss+xml" href="/feed.rss" title="RSS">
4-4. 프리패치 (prefetch)
- 미래에 필요할 리소스를 미리 불러와 성능을 최적화할 때 사용합니다. 이 속성은 사용자가 곧 요청할 가능성이 있는 리소스를 미리 로드할 수 있게 해줍니다.
<link rel="prefetch" href="next-page.html">
5. 주의 사항
- <link> 태그는 닫는 태그가 필요하지 않은 빈 태그(self-closing tag)입니다.
- <script> 태그와 달리, <link> 태그는 자바스크립트 코드를 포함하지 않으며, 스타일시트와 같은 정적인 리소스 연결에 주로 사용됩니다.
- <link> 태그는 페이지 성능 최적화에 중요한 역할을 하므로, CSS 파일을 로드할 때 preload 또는 prefetch 같은 기법을 사용하는 것이 좋습니다.
728x90
반응형
'프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] ul 태그 (0) | 2024.10.19 |
|---|---|
| [HTML] meta 태그 (0) | 2024.10.15 |
| [HTML] script 태그 (0) | 2024.10.12 |
| [HTML] p 태그 - 줄바꿈 (0) | 2024.10.09 |
| [HTML] a태그 noopener와 noreferrer 정리 (0) | 2024.10.04 |