설명
The HTML Link Element (<link>) specifies relationships between the current document and other documents. Possible uses for this element include defining a relational framework for navigation and linking the document to a style sheet.
HTML의 Link 엘리먼트 (<Link>)는 현재 문서와 다른 문서 사이의 관계를 지정한다. 탐색(네비게이션)을 위한 관계형 프레임워크를 정의할 때, 그리고 스타일시트를 문서에 연결할 때 사용될 수 있다.
(관계형 프레임워크 이 부분을 설명해줄 수 있는 예제가 필요한 것 같아요.)
Usage Context
| Permitted content | None, this is a void element. |
| Tag omission | As it is a void element, the start tag must be present and the end tag must not be present. |
| Permitted parent elements | Any element that accept metadata elements. |
| Normative document | HTML5, section 4.2.4 (HTML4.01, section 12.3) |
속성
이 엘리먼트는 전역속성을 지원한다.
charset - Obsolete (폐기)
This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in RFC 2045. The default value is ISO-8859-1.
이 속성은 링크된 자료의 문자 인코딩을 정의한다. 그 값은 RFC 2045에 정의된 대로 빈 칸과 (또는) 쉼표로 구분된 문자셋 목록이 들어간다. 기본값은 ISO-8859-1이다.
참고 : This attribute is obsolete in HTML5 and must not be used by authors. To achieve its effect, use the Content-Type: HTTP header on the linked resource.
참고: 이 속성은 HTML5에서는 폐기되므로 사용하지 않도록 한다. 링크된 자료의 HTTP 헤더 Content-Type을 사용하면 동일한 효과를 얻을 수 있다.
disabled - Non-standard (비표준)
This attribute is used to disable a link relationship. In conjunction with scripting, this attribute could be used to turn on and off various style sheet relationships.
이 속성은 링크 관계를 작동하지 않도록 하는데에 사용된다. 스크립트와 함께 사용하면 다양한 스타일시트를 연결하거나 연결을 끊을 수 있다.
참고 : This attribute is non-standard and only used by some Microsoft browsers. Do not use it. To achieve its effect, use one of the following techniques:
•If the disabled attribute has been added directly to the page, do not include the <link> element instead;
•If the disabled attribute has been added via scripting, remove the element from the DOM via scripting.
참고: 이 속성은 표준이 아니며 일부 마이크로소프트 브라우저에서만 사용된다. 사용하지 말자. 다음의 기법들 중 하나를 사용하면 동일한 효과를 얻을 수 있다.
•페이지에서 직접 추가된 속성인 경우, <link> 엘리먼트를 쓰지 않는다.
•스크립트를 통해 추가된 속성인 경우, 스크립트를 통해 DOM에서 엘리먼트를 제거한다.
href
This attribute specifies the URL of the linked resource. A URL might be absolute or relative.
이 속성은 링크된 자료의 URL을 지정한다. URL은 절대경로 또는 상대경로가 될 수 있다.
hreflang
This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by BCP47 for HTML5 and by RFC1766 for HTML 4. Use this attribute only if the href attribute is present.
이 속성은 링크된 자료의 언어를 표시한다. 이것은 순수한 참조사항이다. 여기에 사용할 수 있는 값이 HTML5은 BCP47, HTML4는 RFC1766에 정의되어 있다. 이 속성은 href 속성이 주어지는 경우에만 사용한다.
media
This attribute specifies the media which the linked resource applies to. Its value must be a media query. This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on.
이 속성은 링크된 자료가 적용되는 미디어를 지정한다. 그 값은 반드시 미디어 쿼리여야 한다. 주로 외부 스타일시트를 링크해서 사용자 기기에서 브라우저 정보에 적합한 것을 선택할 수 있도록 할 때 유용하다.
참고 :
•In HTML 4, this can only be a simple white-space-separated list of media description literals, i.e., media types and groups, where defined and allowed as values for this attribute, such as print, screen, aural, braille. HTML5 extended this to any kind of media queries, which are a superset of the allowed values of HTML 4.
•Browsers not supporting the CSS3 Media Queries won't necessary recognized the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.
참고 :
•HTML4에서 이것은 미디어 타입, 그룹과 같은 미디어 설명 값을 간단히 공백문자로 구분한 목록으로서, 프린트, 스크린, 청각, 촉각과 같이 이 속성의 값으로 정의되고 허용된 것에 사용된다. HTML5에서는 HTML4에서 허용된 값들을 모두 포함하여, 어떤 종류의 미디어 쿼리에도 사용할 수 있도록 범위를 확대했다.
•CSS3 미디어 쿼리를 지원하지 않는 브라우저들은 링크를 적절히 인식하지 못할 수 있다. HTML4에서 정의된 미디어 쿼리 목록으로 대체링크를 설정하는 것을 잊지 말자.
(print, screen, aural, braille 이런 아이들은 그냥 영문으로 써주는 것이 맞을까요?)
methods - Non-standard (비표준)
The value of this attribute provides information about the functions that might be performed on an object. 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).
이 속성의 값은 객체에서 수행될 기능에 대한 정보를 제공해준다. 그 값은 일반적으로 HTTP 프로토콜을 통해 주어지지만, (title 속성과 비슷한 이유로) 링크 내에서 참조정보(설명)을 먼저 추가하면 유용하다. 예를 들어, 브라우저는 지정된 메서드의 기능에 따라 링크를 불러오는 방식을 다르게 선택할 수 있다. something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. (이 문장은 아무래도 잘 이해가 안되네요.) 이 속성은 제대로 이해되거나 지원되지 않고 있는데, 심지어 이 속성을 정의한 인터넷 익스플로러 4에서조차도 그러하다. Methods Property (MSDN) 참조.
rel
This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the link types values. The most common use of this attribute is to specify a link to an external style sheet: the rel attribute is set to stylesheet, and the href attribute is set to the URL of an external style sheet to format the page. WebTV also supports the use of the value next for rel to preload the next page in a document series.
이 속성은 링크된 문서가 현재 문서에 갖는 관계를 지칭한다. 빈 칸으로 구분된 링크타입 값 목록으로 표시되어야 한다. 외부 스타일시트로의 링크를 지정하는 데에 가장 일반적으로 사용되는데, rel 속성은 스타일시트로 설정되고, href 속성은 이 페이지의 모습을 표현할 외부 스타일시트의 URL로 설정되는 식이다. 또한 WebTV는 일련의 문서에서 다음 페이지를 미리 불러오는 데에 rel 다음의 값을 사용할 수 있도록 지원한다.
rev - Obsolete (폐기)
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 .
이 속성의 값은 href 속성에 정의된 대로 현재 문서가 링크된 문서와의 사이에 갖는 관계를 보여준다. 따라서 이 속성은 rel 속성의 값과 비교해 반대방향의 관계를 정의한다. 속성의 링크 타입 값은 rel에서 사용되는 값과 비슷하다.
참고 : This attribute is obsolete in HTML5. Do not use it. 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.
참고 : 이 속성은 HTML5에서는 폐기된다. 사용하지 말자. 동일한 효과를 얻으려면 rel 속성으로 반대되는 링크타입 값을 사용하도록 하자. 예를 들어 made는 author로 바꿔써야 한다. 또한 이 속성은 수정판(revision)을 뜻하는 것이 아니니, 안타깝게도 수많은 사이트에서 사용되고 있는 것처럼 버전 번호를 붙여 사용해서는 안된다.
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.
•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.
이 속성은 (링크되는) 자료에 포함되어 있는 시각적 미디어의 아이콘 크기를 정의한다. rel에 아이콘 링크타입 값이 담겨있을 때에만 사용해야 한다. 이 속성은 아래와 같은 값을 가질 수 있다.
•어떤 값이라도 가능하다. 즉, image/svg와 같이 벡터 형식으로 표시한다면 아이콘은 어떤 크기로든 표시될 수 있다는 뜻이다.
•공백문자로 구분된 목록으로서, 각각의 값은 <가로 픽셀>x<세로 픽셀> 또는 <가로 픽셀>X<세로 픽셀>로 표시한다. 이러한 값들은 (링크되는) 자료에 포함되어 있어야 한다.
참고 :
•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.
참고:
•아이콘 형식은 대부분 단일한 하나의 아이콘에만 설정된다. 따라서 대개의 경우 크기값도 하나의 항목에 적용된다. 주요 브라우저들 중에서는 애플의 ICNS 형식만이 다수의 아이콘에 설정 가능하며, 이 형식은 오직 WebKit에서만 지원된다.
•애플의 iOS는 이 속성을 지원하지 않으므로, 애플 아이폰과 아이패드는 Web Clip이나 바탕화면 고정에 사용되는 apple-touch-icon과 apple-touch-startup-icon과 같은 특별한 비표준 링크타입값을 사용한다.
target - Non-standard (비표준)
Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.
링크 관계로 정의되었거나 링크된 자료를 불러와 보여줄 프레임 또는 창을 지정한다.
type
This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as text/html, text/css, and so on. The common use of this attribute is to define the type of style sheet linked and the most common current value is text/css, which indicates a Cascading Style Sheet format.
이 속성은 링크되는 내용의 형식을 지정하는 데에 사용된다. 이 속성의 값은 text/html, text/css 등과 같은 MIME 타입이어야 한다. 주로 링크되는 스타일시트의 타입을 지정하는 데에 사용되며, 현재 가장 일반적인 값은 종속형 스타일시트 형식을 표시하는 text/css이다.
예제
To include a style sheet in a page, use the following syntax:
페이지에 스타일시트를 삽입하려면 아래 구문을 사용한다.
<link href="style.css" rel="stylesheet" type="text/css" media="all">
You can also specify alternative style sheets.
The user can choose which style sheet to use by choosing it from the View>Page Style menu. This provides a way for users to see multiple versions of a page.
<link href="default.css" rel="stylesheet" type="text/css" title="Default Style"> <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"> <link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
참고 :
• Under XHTML 1.0, empty elements such as <link> require a trailing slash: <link />.
• A <link> tag can occur only in the head element; however, there can be multiple occurrences of <link>.
• HTML 3.2 defines only the href, rel, rev, and title attributes for the link element.
• HTML 2 defines the href, methods, rel, rev, title, and urn attributes for the link element. The methods and urn attributes were later removed from the specifications.
•The HTML and XHTML specifications define event handlers for the link element, but it is unclear how they would be used.
참고 :
• XHTML 1.0에서는 <link>와 같이 비어있는 요소는 <link />와 같이 닫는 슬래쉬(/)를 붙여줘야 한다.
• <link> 태그는 헤드 요소 안에 위치해야만 한다. 그러나 <link>를 여러 개 쓰는 것은 가능하다.
• HTML 3.2는 링크 요소에 href, rel, rev, title 속성만을 정의하고 있다. • HTML 2는 링크 요소에 href, methods, rel, rev, title, urn 속성을 정의하고 있다. methods와 urn 속성은 이후에 제외되었다.
• HTML과 XHTML은 링크 요소에 대한 이벤트 핸들러를 정의하고 있지만, 그것이 어떻게 사용될 수 있는지는 명확하지 않다.
DOM Interface
This element implements the HTMLLinkElement interface.
이 요소는 HTMLLinkElement 인터페이스를 실행한다.
호환성
| 기능 | 구글크롬 | 파이어폭스Gecko) | 인터넷 익스플로러 | Opera | Safari |
|---|---|---|---|---|---|
| 기본적인 지원 | 1.0 | 1.0 (1.7 or earlier) | 지원 | 지원 | 지원 |
| 기능 | 안드로이드 | 파이어폭스 모바일(Gecko) | 인터넷 익스플로러 모바일 | 오페라 모바일 | 사파리 모바일 |
|---|---|---|---|---|---|
| 기본적인 지원 | 지원 | 1.0 (1.0) | 지원 | 지원 | 지원 |
참고
