HTML <link> 태그: 스타일시트, 아이콘, 그리고 외부 자원 연결하기
서문
HTML의 <link> 태그는 웹 문서에서 외부 리소스를 연결하는 데 사용되는 중요한 요소입니다. 이 가이드에서는 <link> 태그의 다양한 용도와 실제 활용 방법을 살펴보겠습니다. 스타일시트를 불러오는 기본적인 사용법부터, 웹사이트의 아이콘 설정, 그리고 성능 최적화를 위한 프리로드와 프리페치 기법까지 폭넓게 다룹니다.
1. 기본 사용법
<link> 태그는 외부 리소스를 현재 문서와 연결하는 데 사용됩니다. 일반적으로 <head> 요소 내에 위치하며, 다음과 같은 속성을 가질 수 있습니다:
rel: 연결된 리소스와의 관계를 정의합니다.href: 연결할 외부 리소스의 URL을 지정합니다.type: 리소스의 MIME 타입을 지정합니다.
<link rel="stylesheet" href="styles.css" type="text/css">
2. 스타일시트 연결
웹 페이지에 스타일을 적용하려면 <link> 태그를 사용하여 외부 CSS 파일을 연결합니다. 이는 웹 디자인에서 가장 흔히 사용되는 방식입니다.
<link rel="stylesheet" href="styles.css">여러 개의 스타일시트를 연결할 수도 있으며, 브라우저는 <link> 태그를 통해 지정된 순서대로 스타일시트를 불러옵니다.
3. 파비콘 설정
파비콘은 브라우저 탭에 표시되는 작은 아이콘으로, <link> 태그를 사용하여 설정할 수 있습니다. 일반적으로 ICO 파일 형식을 사용하지만, PNG, SVG 등도 지원됩니다.
<link rel="icon" href="favicon.ico" type="image/x-icon">다양한 크기의 아이콘을 설정하여 고해상도 디스플레이에서도 선명하게 보이도록 할 수 있습니다.
<link rel="icon" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" href="favicon-48x48.png" sizes="48x48">
4. 프리로드와 프리페치
웹 성능 최적화를 위해 <link> 태그를 사용하여 리소스를 미리 불러올 수 있습니다. 프리로드는 현재 페이지에 즉시 필요한 리소스를 미리 불러오는 데 사용되고, 프리페치는 사용자가 방문할 가능성이 있는 페이지의 리소스를 미리 불러옵니다.
<link rel="preload" href="main.css" as="style">
<link rel="prefetch" href="next-page.html">
5. 대체 스타일시트
사용자가 선택할 수 있는 대체 스타일시트를 제공하려면 <link> 태그에 rel="alternate stylesheet" 속성을 사용합니다. 이는 다양한 테마나 스킨을 제공할 때 유용합니다.
<link rel="stylesheet" href="default.css">
<link rel="alternate stylesheet" href="dark-mode.css" title="Dark Mode">
6. 외부 자원 연결
<link> 태그는 웹 폰트, 오픈 그래프 태그, 그리고 RSS 피드 등 다양한 외부 자원을 연결하는 데 사용될 수 있습니다. 예를 들어, 웹 폰트를 불러오기 위해 다음과 같이 사용할 수 있습니다:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">또한, 사이트의 RSS 피드를 제공할 때도 <link> 태그를 사용합니다.
<link rel="alternate" type="application/rss+xml" href="feed.xml" title="RSS">'마크업 언어 > HTML' 카테고리의 다른 글
| HTML <style> 태그를 활용한 웹 페이지 꾸미기 (0) | 2024.07.02 |
|---|---|
| HTML 문서 기본 URL 설정 <base> 태그 이해하기 (0) | 2024.06.28 |
| 웹 페이지 최적화를 위한 HTML <meta> 태그 활용법 (0) | 2024.06.20 |
| HTML 문서 제목 설정하기 <title> 태그 사용법 (0) | 2024.06.17 |
| 웹 페이지의 본문 HTML <body> 태그 이해하기 (0) | 2024.06.10 |
