Reference/HTML

<link> 태그는 문서의 외부 리소스를 설정합니다.

by @webs 2022. 7. 4.

<link>

특징	설명
요소	인라인 요소(Inline Element)
닫는 태그	없음
버전	HTML4
시각적 표현	없음
사용성	★★★★★

정의(Definition)

<link> 태그는 문서의 외부 리소스를 설정합니다.
<link> 태그는 일반적을 스타일시트 파일을 주로 연결하지만 파비콘이나 웹폰트를 연결 할 때도 사용합니다.
CSS 연동은 <link> 요소를 사용하고, SCRIPT 연동은 <script> 요소를 사용합니다.

문서와 관련된 태그(Document Related Tag)

<html> 태그는 문서의 최상단 요소를 나타냅니다.
<head> 태그는 문서 정보에 해당하는 내용을 설정합니다.
<body> 태그는 문서 본문에 해당하는 내용을 설정합니다.
<base> 태그는 문서의 기본 URL을 설정합니다.
<link> 태그는 문서의 외부 리소스를 설정합니다.
<meta> 태그는 문서의 메타 정보를 설정합니다.
<style> 태그는 문서의 스타일 정보 설정합니다.
<title> 태그는 문서의 제목을 설정합니다.

섹션과 관련된 태그(Section Related Tag)

<main> 태그는 문서의 주요 콘텐츠 섹션을 설정합니다.
<section> 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다.
<article> 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다.
<aside> 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다.
<header> 태그는 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다.
<nav> 태그는 문서에 대한 메뉴 링크를 제공하는 섹션을 설정합니다.
<footer> 태그는 문서 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다.
<address> 태그는 문서 관련 연락처 콘텐츠 섹션을 설정합니다.
<h1>~<h6> 태그는 각 섹션의 제목을 설정합니다.

속성(Property)

	속성	값(예)	설명	버전
글로벌 속성	accesskey	accesskey = "a"	키보드 단축키 힌트를 제공합니다.	-
	autocapitalize	autocapitalize = "off"	텍스트를 자동으로 대문자로 변환할지 여부를 설정합니다.	-
	autofocus	autofocus	문서가 로딩되면 해당 요소에 포커서를 설정합니다.	-
	contenteditable	contenteditable = "true"	사용자가 콘텐츠를 편집할 수 있는지 설정합니다.	-
	class	class = "className"	클래스 이름을 설정합니다.	-
	data-*	data-name = "name"	사용자가 지정하여 속성을 설정할 수 있습니다.	-
	dir	dir = "rtl"	요소 글씨의 방향을 설정합니다.	-
	draggable	draggable = "true"	드래그 사용할 수 있는지 설정합니다.	-
	enterkeyhint	enterkeyhint = "next"	엔터 키에 대한 힌트를 설정합니다.	-
	hidden	hidden	요소를 숨김 처리할 수 있습니다. hidden 요소는 렌더링하지 않습니다.	-
	id	id = "name"	고유 식별자 아이디를 설정합니다. CSS나 Script에서 사용합니다.	-
	inputmode	inputmode = "email"	브라우저가 제공해야 하는 가상 키보드 설정을 알려줍니다	-
	itemid	itemid = "name"	아이템 요소의 고유 식별자 아이디를 설정합니다.	-
	itemprop	itemprop = "name"	아이템 요소의 고유 식별자 속성을 설정합니다.	-
	itemref	itemref = "name"	아이템 요소의 고유 식별자를 연결합니다.	-
	itemscope	itemscope	아이템 요소의 범위를 설정합니다.	-
	lang	lang = "ko"	요소의 언어를 설정합니다.	-
	spellcheck	spellcheck = "true"	요소의 맞춤법 검사 여부를 설정합니다.	-
	style	style = "margin: 0"	요소의 적용할 CSS 속성을 설정합니다.	-
	tabindex	tabindex = "0"	요소의 탭 인덱스를 설정합니다.	-
	title	title = "titleName"	요소의 타이틀을 설정합니다.	-
	translate	translate = "no"	요소의 번역 여부를 설정합니다.	-
