HTML 문서에 외부 스타일시트 파일을 포함하려면 <link> 요소를 사용합니다.
외부 스타일시트란?
외부 스타일시트는 확장자가 .css인 별도의 텍스트 파일입니다. 모든 스타일 규칙을 이 파일 안에 정의한 뒤, <link> 요소를 사용하면 어떤 HTML 문서에서든 이 파일을 불러와 적용할 수 있습니다.
이 방식의 가장 큰 장점은 하나의 CSS 파일만 관리하면 여러 페이지의 스타일을 일관되게 유지할 수 있다는 점입니다. 사이트 전체의 디자인을 수정할 때도 CSS 파일 하나만 고치면 되므로 유지보수가 매우 편리합니다.
스타일시트 파일 작성 예시
예를 들어, 다음과 같은 규칙이 담긴 new.css라는 간단한 스타일시트 파일을 만들어 보겠습니다.
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}위 코드는 문서 내의 h1, h2, h3 제목 태그에 대해 글자색(#36C), 글자 두께(normal), 자간(.4em), 아래쪽 여백(1em), 소문자 변환(lowercase) 등의 스타일을 한 번에 지정합니다.
HTML 문서에 스타일시트 포함하기
이제 작성한 new.css 파일을 HTML 문서에 다음과 같이 포함할 수 있습니다.
<head>
<link type = "text/css" href = "new.css" media = "all" />
</head><link> 태그 속성 살펴보기
- type: 연결된 파일의 콘텐츠 유형을 지정합니다. 스타일시트의 경우 항상
text/css를 사용합니다. - href: 불러올 CSS 파일의 경로(URL)를 지정합니다. 상대 경로 또는 절대 경로를 모두 사용할 수 있습니다.
- media: 스타일이 적용될 미디어(기기)를 지정합니다.
all은 모든 기기를 의미하며, 화면 출력에는screen, 인쇄에는print등으로 한정할 수도 있습니다.
참고로 최신 HTML5 표준에서는 type 속성을 생략해도 되며, <link rel="stylesheet" href="new.css">처럼 rel 속성과 함께 사용하는 것이 일반적입니다.