<link> 태그는 HTML 문서와 외부 리소스(주로 CSS 파일)를 연결하는 데 사용됩니다. 이 태그는 문서의 <head> 섹션 안에 위치합니다.
<link> 태그의 주요 특징은 다음과 같습니다:
- rel 속성: rel 속성은 필수 속성으로, 외부 리소스와 문서 간의 관계를 정의합니다. 가장 일반적인 값은 "stylesheet"로, CSS 파일을 가리킵니다.
- href 속성: href 속성은 외부 리소스의 URL을 지정합니다. 이 URL은 상대 경로 또는 절대 경로로 지정할 수 있습니다.
- 미디어 쿼리: media 속성을 사용하여 특정 미디어 환경에서만 스타일을 적용할 수 있습니다. 예를 들어, media="screen" 은 화면에서만 스타일을 적용하고, media="print" 는 인쇄 시에만 스타일을 적용합니다.
- 타입 지정: type 속성을 사용하여 외부 리소스의 MIME 타입을 지정할 수 있습니다. 일반적으로 CSS의 경우 type="text/css"를 사용합니다.
예시:
html
<head>
<link rel="stylesheet" href="styles.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
위의 예시에서는 다음과 같은 사용법을 보여줍니다:
- styles.css 파일은 화면에서 사용되는 CSS 스타일을 정의합니다.
- print.css 파일은 인쇄 시 사용되는 CSS 스타일을 정의합니다.
- favicon.ico 파일은 웹 사이트의 아이콘으로 사용됩니다.
<link> 태그는 HTML 문서와 외부 리소스를 연결하는 데 매우 중요한 역할을 합니다. 특히 CSS 파일을 연결하는 데 널리 사용됩니다.