<ex>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
1. 정의 및 사용법
<link> 태그는 문서와 외부 소스 사이에 연결을 정의한 것으로 외부 스타일시트를 연결할 때 주로 사용한다.
* stylesheet 언어 : 구조화된 문서의 표현을 기술하는 컴퓨터 언어
2. 속성값
속성 |
값 |
설명 |
charset |
char_encoding |
HTML5에서는 지원하지 않음 연결된 문서의 문자인코딩을 지정 |
crossorigin |
anonymous use-credentials |
엘리먼트의 접근제어 요청을 다루는 방법 지정 |
href |
url |
연결된 문서의 위치 지정 |
hreflang |
language_code |
연결된 문서의 텍스트 언어 지정 |
media |
media_query |
연결될 문서가 표시될 장치 지정 |
rel |
alternate(현재 문서를 대체하기 위한 문서 링크 지정) author(저작자에 관한 문서 링크 지정) dns-prefetch help(도움말 문서 제공) icon(문서를 나타내는 아이콘을 가져옴) license(저작권 정보가 있는 문서 링크 지정) next(다음 문서 지정) pingback preconnect prefetch(대상 자원을 캐시하도록 지정) preload prerender prev(이전 문서 지정) search(검색 도구에 대한 링크) stylesheet (스타일시트 지정) |
필수사항으로 현재 문서와 연결된 문서의 관계 지정 |
rev |
reversed relationship |
HTML5에서는 지원 안함. 연결된 문서간 관계 지정 |
sizes |
Height*Width any |
연결된 리소스의 크기 지정 rel = "icon" |
target |
_blank _self _top _parent _frame_name |
HTML5에서 지원 안함. 연결된 문서에 호출의 위치 지정 |
type |
media_type |
연결된 문서의 미디어타입 지정 |
*crossorigin : http 접근제어 관련 규약
3. HTML DOM reference
1) html dom에서 link 객체는 html의 엘리먼트를 나타낸다.
2) 링크 객체에 접근하기
getElementById( )를 사용해 <link> 엘리먼트에 접근한다.
ex) var x = document.getElementById("myLink");
3) 링크 객체 만들기
document.createElement( ) 메서드를 사용해 <link> 엘리먼트를 만들 수 있다.
ex) var x = document.createElement("LINK");
4) 링크 객체 속성들
속성 |
설명 |
charset |
HTML5에 지원하지 않음. 연결된 문서의 문자인코딩을 설정하거나 반환 |
crossOrgin |
연결된 문서의 접근제어 세팅을 설정하거나 반환 |
disable |
연결된 문서가 비활성화 되었는지 여부를 설정하거나 반환 |
href |
연결된 문서의 URL을 설정하거나 반환 |
hreflang |
연결된 문서의 문자코드를 설정 또는 반환 |
media |
link 엘리먼트에 미디어 형식 설정 또는 반환 |
rel |
현재 문서와 연결 문서 간의 관계 설정 또는 반환 |
rev |
HTML5에서 지원하지 않음 연결 문서에서 현재 문서까지의 역관계 설정 또는 반환 |
sizes |
연결된 리소스의 크기 속성 값 반환 |
type |
연결 문서의 콘텐츠 형식 설정 또느 반환 |
참조.
'코딩' 카테고리의 다른 글
CSS 개요 (0) | 2020.03.28 |
---|---|
HTML Layouts (0) | 2018.12.27 |
HTML block and Inline Elements (0) | 2018.11.16 |
HTML <meta> tag (0) | 2018.11.05 |
javascript html dom (0) | 2018.11.05 |