코딩의 시작, TCP School

HTML <link> 태그

정의 및 특징

또한, 이 요소는 <head> 요소 내부에만 위치할 수 있으며, 그 개수에는 제한이 없습니다.

이러한 <link> 요소는 주로 외부 스타일 시트(external style sheet)를 연결할 때 사용됩니다.

예제

<head>
    <link rel="stylesheet" type="text/css" href="/examples/media/expand_style.css">
</head>

코딩연습 ▶

지원하는 브라우저 및 버전

태그명
<link>	1.0	지원함	지원함	1.0	지원함	지원함

HTML5에서 변경된 사항

HTML5에서는 <link> 요소의 charset, rev, target 속성을 더 이상 지원하지 않으며, crossorigin 속성과 sizes 속성이 새롭게 추가되었습니다.

HTML과 XHTML에서의 차이점

HTML에서는 <link> 태그를 닫지 않지만, XHTML에서는 다음과 같이 반드시 태그를 닫아야만 합니다.

<link rel="stylesheet" type="text/css" href="style.css">

사용할 수 있는 속성

html5 : HTML5에서 새롭게 추가된 속성

속성명	속성값	설명
charset	문자셋	링크된 문서의 문자셋(character-set)을 명시함. HTML5에서는 더 이상 지원하지 않음.
crossorigin	anonymous use-credentials	해당 요소가 CORS 요청(cross-origin request)을 처리하는 방식을 명시함.
href	URL	링크될 외부 리소스(external resource)의 URL를 명시함.
hreflang	언어 코드	링크된 문서의 언어를 명시함.
media	미디어 쿼리	링크된 문서를 표시할 미디어나 장치를 명시함.
rel	alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet	필수 속성으로, 현재 문서와 외부 리소스 사이의 연관 관계를 명시함.
rev	예약된 연관 관계	현재 문서와 외부 리소스 사이의 연관 관계를 명시함. HTML5에서는 더 이상 지원하지 않음.
sizes	높이x너비 any	시각적 미디어에서 리소스에 포함된 아이콘의 크기를 명시함. (단, <link> 요소의 rel 속성값이 “icon”인 경우에만 사용할 수 있음)
target	_blank _self _top _parent 프레임 이름	링크된 문서를 로드할 위치를 지정함. HTML5에서는 더 이상 지원하지 않음.
type	미디어 타입	링크된 외부 리소스의 미디어 타입을 명시함.

CSS 기본값

link {

display: none;

}

DOM 인터페이스

interface HTMLLinkElement : HTMLElement {

[CEReactions] attribute USVString href;

[CEReactions] attribute DOMString? crossOrigin;

[CEReactions] attribute DOMString rel;

[CEReactions] attribute DOMString rev;

[CEReactions, SameObject, PutForwards=value] readonly attribute DOMTokenList relList;

[CEReactions] attribute DOMString media;

[CEReactions] attribute DOMString nonce;

[CEReactions] attribute DOMString hreflang;

[CEReactions] attribute DOMString type;

[CEReactions, SameObject, PutForwards=value] readonly attribute DOMTokenList sizes;

[CEReactions] attribute DOMString referrerPolicy;

};

HTMLLinkElement implements LinkStyle;

연관 페이지

CSS 적용 수업 ⇒

연습문제

◀ 이전 다음 ▶

Search

<link>