번역 작업 진행중입니다.

HTML Link 요소 (<link>) 는 현재 문서와 외부 리소스와의 관계를 명시합니다. 이 요소는 네비게이션을 위한 관계형 프레임워크의 정의에도 사용될 수 있습니다. 이 요소는 스타일 시트에 링크하는 데에 가장 많이 사용됩니다.

속성

이 요소는 전역 속성을 포함합니다

charset
이 속성은 링크된 리소스의 문자 인코딩을 정의합니다.. 값은RFC 2045에 정의된 -와 /와 ,(쉼표)로 구분되는 문자 공간의 목록입니다. 기본 값은 ISO-8859-1 입니다.
사용시 참고: 이 속성은 HTML5에서 폐기(obsolete)되었으며 작성자에 의해서 사용되어서는 안됩니다. 이 효과를 달성하기 위해서는 링크된 리소스에 Content-Type HTTP 헤더를 사용하세요.
crossorigin HTML5
이 열거된 속성은 관련된 이미지의 fetching이 CORS를 통해 수행되어야 하는지 말아야하는지를 가리킵니다. CORS-enabled images<canvas> 요소에서 더럽힘 없이 재사용 되어질수 있습니다. 허락되는 값들은:
anonymous
cross-origin 요청(i.e. with Origin: HTTP header)이 수행됩니다. 하지만 어떤 자격증명서도 전송되지 않습니다. (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted and its usage restricted..
use-credentials
A cross-origin request (i.e. with Origin: HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.
When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in <canvas> elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.
disabled
이 속성은 링크 관계를 사용하지 않도록 설정하는 데 사용됩니다. 이 속성을 스크립트를 통해 설정함으로써다양한 스타일 시트 관계를 설정하거나 해제할 수 있습니다.

참고: HTML표준에는disabled 속성이 없지만, HTMLLinkElementDOM 객체에는 disabled속성이 존재합니다.

disabled를 HTML속성으로 사용하는 것은 표준이 아니므로 일부 브라우저(W3 #27677)에서만 지원됩니다. 이 속성은 사용하지 마세요.다음과 같은 기법을 사용하면유사한 효과를 얻을 수 있습니다:

  • 페이지의 요소에 직접적으로 disabled속성이 추가되어 있다면,<link> 요소를 포함시키지마세요;
  • 스크립트를 이용해StyleSheetDOM 객체의disabled속성을 설정하세요.
href
이 속성은 링크된 리소스의 URL을 나타냅니다. URL은 절대적이거나 상대적입니다. \
hreflang
이 속성은 링크된 리소스의 언어를 나타냅니다. 이것은 순수히 조언입니다. 사용할수 있는 값은 HTML5에서는 BCP47, HTML 4에서는 RFC1766입니다. 이 속성은 href 속성이 존재할때만 사용하세요
media
이 속성은 링크된 리소스에적용될 media를 명시합니다. 이 속성의 값으로는 반드시 media query중 하나가 지정되어야 합니다. 이 속성은 사용자 에이전트로 하여금 구동장치에 가장 적합한스타일시트를 고를 수 있게끔외부 스타일시트를 연결할 때특히 유용합니다.
사용 참고:
  • HTML 4에서는 이 속성의 값으로 사용할 수 있는print, screen, aural, braille등과 같은 값을 공백으로 구분한 미디어 설명 문자열 목록, 예를 들어, 미디어 유형 및 그룹(media types and groups)일 수 있습니다.HTML5에서는 이를 확장하여 HTML 4에서 허용되는 값 외에 어떤 유형의media queries든 사용할 수 있습니다.
  • CSS3 Media Queries를 지원하지 않는 브라우저는 이를 타당한 링크로 인식하지 않을 수 있으므로HTML 4에 정의되어 있는제한된 media query의 집합을 이용한 폴백(fallback) 링크를 설정하는 것을 잊지 말기바랍니다.
methods
이 속성의 값은 어떤 객체에서 수행될 수 있는기능에 대한 정보를 제공합니다. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. See Methods Property (MSDN).
rel
이 속성은 링크된 문서와 현재 문서와의 관계를 명명합니다. 값은 공백으로 구분된 일련의 l링크 타입 값이여야 합니다. 이 속성의 가장 일반적인 쓰임새는 스타일시트의 링크를 나타내는것입니다: rel 속성으로 스타일시트로 설정하고, href 속성으로 외부 스타일 시트의 URL을 지정합니다. WebTV also supports the use of the value next for rel to preload the next page in a document series.
rev
The value of this attribute shows the relationship of the current document to the linked document, as defined by the href attribute. The attribute thus defines the reverse relationship compared to the value of the rel attribute. Link types values for the attribute are similar to the possible values for rel.
사용 참고: 이 속성은 HTML5에서 폐기되었습니다.. 이 속성을 사용하지 마세요. To achieve its effect, use the rel attribute with the opposite link types values, e.g. made should be replaced by author. Also this attribute doesn't mean revision and must not be used with a version number, which is unfortunately the case on numerous sites.
sizes HTML5
This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the rel contains the icon link types value. It may have the following values:
  • any, meaning that the icon can be scaled to any size as it is in a vectorial format, like image/svg+xml.
  • a white-space separated list of sizes, each in the format <width in pixels>x<height in pixels> or <width in pixels>X<height in pixels>. Each of these sizes must be contained in the resource.
사용 참고:
  • Most icon format are only able to store one single icon; therefore most of the time the sizes contains only one entry. Among the major browsers, only the Apple's ICNS format allows the storage of multiple icons, and this format is only supported in WebKit.
  • Apple's iOS does not support this attribute, hence Apple's iPhone and iPad use special, non-standard link types values to define icon to be used as Web Clip or start-up placeholder: apple-touch-icon and apple-touch-startup-icon.
target
Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.
type
이 속성은 링크된 콘텐츠의 타입을 정의하는데 사용됩니다. 속성의 값은 text/html, text/css와 같은 MIME 타입이여야합니다. 이 속성은 링크된 스타일시트의 타입을 지정하는데 쓰이는것이 보통이며, text/css 값이 가장 흔합니다.

예제

스타일 시트 포함하기

페이지에 스타일 시트를 포함하려면, 밑의 문법을 사용하세요

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

대체 스타일시트 제공하기

당신은 대체 스타일시트를 제공할수도 있습니다.

유저는 View>Page Style 메뉴에서 사용할 스타일시트를 고를수 있습니다. 이것은 유저가 페이지를 여러 버전으로 볼수 있는 방법을 제공합니다.

<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

스타일시트 load 이벤트

당신은 load 이벤트를 통해 스타일시트가 언제 로드되는지 확인할수 있습니다. 비슷한 방법으로, 당신은 error 이벤트를 통해 스타일시트를 처리하는 도중 에러가 발생했는지 확인할 수 있습니다:

<script>
function sheetLoaded() {
  // Do something interesting; the sheet has been loaded
}

function sheetError() {
  alert("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">
참고: The load event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.

참고

  • <link>태그는 <head>요소 내에서만 등장할수 있습니다; 하지만, there 여러개의 <link> 가 등장할수도 있습니다.
  • HTML 3.2는 link 요소의 href, rel, rev, title 속성만을 정의합니다.
  • HTML 2는 link 요소의 href, methods, rel, rev, title, urn 속성을 정의합니다. methodsurn 속성은 후에 사양에서 제거됍니다.
  • HTML과 XHTML 사양은 <link> 요소를 위한 이벤트 핸들러를 정의했지만 그것들이 어떻게 사용될지는 불분명합니다.
  • Under XHTML 1.0, empty elements such as <link> require a trailing slash: <link />.

명세

명세 상태 주석
HTML Living Standard
The definition of '<link>' in that specification.
Living Standard  
HTML5
The definition of '<link>' in that specification.
Recommendation  
HTML 4.01 Specification
The definition of '<link>' in that specification.
Recommendation  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
linkChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
charset
Deprecated
Chrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
crossoriginChrome Full support 25Edge No support NoFirefox Full support 18IE No support NoOpera Full support 15Safari ? WebView Android Full support 37Chrome Android Full support YesEdge Mobile No support NoFirefox Android Full support 18Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
disabled
DeprecatedNon-standard
Chrome No support NoEdge Full support YesFirefox No support NoIE Full support YesOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
hrefChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
hreflangChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
integrity
Experimental
Chrome Full support 45Edge No support NoFirefox ? IE No support NoOpera Full support 32Safari No support NoWebView Android Full support 45Chrome Android Full support 45Edge Mobile No support NoFirefox Android ? Opera Android ? Safari iOS No support NoSamsung Internet Android Full support 5.0
mediaChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
methods
DeprecatedNon-standard
Chrome No support NoEdge ? Firefox No support NoIE Full support 4Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
prefetch
Experimental
Chrome Full support 56Edge ? Firefox ? IE No support NoOpera Full support 43Safari ? WebView Android Full support 56Chrome Android Full support 56Edge Mobile ? Firefox Android ? Opera Android Full support 43Safari iOS ? Samsung Internet Android Full support 6.0
prefetch: Secure context required
Experimental
Chrome Full support 64Edge ? Firefox ? IE No support NoOpera Full support 51Safari ? WebView Android Full support 64Chrome Android Full support 64Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
referrerpolicyChrome Full support 51Edge No support NoFirefox Full support 50IE No support NoOpera Full support 38Safari Full support 11.1WebView Android Full support 51Chrome Android Full support 51Edge Mobile No support NoFirefox Android Full support 50Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 7.2
relChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
rel: Alternative stylesheets.Chrome ? Edge ? Firefox Full support 3IE ? Opera Full support YesSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
rel.dns-prefetch
Experimental
Chrome Full support 46Edge ? Firefox Full support 3IE ? Opera Full support 33Safari ? WebView Android Full support 46Chrome Android Full support YesEdge Mobile ? Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
rel.manifest
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox ? IE ? Opera No support NoSafari ? WebView Android Full support 39Chrome Android Full support 39Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 4.0
rel.modulepreload
Experimental
Chrome Full support 66Edge ? Firefox ? IE ? Opera Full support 53Safari ? WebView Android Full support 66Chrome Android Full support 66Edge Mobile ? Firefox Android ? Opera Android Full support 47Safari iOS ? Samsung Internet Android Full support Yes
rel.noopener
Non-standard
Chrome Full support 49Edge No support NoFirefox Full support 52
Notes
Full support 52
Notes
Notes Prior to Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
IE No support NoOpera Full support 36Safari Full support 10.1WebView Android Full support 49Chrome Android Full support 49Edge Mobile No support NoFirefox Android Full support 52
Notes
Full support 52
Notes
Notes Prior to Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
Opera Android Full support 36Safari iOS Full support 10.3Samsung Internet Android Full support 5.0
rel.preconnect
Experimental
Chrome Full support 46Edge No support NoFirefox Full support 39
Notes
Full support 39
Notes
Notes Before Firefox 41, it doesn't obey the crossorigin attribute.
IE No support NoOpera Full support 33Safari No support NoWebView Android Full support 46Chrome Android Full support 42Edge Mobile No support NoFirefox Android Full support 39
Notes
Full support 39
Notes
Notes Before Firefox 41, it doesn't obey the crossorigin attribute.
Opera Android ? Safari iOS No support NoSamsung Internet Android Full support 4.0
rel.prefetch
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rel.preload
Experimental
Chrome Full support 50Edge ? Firefox No support 56 — 57
Notes
No support 56 — 57
Notes
Notes Disabled due to various web compatibility issues (e.g. bug 1405761).
IE ? Opera Full support 37Safari ? WebView Android Full support 50Chrome Android Full support 50Edge Mobile ? Firefox Android No support 56 — 57
Notes
No support 56 — 57
Notes
Notes Disabled due to various web compatibility issues (e.g. bug 1405761).
Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
rel.prerender
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
revChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
sizes
Experimental
Chrome No support NoEdge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 441770.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support No
Notes
No support No
Notes
Notes See bug 441770.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
target
Deprecated
Chrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
titleChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
typeChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

같이 보기

 

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, dolmoon, highdali, azunyan3
최종 변경자: alattalatta,