link 태그
link 태그는 HTML 페이지에 CSS 파일을 연결합니다. 또한, link 태그는 파비콘과 같은 다른 파일들도 연결합니다.
(파비콘은 브라우저 탭에서 보이는 사이트의 아이콘입니다. Yandex와 같은 일부 검색 엔진에서 사이트 검색 결과 옆에서도 볼 수 있습니다).
이 태그에는 많은 속성들이 있고 다양한 값을 가질 수 있지만, 실제로는 거의 사용되지 않습니다. 가장 일반적인 사용은 CSS 연결과 파비콘 추가입니다.
CSS 연결 방법:
<link rel="stylesheet" href="style.css">
파비콘 연결 방법:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
link 태그는 닫는 태그가 필요하지 않습니다.
속성
| 속성 | 설명 |
|---|---|
href |
연결할 파일의 경로. |
media |
파일을 연결할 장치 유형. 즉, 큰 화면(값 screen)용으로만 CSS 파일을 연결하거나, 모바일 기기나 태블릿과 같은 작은 화면(값 handheld)용으로만 연결할 수 있습니다.
가능한 값: all, braille, handheld, print, screen, speech, projection, tty, tv.
자세한 내용은 아래를 참조하세요.
|
rel |
연결할 파일의 유형.
가능한 값: stylesheet | alternate.
값 stylesheet는 CSS 파일이 연결됨을 나타내고,
값 alternate는 예를 들어 뉴스 피드, 기사 공지를 설명하는 XML 형식의 파일 링크를 지정하는 데 사용됩니다.
|
charset |
연결할 파일의 인코딩.
현재 표준은 utf-8입니다.
|
type |
연결할 파일의 데이터 유형. |
media 속성 값
HTML5에서는 값으로 미디어 쿼리를 지정할 수 있습니다.
| 값 | 설명 |
|---|---|
all |
모든 장치. |
screen |
모니터 화면. |
handheld |
전화기, 스마트폰, 작은 화면을 가진 장치. |
braille |
점자 시스템을 기반으로 한 장치로, 시각 장애인을 위한 것입니다. |
speech |
음성 합성기 및 텍스트를 소리 내어 읽어주는 프로그램. 음성 브라우저도 여기에 포함됩니다. |
print |
프린터. |
projection |
프로젝터. |
tty |
텔레타이프, 터미널, 제한된 화면 기능을 가진 휴대용 장치. 이들에 대해 측정 단위로 픽셀을 사용해서는 안 됩니다. |
tv |
웹 페이지를 열 수 있는 텔레비전(가끔 그런 경우도 있습니다). |
기본값: all.
예시
CSS 파일과 파비콘을 추가한 가장 간단한 HTML 페이지의 구조를 살펴보겠습니다:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css" media="screen">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
