<link> 태그란 무엇인가?
HTML에서 <link> 태그는 현재 문서와 외부 리소스 간의 관계를 정의하는 데 사용됩니다. 가장 대표적인 용도는 외부 스타일시트(CSS 파일)를 문서에 연결하는 것입니다.
<link> 태그는 반드시 <head> ... </head> 태그 사이에 작성해야 하며, 닫는 태그가 없는 빈(void) 요소입니다. 이 태그 안에서 연결하려는 외부 CSS 파일을 정의합니다.
href 속성으로 CSS 파일 연결하기
별도로 작성한 CSS 파일에는 모든 스타일 코드가 들어갑니다. 그리고 <link> 태그의 href 속성을 통해 해당 CSS 파일의 경로를 지정하면 됩니다.
아래 예제 코드를 직접 실행해 보면 HTML에서 외부 CSS를 적용하는 과정을 쉽게 이해할 수 있습니다. 여기서는 mystyles.css라는 CSS 파일을 링크하여 사용합니다.
예제 코드
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyles.css"> </head> <body> <h1>Heading</h1> <p>This is demo content.</p> </body> </html>
위 HTML 파일에서 링크된 CSS 파일 mystyles.css의 내용은 다음과 같습니다.
h1
{ color: green; }
p
{ font-size: 14px; }이처럼 <link> 태그 하나만으로 HTML 문서와 외부 스타일시트를 손쉽게 연결할 수 있으며, 코드의 유지보수성과 재사용성도 크게 향상됩니다.