A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements/link below:

<link>: 외부 리소스 연결 요소 - HTML: Hypertext Markup Language

<link>: 외부 리소스 연결 요소

Baseline Widely available *

HTML <link> 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. <link>는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘, 모바일 앱 아이콘) 연결 등 여러가지로 쓰일 수 있습니다.

시도해 보기 
<link href="/shared-assets/misc/link-element-example.css" rel="stylesheet" />

<p>This text will be red as defined in the external stylesheet.</p>
<p style="color: blue">
  The <code>style</code> attribute can override it, though.
</p>

외부 스타일 시트를 연결하려면 <head> 안에 다음과 같은 <link> 요소를 배치하세요.

<link href="main.css" rel="stylesheet" />

위의 간단한 예제는 href 특성에 스타일 시트의 경로를, rel 특성에 stylesheet을 사용합니다. rel 은 관계(relationship)를 뜻하며, 현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명합니다. 따라서 <link> 요소의 제일 중요한 기능 중 하나라고 볼 수 있습니다.

그중에서도 몇 가지 자주 쓰이는 유형이 있습니다. 사이트의 파비콘을 연결하려면 다음과 같이 사용합니다.

<link rel="icon" href="favicon.ico" />

아이콘을 위한 rel 값도 여러개가 있으며, 주 용도는 다양한 휴대기기 플랫폼의 특별한 아이콘을 나타내기 위함입니다.

<link
  rel="apple-touch-icon"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

sizes 특성은 아이콘 크기를, type 특성은 연결한 리소스의 MIME을 포함합니다. 브라우저는 이런 여러가지 정보를 통해 가장 적합한 아이콘을 선택합니다.

media 특성을 사용해 미디어 유형이나 쿼리를 지정할 수도 있습니다. 그러면 해당 미디어 조건을 만족할 때만 리소스를 불러옵니다.

<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />

새로운 성능 및 보안 관련 기능도 <link> 요소에 추가됐습니다. 다음 코드로 살펴보겠습니다.

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

rel의 preload 값은 브라우저가 이 리소스를 미리 불러와야 한다는 것을 나타내고(자세한 정보는 rel="preload"를 참고하세요), as 특성은 가져오는 리소스가 어떤 리소스인지 나타냅니다. crossorigin 특성은 리소스를 CORS 요청으로 불러와야 하는지에 대한 값입니다.

기타 사용 일람:

특성

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

비표준 특성
methods 비표준 지원이 중단되었습니다

이 특성의 값은 객체에서 수행될 수 있는 함수에 대한 정보를 제공합니다. 값은 일반적으로 HTTP 프로토콜이 사용될 때 주어지지만, title 특성과 비슷한 이유로 미리 link에 지침 정보를 포함시키는 것이 유용할 수도 있습니다. 예를 들어, 브라우저는 명시된 메서드의 함수에 따라 링크의 렌더링을 다르게 선택할 수 있습니다. 검색할 수 있는 링크에는 다른 아이콘을 사용한다거나, 외부 링크에는 현재 사이트를 떠난다는 것을 나타내는 아이콘을 사용할 수 있습니다. 이 특성은 제대로 이해되거나 지원되지 않았습니다. 심지어 정의한 브라우저인 Internet Explorer 4에서도 이 특성을 제대로 지원하지 못합니다.

target 지원이 중단되었습니다

정의된 링크 관계가 있거나 링크된 리소스의 렌더링을 표시할 프레임 또는 창 이름을 정의합니다.

폐기된 특성
charset 지원이 중단되었습니다

이 특성은 링크된 리소스의 문자 인코딩을 정의합니다. 이 값은 RFC 2045에 정의되어 있는 공백이나 쉼표로 구분된 문자 집합의 목록입니다. 기본값은 iso-8859-1 입니다.

참고 : 이 폐기된 특성과 동일한 효과를 구현하려면, 링크된 리소스에서 Content-Type HTTP 헤더를 사용하십시오.

rev 지원이 중단되었습니다

이 특성의 값은 href 특성에 정의된 대로 현재 문서와 링크된 문서의 관계를 나타냅니다. 따라서 이 특성은 rel 특성의 값과 비교했을 때 반대되는 관계를 정의합니다. rev 특성의 연결 유형 값은 rel에서 사용 가능한 값들과 유사합니다.

참고: rev를 사용하는 대신, 반대되는 연결 유형 값을 가지는 rel 특성을 사용하십시오. 예를 들어, made의 역방향 링크를 설정하려면 author를 명시해야 합니다. 또한 이 특성은 "리비전(revision)"의 축약어가 아니며, 버전 번호와 함께 사용되어서는 안됩니다. 많은 사이트에서 이런 식으로 오용하고 있습니다.

예제 스타일 시트 포함하기

페이지에 스타일 시트를 포함하려면 다음 구문을 사용하세요.

<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" />
다양한 사용 환경에 맞는 아이콘 제공하기

같은 페이지에 여러 개의 서로 다른 아이콘 link들을 포함할 수 있으며, 브라우저는 rel과 sizes 특성을 통해 특정 환경에 가장 적합한 아이콘을 선택합니다.

<!-- third-generation iPad with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="favicon114.png" />
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- basic favicon -->
<link rel="icon" href="favicon32.png" />
미디어 쿼리를 이용하여 조건에 맞는 리소스 로드하기

미디어 유형이나 쿼리를 media 특성 안에 제공할 수 있습니다. 이 리소스는 미디어 조건이 참일 경우에만 로드됩니다.

<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
  href="desktop.css"
  rel="stylesheet"
  media="screen and (min-width: 600px)" />
<link
  href="highres.css"
  rel="stylesheet"
  media="screen and (min-resolution: 300dpi)" />
스타일 시트 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()" />

참고: load 이벤트는 스타일시트를 포함한 불러온 모든 콘텐츠가 로드되고 분석된 뒤, style이 콘텐츠에 적용 시작되기 직전에 발생합니다.

Preload 예제

rel="preload"를 이용해 콘텐츠 프리로딩하기에서 더 많은 <link rel="preload"> 예제들을 찾아볼 수 있습니다.

리소스를 가져올 때까지 렌더링 차단하기

blocking 특성 안에 render 토큰을 넣을 수 있습니다. 이렇게 하면 리소스를 가져올 때까지 페이지 렌더링이 차단됩니다.

<link blocking="render" href="critical-font.woff2" as="font" />
기술 요약 명세 브라우저 호환성 같이 보기

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4