HTML link 태그 완벽 가이드: CSS 연결부터 파비콘, SEO까지

hanlee📅2026년 2월 12일

HTML link 태그의 모든 것을 알아봅니다. stylesheet로 CSS 연결, 파비콘 설정, canonical SEO, 다크모드 대응, PWA manifest까지 실무에서 필요한 link 태그 사용법을 상세히 설명합니다.

HTML `<link>` 태그 완벽 가이드

외부 리소스를 HTML 문서에 연결하는 <link> 태그는 CSS 스타일시트, 파비콘, 폰트, SEO 등 다양한 용도로 사용됩니다. 이 가이드에서는 성능 최적화(preload, prefetch 등)를 제외한 기본 사용법을 다룹니다.

가이드	설명
link 태그 성능 최적화 가이드: preload, prefetch, preconnect	리소스 힌트를 활용한 웹 성능 최적화
HTML meta 태그 완벽 가이드	meta 태그로 SEO, 소셜 미디어 최적화

기본 문법과 주요 속성

html
<link rel="관계" href="URL" [속성]>

<link> 태그는 void element로 종료 태그가 없습니다.

주요 속성

속성	설명	예시
`rel`	현재 문서와 연결된 리소스의 관계	`rel="stylesheet"`
`href`	연결할 리소스의 URL	`href="/css/style.css"`
`type`	리소스의 MIME 타입	`type="text/css"`
`media`	미디어 쿼리 조건	`media="screen and (min-width: 768px)"`
`as`	프리로드할 리소스의 타입	`as="font"`
`crossorigin`	CORS 설정	`crossorigin="anonymous"`
`sizes`	아이콘 크기 (icon용)	`sizes="192x192"`
`hreflang`	리소스의 언어	`hreflang="ko"`
`disabled`	스타일시트 비활성화	`disabled`
`fetchpriority`	가져오기 우선순위	`fetchpriority="high"`

rel 속성 값 총정리

rel 값	용도	설명
`stylesheet`	CSS 연결	외부 스타일시트 로드
`icon`	파비콘	사이트 아이콘
`apple-touch-icon`	iOS 아이콘	Apple 기기 홈 화면 아이콘
`canonical`	SEO	대표 URL 지정
`preload`	성능	필수 리소스 우선 로드
`prefetch`	성능	미래 탐색용 리소스 미리 로드
`preconnect`	성능	외부 서버 사전 연결
`dns-prefetch`	성능	DNS 조회 미리 수행
`modulepreload`	성능	ES 모듈 미리 로드
`manifest`	PWA	웹 앱 매니페스트
`alternate`	대체 버전	RSS, 언어 대체 등
`prev` / `next`	페이지네이션	이전/다음 페이지
`author`	작성자	작성자 정보 링크
`license`	라이선스	저작권 정보 링크

성능 관련 속성(preload, prefetch, preconnect, dns-prefetch)은 리소스 힌트 성능 최적화 가이드에서 자세히 다룹니다.

stylesheet - CSS 연결

외부 CSS 파일을 문서에 연결합니다.

html
<!-- 기본 사용 -->
<link rel="stylesheet" href="/css/style.css">
<!-- MIME 타입 명시 (HTML5에서 생략 가능) -->
<link rel="stylesheet" href="/css/style.css" type="text/css">

미디어 쿼리와 함께 사용

반응형 디자인을 위해 조건부로 CSS를 로드할 수 있습니다.

html
<!-- 기본 스타일 -->
<link rel="stylesheet" href="css/base.css">
<!-- 화면 너비별 스타일 -->
<link rel="stylesheet" href="css/mobile.css" media="(max-width: 600px)">
<link rel="stylesheet" href="css/tablet.css" media="(min-width: 601px) and (max-width: 1024px)">
<link rel="stylesheet" href="css/desktop.css" media="(min-width: 1025px)">
<!-- 인쇄용 스타일 -->
<link rel="stylesheet" href="css/print.css" media="print">

참고: 미디어 쿼리가 false여도 CSS 파일은 다운로드됩니다. 단, 렌더링을 차단하지 않으므로 성능에 유리합니다.

기기별 스타일시트

html
<!-- 스마트폰 -->
<link rel="stylesheet" href="smartphone.css"
      media="only screen and (min-device-width: 320px) and (max-device-width: 480px)">
<!-- iPad -->
<link rel="stylesheet" href="ipad.css"
      media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">
<!-- iPad 가로 모드 -->
<link rel="stylesheet" href="ipad-landscape.css"
      media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)">
<!-- 고해상도 디스플레이 (Retina) -->
<link rel="stylesheet" href="retina.css"
      media="only screen and (-webkit-min-device-pixel-ratio: 1.5)">

