HTML에서 link 태그는 자동으로 닫히는 요소이며 일반적으로 문서의 head 섹션에 있습니다. 스타일 시트, 아이콘 등과 같은 외부 리소스와의 연결을 설정하는 데 사용됩니다. link 태그에는 여러 속성이 있으며 그 중 rel 및 href 가장 일반적으로 사용됩니다.
rel 속성은 현재 문서와 연결된 리소스 간의 관계를 정의합니다. 일반적인 rel 속성 값은 다음과 같습니다.
stylesheet : 외부 CSS 스타일시트에 대한 링크를 나타냅니다. icon : 파비콘과 같이 웹사이트에 연결된 아이콘을 나타냅니다. href 속성은 연결된 리소스의 URL을 지정하는 데 사용됩니다.
일반적인 link 태그의 예는 다음과 같습니다.
<!DOCTYPE HTML> <html> <머리> <meta charset="UTF-8"> <title>내 웹사이트</title> <!-- 외부 CSS 스타일 시트 링크 --> <link rel="stylesheet" href="styles.css"> <!-- 웹사이트 링크 아이콘 --> <link rel="icon" href="favicon.ico"> </head> <본문> <h1>링크!</h1> <p>링크 소개입니다. </p> </body> </html>
이 예에서는 두 개의 link 태그를 사용합니다. 첫 번째 link 태그는 HTML 문서를 페이지 스타일을 정의하는 데 사용되는 외부 CSS 스타일 시트 styles.css 와 연결합니다. 두 번째 link 태그는 HTML 문서를 사용자가 브라우저에서 웹사이트를 열 때 표시되는 웹사이트 favicon.ico 와 연결합니다.
물론 link 태그에는 다른 속성과 용도가 있습니다. 다음은 몇 가지 일반적인 속성과 사용 사례입니다.
type : 이 속성은 연결된 리소스의 MIME 유형을 지정하는 데 사용됩니다. 예를 들어 CSS 스타일시트에 연결할 때 해당 유형을 text/css 로 지정할 수 있습니다. 대부분의 경우 브라우저는 리소스 유형을 자동으로 식별할 수 있으므로 type 속성이 필요하지 않습니다. 예:
<link rel="stylesheet" href="styles.css" type="text/css">
media : 이 속성을 사용하면 스타일 시트가 적용되는 미디어 유형을 지정할 수 있습니다. 예를 들어, 사용자가 페이지를 인쇄할 때 사용되는 인쇄 관련 스타일시트를 만들 수 있습니다. 예:
<link rel="stylesheet" href="print.css" media="print">
sizes : link 태그를 사용하여 다양한 크기의 아이콘에 연결할 때 sizes 속성을 사용하여 아이콘 크기를 지정할 수 있습니다. 이는 장치에 따라 아이콘이 다른 크기로 표시되는 상황에 유용합니다. 예:
<link rel="icon" href="icon-48x48.png" 크기="48x48"> <link rel="icon" href="icon-96x96.png" 크기="96x96">
crossorigin : cross-origin 리소스에 연결할 때 crossorigin 속성을 사용하여 리소스에 대한 CORS(Cross-Origin Resource Sharing) 설정을 지정할 수 있습니다. 예:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous">
integrity : 이 속성은 외부 리소스의 무결성을 보장하는 데 사용되며 crossorigin 속성과 함께 사용할 수 있습니다. 리소스에 콘텐츠 기반 해시(예: SHA-256)를 제공하면 리소스가 변조되지 않았음을 확인할 수 있습니다. 예:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous" 무결성="sha256-base64-encoded-hash">
preload : rel="preload" 사용하면 글꼴, 이미지, 스크립트 등 중요한 리소스를 미리 로드할 수 있습니다. 이는 페이지 로딩 성능을 최적화합니다. 예:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
다음은 link 태그의 몇 가지 일반적인 속성과 용도입니다.
이전에 언급한 것 외에도 rel 더 많은 속성 값이 있습니다.
alternate : 다른 언어 또는 다른 장치용 페이지와 같은 문서의 대체 버전을 제공하려면 rel="alternate" 사용하십시오. 예:
<link rel="alternate" hreflang="es" href="https://link.com/es/a"> <link rel="alternate" media="화면만 및 (최대 너비: 640px)" href="https://link.com/mobile/a">
dns-prefetch : rel="dns-prefetch" 를 통해 도메인 이름을 미리 확인하여 DNS 조회 시간을 줄이고 리소스 로딩 속도를 높일 수 있습니다. 예:
<link rel="dns-prefetch" href="//link.com">
preconnect : dns-prefetch 와 유사하게 rel="preconnect" 타사 리소스에 대한 TCP 연결을 미리 설정하여 연결 설정에 필요한 시간을 줄일 수 있습니다. 예:
<link rel="preconnect" href="https://link.com">
prefetch : rel="prefetch" 사용하여 후속 페이지에서 사용할 리소스를 미리 가져오고 캐시합니다. 이는 페이지에서 사용될 수 있는 리소스를 미리 로드하는 데 유용합니다. 예:
<link rel="prefetch" href="pre-page.html">
canonical : rel="canonical" 사용하면 검색 엔진에 페이지의 표준 URL을 제공하여 중복 콘텐츠 문제를 방지하는 데 도움이 됩니다. 예:
<link rel="표준" href="https://link.com/a/post">
license : 문서의 라이센스 URL을 지정하려면 rel="license" 사용하십시오. 예:
<link rel="license" href="https://link.org/licenses/by/4.0/">
manifest : 웹 애플리케이션의 매니페스트 파일(일반적으로 JSON 형식)을 HTML 문서에 연결하려면 rel="manifest" 사용합니다. 매니페스트 파일에는 이름, 설명, 아이콘 등과 같은 웹 애플리케이션의 메타데이터가 포함되어 있습니다. 예:
<link rel="manifest" href="manifest.json">
브라우저마다 이러한 속성과 기능을 지원하는 수준이 다를 수 있습니다. 호환성과 기능성을 보장하려면 새로운 기능을 사용할 때 관련 문서를 참조하는 것이 좋습니다.
HTML 링크 태그 속성에 대한 자세한 내용을 보려면 downcodes.com에서 이전 기사를 검색하거나 아래의 관련 기사를 계속 탐색해 보세요. 미래.downcodes.com!