개별 속성	href	href = "url"	하이퍼링크 주소를 설정합니다.	-
	crossorigin	crossorigin = "anonymous"	CORS 요청을 처리하는 방식을 설정합니다.	-
	rel	rel="alternate" rel="author" rel="bookmark" rel="help" rel="icon" rel="license" rel="next" rel="nofollow" rel="noreferrer" rel="prefetch" rel="prev" rel="search" rel="stylesheet" rel="tag"	문서에 대한 대체 링크를 설정합니다. 문서에 대한 저자 정보 링크를 설정합니다. 문서에 대한 북마크 링크를 설정합니다. 문서에 대한 도움말 정보 링크를 설정합니다. 문서에 대한 아이콘 정보 링크를 설정합니다. 문서에 대한 저작권과 관련된 정보 링크를 설정합니다. 문서에 대한 다음 문서 정보 링크를 제공합니다. 문서에 대한 정보가 작성자에 의해 보증되지 않을 때 설정합니다. 문서에 대한 리퍼럴 보내는 것을 방지할 때 설정합니다. 문서에 대한 링크된 리소스로 미리 가져오는 정보를 설정합니다. 문서에 대한 이전 문서 링크를 설정합니다. 문서에 대한 검색 문서 정보 링크를 설정합니다. 문서에 대한 스타일시트 링크를 설정합니다. 문서에 대한 태그를 설명하는 참조 링크를 설정합니다.	-
	media	media = "print"	미디어 종류를 설정합니다.	-
	integrity	integrity = "sha384...."	암호화된 메타데이터를 설정합니다.	-
	hreflang	hreflang = "ko"	연결할 리소스의 언어를 설정합니다.	-
	type	type = "text/html"	콘텐츠 유형을 설정합니다.	-
	referrerpolicy	referrerpolicy = "origin"	요청에 필요한 레퍼러 정보를 설정합니다.	-
	sizes	sizes = "128x128"	리스소에 연결된 아이콘의 크기를 설정합니다.	-
	imagesrcset	imagesrcset = "image-400.jpg 400w"	해상도별 이미지를 설정합니다.	-
	imagesizes	imagesizes = "100vw"	해상도별 이미지 사이즈를 설정합니다.	-
	as	as = "fetch"	불러오는 콘텐츠의 유형을 설정합니다.	-
	blocking	blocking	렌더링 차단 여부를 설정합니다.	-
	disabled	disabled	요소를 적용할지 여부를 설정합니다.	-

예제1(Sample)

기본 문서 샘플 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>link 사용방법</title>
    
    <!-- CSS 연동 설정 -->
    <link rel="stylesheet" href="style.css"> 

    <!-- 스타일시트 의미를 수정 -->
    <link rel="alternate stylesheet" href="style.css" title="kor fonts"> 

    <!-- 영어를 대처할 경우 사용 -->
    <link rel="alternate" href="/en/html" hreflang="en" type="text/html" title="English HTML"> 

    <!-- 아이콘을 사용할 경우 설정 -->
    <link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
    <link rel="icon" href="windows.ico" sizes="32x32 48x48" type="image/vnd.microsoft.icon">
    <link rel="icon" href="mac.icns" sizes="128x128 512x512 8192x8192 32768x32768">
    <link rel="icon" href="iphone.png" sizes="57x57" type="image/png">
    <link rel="icon" href="gnome.svg" sizes="any" type="image/svg+xml">

    <!-- 파비콘을 사용할 경우 설정 -->
    <link rel="shortcut icon" href="../assets/ico/favicon.png">

    <!-- 애플에서 아이콘 설정(예전 방식, 현재는 사용하지 않음) -->
    <link rel="apple-touch-icon-precomposed" href="favicon.png">
    <link rel="apple-touch-icon" href="favicon.png">

</head>
<body>
    <!-- 본문 내용을 작성하는 곳 -->
</body>
</html>