본문 바로가기
HTML, CSS /html

[html/css] 외부문서(css)를 연결하는 link 태그 사용법

by avvin 2019. 7. 10.

출처 : https://aboooks.tistory.com/147



<link> 태그는 외부의 문서를 연결시키는 태그


주로 css 파일 같은 스타일 시트 파일을 연결하거나, 웹 폰트를 사용할 때 폰트가 있는 주소로 연결시킬 수 있음



사용법


<link> 태그는 <head>와 </head> 사이에 위치

여러개 삽입 가능

html에서는 닫은 <link> 태그 없지만 xhtml에서는 <link rel ="stylesheet" type="text/css" href="sample.css"  />



link 태그와 함께 사용할 수 있는 속성


1. href


2. rel : 현재문서와 연결문서의 관계 표시


rel의 속성값


stylesheet : 스타일 시트로 연결할 때

alternate : 문서의 대안 버전 (프린트나 번역 사이트)으로 연결할 때

<link rel ="alternate" type="application/atom+xml" href="/print/atom"  />


author : 저작자로 연결할 때

help : 도움말로 연결할 때

license : 문서의 저작권 정보로 연결할 때

search : 검색도구로 연결할 때


3. type : 연결문서의 MIME 유형 (href 속성이 설정될 때만 사용)


 *MIME (Multioutpose Internet Mail Extensions)은 원래 전자메일 전송을 위한 인터넷 표준이었으나 

  현재는 웹에서 내용유형을 말할 때 자주 쓰임


css 파일의 경우 text/css

js파일의 경우 text/javascript

xml파일의 경우 application/xml


MIME 타입 전체보기>> https://www.sitepoint.com/mime-types-complete-list/



4. media : 연결문서가 표시될 장치 또는 미디어 유형


<link rel ="stylesheet" type="text/css" href="print.css" media="print">