💡 퀵 접속: htm.kr/link
<link> 태그는 현재 문서와 외부 리소스 간의 관계를 정의합니다. 주로 CSS 파일 연결, 파비콘(favicon) 설정, RSS 피드 연결 등에 사용됩니다. <head> 섹션 내에서 사용되어야 합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| rel | stylesheet icon alternate preload preconnect |
현재 문서와 연결된 문서의 관계를 지정합니다. |
| href | URL | 연결된 문서의 URL을 지정합니다. |
| type | text/css image/x-icon application/rss+xml |
연결된 문서의 MIME 타입을 지정합니다. |
| media | screen all |
리소스가 적용될 미디어를 지정합니다. |
<!DOCTYPE html>
<html>
<head>
<!-- CSS 파일 연결 -->
<link rel="stylesheet" href="styles.css">
<!-- 파비콘 설정 -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- RSS 피드 연결 -->
<link rel="alternate" type="application/rss+xml" href="feed.xml">
</head>
<body>
<h1>페이지 내용</h1>
</body>
</html><!-- 1. 다중 CSS 파일 관리 -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 768px)">
<!-- 2. 다양한 파비콘 설정 -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<!-- 3. 성능 최적화 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="css/critical.css" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap">
<!-- 4. 다국어 지원 -->
<link rel="alternate" hreflang="ko" href="https://myblog.com/ko/">
<link rel="alternate" hreflang="en" href="https://myblog.com/en/">
<link rel="alternate" hreflang="x-default" href="https://myblog.com/">link 태그는 시각적으로 보이지 않지만, 다음과 같은 효과를 가집니다:
1. 스타일 적용:
2. 파비콘:
모든 주요 브라우저에서 지원됩니다.