link tag는 외부의 문서를 연결시키는 태그입니다.
예시로 google font , fontAwesome 같은 사이트를 이용할 때도 외부의 문서와 연결시키며,
css 파일같은 스타일 시트를 연결할 수 있습니다.
우리는 link 태그를 <head> 영역 안에다 포함합니다. 그 이유는 문서를 읽는 순서에 있습니다.
link 태그에는 여러 가지 속성이 존재합니다.
1. href
문서와 연결할 문서의 경로를 적어줍니다.
<link href = "도메인이 와도 되며 , 연결될 문서의 경로가 와도 됩니다.">
또한 주소는 상대 경로와/ 절대 경로 둘 다 가능합니다.
2.rel
현재 문서와 연결될 문서의 관계를 표시합니다.
<link rel="author" href = "author">
<link rel="stylesheet" href="style.css" >
-
stylesheet : 스타일 시트로 연결하고자 할 경우
-
alternate : 문서의 대안 version(프린트나 번역 사이트)로 연결할 경우
-
author : 저작자로 연결할 경우
-
help : 도움말로 연결할 경우
-
license : 문서의 저작권 정보로 연결할 경우
-
search : 검색 도구로 연결할 경우
3.type
연결 문서의 MIME 유형 (href 속성이 설정되어야만 합니다.)
*MIME : 웹에서 content type을 말할 때 자주 사용됩니다.
자주 사용되는 TYPE은
CSS : text/css
JS : text/javascript
XML : application/xml
이 있습니다.
4.media
연결 문서가 표시될 장치 또는 미디어 유형입니다.
웹 기준으로 연결될 문서가 전부 웹으로 연결된다고 할 수 있지만
모바일, tv , print 등등 여러 가지 연결될 장치들이 존재합니다.
유형
-
all : 기본값입니다. 모든 장치에 해당됩니다.
-
tv : tv유형의 장치에 해당됩니다.
-
screen : 컴퓨터 화면 , 태블릿, 스마트폰 화면에 해당됩니다.
-
print : 프린트 미리보기와 인쇄 페이지 모드에 해당됩니다.
-
speech : 페이지를 읽어주는 스크린 리더에 해당됩니다.
또한 and, not , or연산자를 사용할 수 있습니다.
media = "screen and (device-width : 320px)"
여기서 device는 장치의 화면 해상도를 나타냅니다.
만약 해상도가 1440 X 900이라면
device-width는 1440px이며
device-height는 900px입니다.
'웹 프로그래밍 기초' 카테고리의 다른 글
| <HTML> <a>태그의 target 속성 , 앵커 (0) | 2020.06.12 |
|---|---|
| <HTML> <figure> , <figcaption> 태그 (0) | 2020.06.12 |
| [CSS]all , unset , box-shadow , IR기법 (0) | 2020.05.07 |
| CSS 상속과 우선순위 (0) | 2020.05.06 |
| HTML Class , Id (0) | 2020.05.06 |
댓글