<link> 태그로 리소스 참조 추가하기
HTML에서 외부 리소스(예: CSS 스타일시트)를 참조하려면 <link> 태그를 사용합니다. 이 태그는 외부 문서와의 연결을 정의하는 역할을 하며, 반드시 문서의 <head> 섹션 안에 위치해야 합니다.
대표적인 활용 예는 외부 CSS 파일을 불러오는 것으로, 이를 통해 HTML 구조와 디자인을 분리하여 관리할 수 있습니다.
<link> 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| charset | charset | 링크된 문서의 문자 인코딩을 정의합니다. |
| href | URL | 참조할 리소스 문서의 URL을 지정합니다. |
| hreflang | language | 대상 URL의 언어 코드를 나타냅니다. |
| media | screen tty tv projection handheld braille aural all | 문서가 표시될 장치(미디어 타입)를 지정합니다. |
| rel | alternate appendix bookmark chapter contents copyright glossary help home index next prev section start stylesheet subsection | 현재 문서와 대상 URL 사이의 관계를 설명합니다. |
| rev | alternate appendix bookmark chapter contents copyright glossary help home index next prev section start stylesheet subsection | 대상 URI와 현재 문서 사이의 역방향 관계를 설명합니다. |
| sizes | HeightxWidth | 연결된 리소스의 크기를 지정합니다. |
| target | blank _self _top _parent | 페이지를 로드할 대상 프레임을 지정합니다. |
| type | mimetype | 링크 대상 콘텐츠의 MIME 유형을 나타냅니다. |
예제
다음 코드를 실행하면 HTML에서 리소스 참조를 추가하는 방법을 직접 확인할 수 있습니다. 아래 예제는 rel="stylesheet" 속성을 사용해 외부 CSS 파일(stylenew.css)을 문서에 연결합니다.
<!DOCTYPE html> <html> <head> <title>HTML link Tag</title> <link rel = "stylesheet" href = "stylenew.css"> </head> <body> <div id = "contentinfo"> <p>Welcome to our website. We provide tutorials on various subjects.</p> </div> </body> </html>