HTML5 매뉴얼

8-2-3.외부 스타일

HTML 파일의 <head> 섹션에 <style> 태그를 작성하는 방식을 내장형이라고 한다. HTML 문서 안에 스타일시트가 내장되어 있다는 뜻이다. 특정한 한 문서를 위한 스타일시트라면 문서 안에 내장하는 것이 가장 간편하고 관리하기도 쉽다.

이에 비해 스타일시트를 별도의 파일로 분리해 놓고 HTML 문서에서 연결하여 사용하는 방식을 외장형 스타일시트라고 한다. <style> 태그에 들어갈 내용만 외부 파일에 따로 기술하는 방식이다. 두 개의 파일을 만들어야 하므로 당장은 번거롭지만 여러 HTML 파일에 일관된 스타일을 적용하기 쉽고 재사용에도 유리하다는 장점이 있다.

스타일 파일은 확장자 css로 작성하며 <style> 태그없이 스타일 지정문만 나열한다. 앞 예제에서 작성했던 스타일시트를 외부 파일로 분리해 보자. 별도의 파일을 새로 만들고 스타일 지정문을 작성한 후 extstyle.css라는 이름으로 HTML 문서와 같은 디렉토리에 저장한다.

extstyle.css

@charset "utf-8";

body { background:yellow; }

h2 { font-size:225%; color:green; text-align:center; }

p { text-align:justify; }

li { font-size:80%; color:red; font-weight:bold; }

HTML 문서와 마찬가지로 스타일시트도 문자셋 지정이 필요하다. @charset 다음에 사용한 문자셋을 밝힌다. 문서를 읽기 전에 최우선적으로 문자셋을 파악해야 하므로 @charset은 어떤 스타일보다 먼저 와야 한다. 세계적인 추세에 따라 스타일시트도 UTF-8 인코딩을 적용하기로 한다. 그러나 사실 영문만 사용하는 상태에서는 UTF-8과 ANSI는 완벽하게 호환되는 인코딩이어서 생략해도 큰 문제는 없다.

외부에 존재하는 리소스를 HTML 문서에 연결할 때는 <link>태그를 사용한다. HTML 문서에 포함시킬 수 없는 이진 파일이나 재사용을 위해 여러 문서에서 공유하는 파일이 <link> 태그로 연결된다. <head> 태그 아래에 작성하되 필요한 만큼 여러 번 사용할 수 있다. 주요 속성은 다음과 같다.

속성	설명
href	연결된 문서의 주소이다.
rel	연결된 문서와 현재 문서의 관계를 지정한다.
type	연결된 문서의 형식을 지정한다.
sizes	아이콘의 크기를 지정한다.
media	문서를 연결할 장치를 지정한다.

href 속성으로 연결할 문서의 주소를 지정한다. 같은 디렉토리에 있으면 파일명만 지정하며 다른 디렉토리에 있으면 상대 경로로 지정한다. rel 속성은 어떤 종류의 문서인지를 지정하는데 굉장히 종류가 많다. 자주 사용하는 값만 도표로 정리했다.

값	설명
stylesheet	외부 스타일시트이다.
icon	문서의 아이콘을 지정한다.
author	문서의 저자에 대한 정보이다.
help	문서에 대한 도움말이다.
alternate	현재 문서에 대한 대체 문서이다. 예를 들어 다른 언어로 작성된 문서를 연결한다.
license	문서에 대한 라이선스 정보이다.
prefetch	필요한 리소스를 미리 로드한다.

아이콘이나 미리 읽어둘 이미지 파일도 연결할 수 있지만 <link> 태그의 가장 실용적인 사용예는 외부 스타일시트를 연결하는 것이다. 외부 스타일 파일을 불러 오려면 rel 속성에 stylesheet라고 적고 href에 css 파일의 이름을 적는다. 과거에는 type 속성에 "text/css"라고 적기도 했으나 지금은 스타일이 CSS로 통일되어 그럴 필요가 없다.

linkstyle.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>인터넷이란</h2>

<p>인터넷은 네트워크를 연결한 거대 네트워크로서 전세계의 컴퓨터를

연결한다. 인터넷에 연결된 컴퓨터는 언제 어디서나 원하는 정보에 액세스할

수 있다. 인터넷 기반으로 여러 가지 서비스가 개발되어 있다.</p>

<ul>

<li>웹 - 하이퍼텍스트 기반의 문서 공유 서비스이다.</li>

<li>FTP - 파일 전송 프로토콜을 이용한 파일 교환 서비스이다.</li>

<li>email - 전자 우편 시스템이다.</li>

</ul>

<p> 인터넷 서비스 중 가장 인기있는 것은 웹이다. 그래픽 환경에서

마우스로 링크를 눌러 원하는 정보를 쉽게 찾을 수 있어 요즘은 웹이 곧

인터넷이라고 할 수 있다. 웹 기술의 표준은

</body>

</html>

스타일시트의 위치만 다를 뿐이지 내용은 같으므로 실행 결과는 내장형으로 작성한 것과 완전히 동일하다. 브라우저는 외부의 스타일 파일을 읽어 HTML 문서에 스타일을 적용한다. 이 스타일을 다른 페이지에도 일관되게 적용하고 싶다면 HTML 문서에 <link> 태그만 작성하면 된다. 이후 스타일 파일을 수정하면 연결된 모든 문서의 스타일이 일괄 변경되므로 관리하기도 쉽다.