다크모드 스타일

html
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">

비활성화 가능한 스타일시트 (테마 전환)

html
<link rel="stylesheet" href="theme-blue.css" id="theme-blue">
<link rel="stylesheet" href="theme-green.css" id="theme-green" disabled>
function switchTheme(themeId) {
    document.querySelectorAll('link[rel="stylesheet"]').forEach(link => {
        if (link.id.startsWith('theme-')) {
            link.disabled = link.id !== themeId;

미디어 쿼리 속성 정리

속성	설명	예시
`width`	뷰포트 너비	`(min-width: 768px)`
`height`	뷰포트 높이	`(min-height: 600px)`
`device-width`	기기 화면 너비	`(max-device-width: 480px)`
`orientation`	화면 방향	`(orientation: landscape)`
`aspect-ratio`	화면 비율	`(aspect-ratio: 16/9)`
`resolution`	해상도	`(min-resolution: 2dppx)`
`prefers-color-scheme`	색상 모드	`(prefers-color-scheme: dark)`
`prefers-reduced-motion`	모션 감소	`(prefers-reduced-motion: reduce)`

icon - 파비콘

브라우저 탭, 북마크, 홈 화면에 표시되는 아이콘입니다.

기본 파비콘

html
<!-- ICO 파비콘 (레거시 브라우저) -->
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico" sizes="32x32 16x16">
<!-- PNG 파비콘 (크기별) -->
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<!-- SVG 파비콘 (모던 브라우저, 다크모드 지원) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

파비콘 크기 가이드

크기	용도
16x16	브라우저 탭
32x32	작업 표시줄, 북마크
48x48	Windows 바탕화면
64x64+	고해상도 디스플레이
192x192	안드로이드 Chrome
512x512	PWA 스플래시 화면

Apple 기기용 아이콘

html
<!-- 기본 Apple Touch 아이콘 (180x180 권장) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- 크기별 아이콘 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<!-- 광택 효과 없음 (precomposed) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/icon-ipad.png">

크기	용도
180x180	iPhone 6 Plus 이상 (@3x)
152x152	iPad Retina (@2x)
120x120	iPhone Retina (@2x)
76x76	iPad non-Retina

iOS 스플래시 스크린

html
<!-- iPhone -->
<link rel="apple-touch-startup-image"
      media="(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)"
      href="startup-iphone.png">
<!-- iPhone Retina -->
<link rel="apple-touch-startup-image"
      media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"
      href="startup-iphone4.png">
<!-- iPad 세로 -->
<link rel="apple-touch-startup-image"
      media="(min-device-width: 768px) and (orientation: portrait)"
      href="startup-iPad-portrait.png">
<!-- iPad 가로 -->
<link rel="apple-touch-startup-image"
      media="(min-device-width: 768px) and (orientation: landscape)"
      href="startup-iPad-landscape.png">

다크모드 대응 SVG 파비콘

SVG 파비콘 내에서 CSS 미디어 쿼리를 사용해 다크모드에 대응할 수 있습니다.

html
<!-- favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    .bg { fill: #667eea; }
    .fg { fill: white; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #e2e8f0; }
      .fg { fill: #1a202c; }
  </style>
  <rect class="bg" width="32" height="32" rx="4"/>
  <text class="fg" x="16" y="22" text-anchor="middle" font-size="16">A</text>

파비콘 완전 세트

html
<!-- ICO 파비콘 (레거시 브라우저) -->
<link rel="icon" href="/favicon.ico" sizes="32x32 16x16">
<!-- 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">
<!-- SVG 파비콘 (다크모드 지원 가능) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Apple Touch 아이콘 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- 안드로이드 Chrome -->
<link rel="icon" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" sizes="512x512" href="/android-chrome-512x512.png">
<!-- Safari 핀 탭 아이콘 -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#667eea">
<!-- Windows 타일 색상 -->
<meta name="msapplication-TileColor" content="#667eea">

주의: 파비콘은 브라우저에 캐시되므로, 변경 시 파일명을 바꾸거나 쿼리 스트링(?v=2)을 추가하세요.

canonical - SEO 중복 방지

동일한 콘텐츠가 여러 URL에 존재할 때 대표 URL을 지정합니다.

html
<link rel="canonical" href="https://example.com/page">

사용 상황

상황	예시
HTTP/HTTPS 중복	`http://` → `https://`
www/non-www 중복	`www.example.com` → `example.com`
URL 파라미터	`?ref=facebook` → 기본 URL
페이지네이션	페이지 1을 대표로
모바일/데스크톱 분리	`m.` → 데스크톱 URL
대소문자 차이	`/Page` → `/page`

예시

html
<!-- HTTPS로 정규화 -->
<link rel="canonical" href="https://www.example.com/blog/seo-guide">
<!-- 파라미터 제거 -->
<!-- 현재 URL: https://example.com/product?color=red&size=m -->
<link rel="canonical" href="https://example.com/product">
<!-- 페이지네이션 -->
<!-- 페이지 2, 3, 4... 모두 페이지 1을 대표로 -->
<link rel="canonical" href="https://example.com/blog">

SEO 영향

중복 콘텐츠 패널티 방지: 검색엔진이 동일 콘텐츠를 여러 번 색인하지 않음
링크 가치 통합: 여러 URL로 분산된 링크 권위를 하나로 통합
크롤링 효율: 크롤러가 불필요한 URL을 방문하지 않음

modulepreload - ES 모듈

ES 모듈과 그 의존성을 미리 로드합니다.

html
<link rel="modulepreload" href="/js/app.mjs">
<link rel="modulepreload" href="/js/utils.mjs">

script preload와의 차이

html
<!-- 일반 스크립트 프리로드: 다운로드만 -->
<link rel="preload" href="script.js" as="script">
<!-- ES 모듈 프리로드: 다운로드 + 의존성 파싱 -->
<link rel="modulepreload" href="module.mjs">

modulepreload는 단순 다운로드뿐 아니라 모듈 그래프의 의존성까지 함께 파싱하므로, ES 모듈 기반 프로젝트에서 더 효율적입니다.

manifest - PWA

PWA(Progressive Web App) 매니페스트 파일을 연결합니다.

html
<link rel="manifest" href="/manifest.json">

manifest.json 예시

json
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"

alternate - 대체 버전

RSS/Atom 피드

html
<link rel="alternate" type="application/rss+xml"
      title="RSS Feed" href="/feed.xml">
<link rel="alternate" type="application/atom+xml"
      title="Atom Feed" href="/atom.xml">

다국어 페이지

html
<link rel="alternate" hreflang="ko" href="https://example.com/ko/page">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page">

모바일 버전

html
<link rel="alternate" media="only screen and (max-width: 640px)"
      href="https://m.example.com/page">

실무 템플릿

일반 웹사이트

html
<!DOCTYPE html>
<html lang="ko">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
    <!-- 파비콘 -->
    <link rel="icon" href="/favicon.ico" sizes="32x32">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <!-- SEO -->
    <link rel="canonical" href="https://example.com/page">
    <!-- 성능 최적화 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
    <!-- 스타일시트 -->
    <link rel="stylesheet" href="/css/main.css">

PWA

html
    <!-- ... 기본 태그 ... -->
    <!-- PWA -->
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#007bff">
    <!-- iOS PWA -->
    <link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- 스플래시 스크린 -->
    <link rel="apple-touch-startup-image" href="/splash.png">

HTML link 태그 완벽 가이드: CSS 연결부터 파비콘, SEO까지

HTML `<link>` 태그 완벽 가이드

관련 상세 가이드

목차

기본 문법과 주요 속성

주요 속성

rel 속성 값 총정리

stylesheet - CSS 연결

미디어 쿼리와 함께 사용

기기별 스타일시트

다크모드 스타일

비활성화 가능한 스타일시트 (테마 전환)

미디어 쿼리 속성 정리

icon - 파비콘

기본 파비콘

파비콘 크기 가이드

Apple 기기용 아이콘

iOS 스플래시 스크린

다크모드 대응 SVG 파비콘

파비콘 완전 세트

canonical - SEO 중복 방지

사용 상황

예시

SEO 영향

modulepreload - ES 모듈

script preload와의 차이

manifest - PWA

manifest.json 예시

alternate - 대체 버전

RSS/Atom 피드

다국어 페이지

모바일 버전

실무 템플릿

일반 웹사이트

PWA

참고 자료

HTML <link> 태그 완벽 가이드

관련 상세 가이드

목차

기본 문법과 주요 속성

주요 속성

rel 속성 값 총정리

stylesheet - CSS 연결

미디어 쿼리와 함께 사용

기기별 스타일시트

다크모드 스타일

비활성화 가능한 스타일시트 (테마 전환)

미디어 쿼리 속성 정리

icon - 파비콘

기본 파비콘

파비콘 크기 가이드

Apple 기기용 아이콘

iOS 스플래시 스크린

다크모드 대응 SVG 파비콘

파비콘 완전 세트

canonical - SEO 중복 방지

사용 상황

예시

SEO 영향

modulepreload - ES 모듈

script preload와의 차이

manifest - PWA

manifest.json 예시

alternate - 대체 버전

RSS/Atom 피드

다국어 페이지

모바일 버전

실무 템플릿

일반 웹사이트

PWA

참고 자료

HTML `<link>` 태그 완벽 가이드