HTML <link> rel 속성

HTML <link> 태그

정의와 사용법

필수 rel 속성이 현재 문서와 링크된 문서/자원 간의 관계를 지정합니다.

예제

예제 1

외부 스타일 시트를 가져옵니다：

<link rel="stylesheet" href="styles.css">

직접 시도해 보세요

예제 2

웹사이트에 아이콘을 추가하는 방법은 다음과 같습니다：

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

문법

<link rel="value">

속성 값

값 설명
alternate

문서 대체 표현(예: 인쇄 페이지, 번역 또는 미러)로 가는 링크를 제공합니다.

예：<link rel="alternate" type="application/atom+xml" href="/blog/news/atom">
author 문서 작성자 링크를 제공합니다.
dns-prefetch 브라우저가 목표 자원이 있는 소스의 DNS 해석을 미리 수행해야 한다고 정의합니다.
help

도움말 문서로 가는 링크를 제공합니다.

예：<link rel="help" href="/help/">
icon

문서를 나타내는 아이콘을 가져옵니다.

예：<link rel="icon" href="favicon.ico" type="image/x-icon">
license 문서 저작권 정보 링크를 제공합니다.
next 시리즈 중 다음 문서로 가는 링크를 제공합니다.
pingback 현재 문서에 대한 pingback 서버 주소를 제공합니다.
preconnect 브라우저가 목표 자원이 있는 소스에 미리 연결해야 합니다.
prefetch 브라우저가 나중에 사용될 수 있는 가능성이 있는 목표 자원을 미리 가져오고 캐시에 저장해야 합니다.
preload 브라우저 프록시가 'as' 속성으로给出的 목적지(그리고 해당 목적지와 관련된 우선순위)에 따라 미리 가져오고 캐시에 저장해야 합니다.
prerender

브라우저가 지정된 웹 페이지를 백그라운드에서 예리nder(로드)해야 합니다.

사용자가 이 페이지로 이동하면 페이지 로드 속도가 빨라집니다.(이 페이지가 이미 로드되었기 때문입니다).

경고! 이는 사용자의 밴드위드를 낭비합니다! 이 웹 페이지가 사용자의 브라우징 과정 중 특정 시점에서 절대 필요하다고 확신할 때만 예리nder를 사용하십시오.
prev 이 파일이 시리즈의 일부이며, 시리즈에서 이전 파일은 참조된 파일임을 나타냅니다.
search 현재 문서 및 관련 페이지에서 검색할 수 있는 자원에 대한 링크를 제공합니다.
stylesheet 스타일 시트를 가져옵니다.

브라우저 지원

크롬 에지 파이어폭스 사파리 오퍼라
크롬 에지 파이어폭스 사파리 오퍼라
지원 지원 지원 지원 지원

HTML <link> 태그