HTML5 매뉴얼

8-3-2.재사용성 증가

구조를 기술하는 HTML 파일과 표현을 기술하는 CSS 파일을 완전히 분리해 놓으면 기획자와 디자이너의 분담 작업이 용이하다. 대규모의 사이트는 혼자서 개발하기 어렵고 통상 팀을 이루어 작업하는데 이런 상황에서는 작업 분담 편의성이 굉장히 중요하다. 한 파일에 코드가 섞여 있으면 동시에 편집하기 어렵지만 파일이 분리되어 있으면 각자 자기가 맡은 부분에 대해서만 작업한 후 합치면 된다.

또한 병렬 작업도 가능해서 프로젝트 기간과 비용을 대폭 절감할 수 있다. 작업 대상 파일이 다르므로 디자이너는 기획자가 내용을 다 만들 때까지 기다릴 필요가 없다. 마찬가지로 기획자도 디자인에 신경 쓸 필요없이 내용만 잘 작성하면 된다. 두 작업자가 연결하는 부분에 대해서만 합의하면 서로를 기다릴 필요없이 각자 작업을 진행할 수 있다.

스타일을 한번 잘 구축해 놓으면 다른 문서나 심지어 다른 프로젝트에도 재사용하기 쉬우며 스타일을 변경하기도 쉽다. 가령 앞에서 작성한 웹 페이지에 다른 스타일을 입힌다고 해 보자. 디자인과 관련된 코드가 외부 스타일 파일에 있으므로 이 파일만 수정하면 전체적인 분위기를 완전히 바꿀 수 있다. 기존의 extstyle.css의 사본을 만든 후 다음과 같이 수정한다.

extstyle2.css

@charset "utf-8";

body {

background:linear-gradient(0deg, #899bfe 0%, #eef1ff 100%);

}

h2 {

font-size:225%;

color:red;

border:5px solid blue;

border-radius:20px;

padding:10px;

background:yellow;

text-shadow:4px 4px 5px gray;

font-family:궁서;

box-shadow:5px 5px 5px 0px gray;

}

p {

font-size:1.2em;

font-family:serif;

text-align:justify;

text-indent:1.5em;

line-height:150%;

}

ul {

list-style-type:square;

line-height:150%;

}

li {

color:brown;

font-weight:bold;

}

갖가지 속성을 다 사용해 보았는데 차후 상세히 연구해 볼 것이므로 아직 이 내용을 다 이해할 필요는 없다. 예습하는 셈 치고 슬쩍 구경만 해 보자. 디자인을 바꾼 것이지 내용을 변경한 것은 아니므로 HTML 파일의 내용은 전혀 손댈 것이 없으며 <link> 태그의 스타일 파일 이름만 변경하면 그만이다.

linkstyle2.html

<!DOCTYPE html>

<html>

<head>

</head>

....

스타일 파일 이름 끝에 2자 하나만 더 넣었을 뿐이다. 문서의 내용은 그대로이되 다른 디자인을 적용했으므로 페이지의 전체적인 모양이 완전히 달라진다. 화면 배색, 제목의 테두리, 문단 정렬 방식, 글꼴 등 모든 것이 다 바뀌었다.

아주 간단한 문서임에도 스타일에 따라 느낌이 확 달라졌다. 여러 개의 스타일시트를 만들어 놓고 조건에 따라 선택적으로 적용할 수도 있다. 의미론적으로 영역을 분할해 놓은 사이트의 경우 분할 방식을 변경하면 레이아웃이 바뀌어 완전히 다른 사이트처럼 보이기도 한다. 실제로 사용자가 레이아웃을 선택할 수 있는 블로그 사이트도 많다.

스타일시트는 운영체제의 테마와 비슷한 역할을 하며 사용하는 방법도 비슷하다. 똑같은 데스트탑이라도 사용자가 선택한 테마에 따라 전체적인 분위기나 가독성, 기능성에 차이가 발생한다. 웹 페이지도 마찬가지로 똑같은 내용이지만 스타일시트에 따라 디자인이 완전히 바뀐다. 이런 것이 가능한 이유는 구조와 표현이 엄격하게 분리되어 있고 필요에 따라 자유롭게 결합할 수 있기 때문이다.