내맘대로의 EPUB 제작 가이드

CSS는 하나의 선택자에 여러개의 속성을 정의한 스타일의 묶음이다. 그리고 이 스타일의 묶음을 하나의 파일로 묶어 CSS 파일을 만들 수 있다. CSS 파일로 만든 스타일의 묶음을 앞으로는 CSS 템플릿이라고 하겠다. CSS 템플릿은 하나만 만들어 두면 모든 전자책에 사용할 수 있다. 문학전집처럼 같은 유형의 책이면 편집 스타일이 비슷하기 때문에 템플릿 하나로 동일한 편집 스타일을 유지하며 작업할 수 있고, 소설과 인문처럼 분야가 다르더라도 책의 구성 요소는 크게 차이나지 않아 스타일 속성만 변경하면 전혀 다른 느낌의 편집을 적용할 수 있다.

CSS 속성은 종류가 170가지가 넘어 모두 설명하기는 어렵다. 여기에서는 전자책 편집에서 많이 쓰이는 CSS를 중심으로 설명하고 여기서 설명하지 않은 속성이 필요하다면 책이나 w3c 등 웹사이트를 참고하기 바란다.

CSS를 만드는데 정해진 규칙은 없다. 기술적으로 문제가 없다면 만드는 사람이 원하는 형태로 만들면 된다. 혼자 사용하는 CSS라면 어떤 형태로 만들어도 문제되지 않는다. 하지만 템플릿 형태로 CSS를 만들어 반복해서 사용하거나 여러사람이 공동으로 사용하는 CSS라면 최대한 이해하기 쉽게 만들어야 한다. 

전자책을 편집할 때 가장 많이 사용하는 태그는 제목에 쓰이는 <h1> ~ <h6>과 <p>태그다. 이 외에 주석이나 설명을 위한 스타일이 필요하다면 이 역시 태그를 이용하는게 좋다. 많은 EPUB 편집자들이 태그보다는 클래스를 많이 사용한다. 하지만 클래스를 사용하려면 태그 내에 클래스를 적용해야 하기 때문에 편집이 불편하고 문서가 복잡해진다. 태그에 스타일을 적용할 수 있다면 클래스 보다는 태그를 사용하는게 좋다.

▶ 태그에 스타일 적용

▶ 클래스에 스타일 적용

위 예에서 볼 수 있듯이 태그에 스타일을 적용하면 태그만 사용해도 스타일이 적용된다. 문서도 간결해지고 편집하기도 편하다. 하지만 클래스로 스타일을 적용하면 문단의 수만큼 태그에 클래스를 지정해야 하기 때문에 편집하는데 시간이 오래 걸리고 문서가 복잡해진다. 

편집이 아주 복잡한 책이 아니라면 스타일이 많을 필요가 없다. 대부분의 책은 본문, 단어나 문장의 강조, 단어나 문장의 인용, 문단의 인용, 첨자 정도로 구성돼 있다. 여기에 문서 전체의 공통 스타일, 왼쪽/오른쪽/가운데 정렬, 주석, 글자색 등 책에 따라 필요한 몇가지 클래스만 추가하면 기본 CSS가 완성된다. 

클래스 이름은 용도를 한눈에 파악할 수 있게 쉽고 명확하게 작성해야 한다. 클래스 이름을 't_0001'로 만들었다면 클래스 이름만 보고 용도를 알 수 없다. 'text_align_center'로 클래스 이름을 만들면 명확하기는 하지만 이름이 너무 길어 클래스를 적용하기 불편하다. 'txt_center' 혹은 'txt_c', 'txt_l', 'txt_r' 등 규칙을 정해 이름을 만들면 이해도 쉽고 간결하게 사용할 수 있다. 

참고로 클래스 이름은 영문으로 시작해야하고 숫자를 사용할 수 있으며 공백은 포함하지 않아야 한다. 

스타일시트에 설명이 필요할 경우 /* ... */로 설명을 추가할 수 있다. /* ... */ 사이에 있는 내용은 문서에 아무런 영향을 주지 않는 설명을 위한 코드다. 

▶CSS 템플릿 기본 구조 예시

선택자를 정했다면 이제 선택자에 스타일을 적용해야 한다. CSS에서는 스타일을 적용하는 수십가지 속성이 있고, 각 속성별로 적용할 수 있는 값이 정해져 있다. 예를 들어 글자 크기를 지정하고 싶다면 font-size의 속성을 선택하고 원하는 크기(값)를 정의하면 된다.

속성은 글자, 색, 테두리, 여백, 위치 지정 등 다양한 속성이 정의되어 있으며 하나의 선택자에 여러개의 속성을 지정할 수 있다. 

속성에 따라 속성의 값은 달라진다. 그리고 하나의 속성에 여러 형태의 값이 있을 수 있다. font-size에는 em, %, px 등 일정 비율로 텍스트의 크기를 지정하는 속성이 올 수 있고, small, medium, large, x-large 처럼 특정 사이즈를 지정하는 값도 올 수 있다.

값은 속성의 특성에 따라 형태가 달라진다. 글자 크기(font-size) 속성이라면 값은 1em, 100%, 20px처럼 크기를 나타내는 숫자가 오고, 글자 색 속성이라면 blue, red, white, #FF00FF, rgb(255,0,255) 같은 색과 관련된 값이 올 수 있다. border-style처럼 선과 관련된 속성에는 solid, dotted, hidden 같이 선과 관련된 단어가 올 수 있으며 이런 단어들은 속성별로 정해져 있다.

하나의 속성에 여러개의 값이 올 수도 있다.

테두리를 구성하는 요소는 선의 두께, 종류, 색 등이 복합적으로 표현되야 한다. 이런 속성은 각 요소에 해당하는 값을 한번에 지정할 수 있다. 여러 값을 한번에 지정하려면 각 값을 공백으로 구분해 준다. 이렇게 한번에 여러개의 값을 가질때는 몇가지 값을 무시해도 된다. {border : 5px dotted red;}는 5픽셀의 빨간색 점선이 그려지고, {border : 5px dotted;}는 5픽셀의 점선(기본 색은 검정)이 그려진다. 하지만 선의 스타일(dotted) 값을 무시하면 다른 속성이 표현되지 않는다. 그리고 이런 속성은 대부분 각 요소에 해당하는 속성을 구분해서 지정할 수 있게 되어 있다.

CSS 스타일은 선택자와 스타일 속성, 그리고 속성에 대한 값으로 이루어진다. 이중 선택자는 스타일 속성의 묶음이다. 선택자 하나에 여러 스타일 속성-글자크기, 여백, 색, 테두리 등-을 지정할 수 있으며 문서에서는 이 선택자를 이용해 글자나 문단에 스타일을 적용할 수 있다. (CSS 기본 구조 참고)  선택자는 태그, 클래스, ID, 그룹 등 여러 방식으로 지정할 수 있다.

1. 태그 선택자

    - 태그를 선택자로 사용하면 HTML 태그 스타일을 변경할 수 있다. 예를 들어 <h1>태그의 기본 글자 크기와 줄간격은 뷰어에 따라 정해져 있다. 그런데 CSS 파일에서 <h1>태그에 스타일을 적용하면 본문에서 <h1> 태그에 아무런 스타일을 지정하지 않아도 CSS에서 지정한 스타일이 적용된다. 

CSS 스타일 시트를 만들때 h, p 태그 등 많이 사용하는 태그는 태그 선택자로 스타일을 적용해 두면 태그별로 스타일을 지정할 필요가 없기 때문에 편집하는데 시간을 절약할 수 있다. 모든 태그에 스타일을 지정할 수 있으며 동일한 스타일이 반복되는 텍스트 관련 태그(p, hx, cite, strong 등)에 스타일을 지정하면 편하게 사용할 수 있다.

2. 클래스 선택자

    - CSS에서 가장 많이 사용하는 선택자이다. 태그 선택자는 지정된 태그 명을 사용해야 하지만 클래스 선택자는 클래스의 이름을 성격에 맞게 정할 수 있다.(단, 영문과 숫자를 권장한다) 예를 들어 이미지와 관련된 클래스라면 앞에 img를, 텍스트와 관련된 클래스라면 txt를 붙이는 식이다. 이미지 편집을 위해 왼쪽정렬, 오른쪽 정렬, 가운데 정렬을 많이 사용한다면 img_left, img_right, img_center 처럼 클래스의 쓰임에 따라 이름을 지정하면 된다. 

클래스를 지정하려면 .(점dot)을 찍고 클래스 이름을 쓴 후 스타일을 지정하면 된다. 클래스 이름은 사용자가 해당 클래스의 쓰임을 쉽게 파악할 수 있게 지정하는게 좋다. 

.class_name { 스타일  }

클래스를 태그에 사용하기 위해서는 class라는 속성을 사용한다.

<p class="class_name">내용</p> 

3. 태그에 종속된 클래스

    - 클래스는 특정 태그에 종속된 형태로 사용할 수도 있다. <p> 태그와 <h1> 태그에 가운데 정렬을 적용하고 싶은데 <p> 태그는 글자 색을 빨간색으로, <h1>태그는 글자 색을 파란색으로 하고 싶다고 하자. 이럴때 클래스 명을 center로 지정하면서 <p>태그와 <h1>태그에 서로 다른 스타일이 적용되도록 할 수 있다. 

태그.class_name { 스타일  }

4. 그룹 선택자

    - 태그나 클래스에 동일한 스타일을 적용할 경우 그룹으로 묶을 수 있다. 만약 h1, h2, h3에 동일한 스타일을 적용하고 싶다면 각 태그에 스타일을 적용할 수도 있지만 그룹으로 지정해서 한번에 스타일을 적용할 수 있다. 그룹으로 선택자를 지정하려면 선택자를 ,(콤마)로 구분해서 나열한 후 스타일을 지정한다.

h1, h2, h3 { 공통 스타일 }

5. ID 선택자

    - ID 선택자는 클래스 선택자와 유사하지만 스타일을 적용할 때 class 대신 ID를 사용한다. 하나의 ID는 문서 내에서 반드시 한번만 사용할 수 있다. ID는 특정 위치로 이동하거나 특정 단어의 주석을 연결해 주는 역할을 하기 때문에 동일한 ID가 한 문서에 하나 이상 사용될 수 없다. 그래서 ID 선택자는 많이 사용하지 않는다. ID 선택자는 선택자 이름 앞에 #을 붙이고, 반드시 영문으로 시작해야 한다.

#selector_name { 스타일 }

<p ID="selector_name"> 내용 </p>

**

ID는 문서 내에 특정 위치나 특정 내용을 연결할 때 사용한다. 그렇기 때문에 하나의 단락에는 하나의 ID만 사용할 수 있다. 다만 해당 내용을 참고하거나 그 위치로 이동하는 링크에는 여러번 사용 가능하다.

인라인 스타일은 HTML 태그에 직접 스타일을 적용하는 방식이다. 여러개의 스타일이 중복 적용될 경우 인라인 스타일이 우선시 되는 장점이 있지만, 많은 단점이 있어 특별한 경우가 아니라면 권장하지 않는다. 인라인 스타일을 적용하게 되면 다음과 같은 문제점이 발생한다.

1. 태그별로 스타일을 지정해 줘야 한다.

    - 모든 태그에 스타일을 개별적으로 지정해 줘야 하기 때문에 편집 시간이 오래 걸리고 문서가 복잡해진다. 뷰어에서 로딩시간이 오래 걸리고 오류가 자주 발생한다. 또한 문서의 용량이 커지기 때문에 동일한 내용이라면 외부 스타일을 사용한 문서보다 용량이 커진다. 

2. 스타일을 변경하기 위해서는 모든 태그를 수정해야 한다.

    - 본문은 동일한 스타일이 적용된 여러 단락으로 되어 있다. 한 책에 수백에서 천개 이상의 단락이 있는데 인라인 스타일을 사용했다면 편집을 바꾸기 위해 모든 단락을 수정해야 한다. 그리고 문서를 수정해야 할 때 스타일이 어떻게 적용됐는지 파악하기 어렵다. 외부 스타일을 사용했다면 css파일을 보고 문서의 스타일을 한눈에 파악할 수 있으며, 수정을 할 때도 하나만 고치면 된다.

3. 스타일의 일관성을 유지하기 어렵다.

    - 인라인 스타일은 단락별로 스타일을 지정해야 하기 때문에 스타일이 여러개 있을 경우 일관성을 유지하기 어렵다. 인라인 스타일을 적용한 문서 중에는 본문 글씨 크기가 챕터별로 1.2em, 1.0em, 1.3em 등 서로 다른 경우가 많다. 그리고 주석, 인용, 참고 등 서로 다른 스타일을 적용할 때도 챕터별로 다른 스타일을 적용해서 일관성이 유지되지 않는 경우가 많다. 

4. 스타일이 변경되지 않는다.

    - 이는 뷰어에 따라 다를 수 있지만, 인라인 스타일을 적용하면 웹킷 기반의 뷰어에서는 스타일이 변경되지 않을 가능성이 높다. 사용자가 뷰어 설정에서 글꼴이나 글자 크기를 바꾸더라도 인라인 스타일이 적용된 단락은 변경되지 않는다. 태블릿, 스마트폰, 전자잉크(EPD)를 사용한 전용 단말기 등 다양한 전자책 독서 환경에서 스타일이 변경되지 않는다면 사용자의 불편을 초래할 수 있다.

4번은 단점이기도 하지만 인라인 스타일이 필요한 이유이기도 하다. 인라인 스타일은 CSS적용 순서에서 가장 상위에 있기 때문에 스타일이 중복되더라도 우선 적용된다. 예를 들어 외부 스타일에서 글자 크기를 1em으로, 내부 스타일에서 글자 크기를 2em으로, 인라인 스타일로 글자크기를 3em으로 적용하고, 뷰어 설정에서 사용자가 글자크기가 1.5em으로 적용했다면 최종 결과물은 인라인 스타일의 글자크기 3em이 된다.(단, 뷰어에 따라 사용자 스타일이 우선 적용될 수 있다) 따라서 스타일 자체가 본문의 내용을 설명하는데 중요한 역할을 한다면 인라인 스타일을 사용할 수 있다.

기본 문법

인라인 스타일은 여는 태그 뒤에 style 속성을 사용해서 적용할 수 있다. style 속성 뒤에 " "(따옴표)로 묶어 여러개의 스타일 속성을 ;(세미콜론)으로 구분해서 지정할 수 있다. 

스타일 적용 예

인라인 스타일은 특별한 경우가 아니라면 사용하지 않아야 한다. 하지만 대부분의 전자책 편집기는 인라인 스타일로 스타일을 지정하고 있다. 코드 방식을 동시에 지원하지만 WYSIWYG 방식이 편집하기 편하기 때문에 HTML이나 CSS를 모르는 편집자라면 편집기에서 기본 제공하는 편집 기능을 사용하게 되는데 이 방식은 대부분 인라인 스타일이 적용된다. 

인라인 스타일이 적용되면 뷰어에서 로딩 속도가 오래 걸리거나 오류가 발생하기 쉽고 문서 용량도 크게 증가한다. 문서의 편집 상태를 한눈에 파악하기 어렵고 수정하는데 시간이 오래 걸리기 때문에 문서편집기를 이용하더라도 WYSIWYG 방식을 지원하는 편집기라도 코드 방식을 권한다.

* 요청이 있어 mp3파일의 구간 재생 및 컨트롤러 디자인 변경하는 스크립트를 올립니다*

스크립트를 모르는 분이라면 아래 코드를 그대로 사용하셔도 됩니다. 아래 코드를 어떻게 사용해야 하는지 이해가 안가신다면 쪽지를 남겨주세요.

EPUB3로 책을 제작할 때 오디오나 동영상을 가장 많이 삽입하는 것 같습니다. 오디오 삽입은 아주 간단합니다. 아래 코드처럼 오디오 파일을 삽입하면 간단한 컨트롤러까지 자동으로 나타나게 됩니다. 

위의 예는 HTML5에서 기본으로 제공하는 코드로 어떤 것을 사용해도 동일합니다. 위 코드를 사용하면 자동으로 아래와 같은 컨트롤러가 나타납니다. 컨트롤러는 실행과 일시정지, 소리조절을 할 수 있으며 진행율이 표시됩니다. 화면이 작을 경우에는 자동으로 화면에 맞춰 소리 조절이나 진행율이 사라지기도 합니다. 

* 기본 오디오 컨트롤러*

** 샘플은 단순 이미지로 실제 플레이는 되지 않음**

하지만 책을 만들다 보면 보다 다양한 디자인이 필요할 수 있습니다. 그리고 기본 오디오 컨트롤러를 이용하면 처음부터 끝까지 실행이 되기 때문에 어학교재처럼 특정 구간을 들어야 할 때는 구간별로 오디오 파일을 만들어 수십개, 수백개의 오디오 파일을 각각 지정을 해야합니다. 

이럴 때 스크립트를 사용해 컨트롤러를 수정할 수 있습니다. 스크립트를 사용하면 아래처럼 플레이 버튼의 모양을 변경한다던가, 볼륨 조절 버튼을 추가할 수도 있고, mp3파일 하나만 넣고, 1/100초 단위로 조정을 해가며 원하는 위치만 플레이를 시킬 수 있습니다. 

* 스크립트로 컨트롤러 변경 & 원하는 위치 플레이 *

** 샘플은 단순 이미지로 실제 플레이는 되지 않음**

위 이미지를 보고 '기본 컨트롤러가 더 깔끔하잖아' 하고 얘기하실 분은 없으시리라 생각하겠습니다. 이정도 이해력은 있어야 아래 내용을 이해할 수 있을 테니까요. 위 코드를 만든 스크립트를 하나씩 설명해 드리겠습니다. 설명을 보시고 코드를 이해하신다면 어학교재 처럼 오디오 파일을 많이 삽입해야 할 때 큰 도움이 될거에요.

먼저 오디오를 삽입합니다. 기본 코드를 사용하지만 컨트롤러(controls="controls")를 추가하지 않았습니다. 이렇게 하면 화면에 컨트롤러가 나타나지 않기 때문에 오디오 파일이 들어간 위치에 아무것도 표시되지 않습니다. 대신 컨트롤러를 조작하기 위해 id="sample1"이라고 오디오의 ID를 지정했습니다. 한 페이지에서 여러개의 오디오가 들어갈 경우 각각의 컨트롤러는 이 ID를 참고해서 어떤 오디오 파일을 실행시켜야 하는지가 결정됩니다.

이 부분은 컨트롤러를 어떻게 변경하는지 보여주는 샘플입니다. 우선 스크립트에 해당하는 onclick="palyAll()" 부분은 나중에 설명을 하고, <button>태그부터 설명하겠습니다. <button>태그는 글자 그대로 버튼을 만들어 주는 태그입니다. 오디오나 비디오로만 쓸 수 있는게 아니라 다양한 스크립트의 실행 버튼으로 사용될 수 있습니다. 이 태그를 사용하면 자동으로 버튼이 그려지고 태그 사이에 들어있는 내용이 버튼 위에 표시됩니다. 

'버튼 이름'이 들어갈 부분에 원하는 플레이 버튼을 넣거나 이미지를 삽입할 수 있습니다. 이미지는 버튼 태그 사이에 <img src="url"/>로 삽입을 하면 됩니다. 이미지를 이용하면 기본 플레이 버튼보다 다양한 표현이 가능하기 때문에 편집을 할 때 편집자의 의도에 따라 다양한 디자인을 적용할 수 있게 됩니다. 

이제 스크립트를 설명하겠습니다. 스크립트는 각각이 어떻게 작동하는지까지 설명을 하려면 많이 복잡하기 때문에 아래 스크립트를 어떻게 사용하는지를 중심으로 설명을 하겠습니다. 

<button onclick="function">버튼이름</button>에서 onclick은 클릭 버튼을 의미합니다. function은 버튼을 눌렀을 때 실행할 기능이 들어갑니다. 위 코드에서는 오디오의 시작 시간을 0으로(myAudio.currentTime=0;) 해서 실행(myAudio.play();)하라는 기능이 playAll()이라는 function에 담겨있다는 의미(function playAll())입니다. 

따라서 버튼을 클릭하면 playAll()에 담겨져 있는 기능, 처음부터 오디오 파일을 실행하게 되겠지요.

다른 기능도 동일합니다. playStop()은 실행 시간을 0으로 다시 돌려 놓고, 파일을 정지하게 됩니다. 만약 실행 시간을 0으로 돌리지 않으면 일시정지가 됩니다. 일시정지가 필요한 분들은 아래처럼 pause 버튼을 만들 수 있습니다. 

볼륨 버튼은 0.2단계씩 볼륨을 올리거나 내릴 수 있습니다. 여기서 볼륨은 기기의 하드웨어 볼륨이 아닙니다. 기기의 하드웨어 볼륨 범위 내에서 조절되기 때문에 최대 크기는 기기의 볼륨 버튼으로 설정한 크기를 넘어설 수는 없습니다. 볼륨은 0부터 1 사이에서 조정이 가능한데, 아래 스크립트에서는 0.2씩 5단계로 볼륨을 조절할 수 있습니다. 더 세밀한 볼륨 조절이 필요하다면 0.1 등으로 변경을 하면 됩니다. 

끝으로 가장 복잡한 부분인 재생 구간 설정입니다. 위에서 설명한 것 처럼 아래 버튼을 누르면 playSegment(3,8)이라는 기능이 실행됩니다. 이 기능은 3초 ~ 8초 사이를 실행시키라는 기능이 들어가 있습니다. 스크립트에 대한 설명은 넘어가겠습니다. 스크립트를 아는 분이라면 설명 안해도 이해할테고, 스크립트를 모르는 분이라면 설명을 해도 이해가 어려우실테니...

구간 플레이가 필요한 mp3등 오디오 파일을 아무 플레이어에서든 실행시키면 원하는 구간이 몇초에 있는지 확인할 수 있습니다. 어학용 플레이어라면 1/100초 단위로도 확인이 가능하겠지요. 이런 플레이어로 원하는 구간의 시작 시간과 끝나는 시간을 확인합니다. 만약 시작 시간이 3.5초~ 8.5초라면 playSegment(3.5,8.5)처럼 소수점으로 표시할 수 있습니다. 

만약 문장 암기 방식의 어학교재를 만들고 있고, mp3 하나에 암기 문장이 모두 들어가 있다면 mp3를 하나씩 자를 필요 없이 문장의 시작과 끝 위치만 확인해서 문장별 음성을 들을 수 있게 책을 만들 수 있게 됩니다. 

스크립트를 모르는 분이라면 아래 코드를 그대로 사용하셔도 됩니다. 아래 코드를 어떻게 사용해야 하는지 이해가 안가신다면 쪽지를 남겨주세요.

# 스크립트 샘플

외부 스타일은 내부 스타일과 스타일을 만드는 방식은 동일하다. 다른 점은 내부 스타일은 HTML파일 안에 스타일이 정의되지만 외부 스타일은 별도의 CSS파일을 만든다는 점이다. [파일명.css] 처럼 .css 확장자가 붙은 스타일 파일을 만들고, 이 파일을 HTML 파일 안에 링크를 걸어 사용한다. 1.2.4장에서 설명했던 스타일은 외부 스타일로 아래처럼 적용할 수 있으며 내부 스타일과 동일한 결과가 적용된다. 

파일명 : style.css로 저장

css sample_외부 스타일.zip

HTML 문서의 헤더 사이에 있던 스타일을 style.css라는 파일로 만들어 별도로 저장하고, HTML 문서에는 별도로 저장한 CSS 파일을 링크로 연결했다. 

<link href="style.css" rel="stylesheet" type="text/css" />

이렇게 하면 HTML 문서는 더 간결해진다. 그런데 문서를 간결하게 만들자고 파일을 두개로 나눌 필요가 있을까?

외부 스타일을 만드는 이유는 문서를 간결하게 정리하는데 있는게 아니다. 문서가 간결해 지는 것 외에도 아무 많은 이점이 있다.

1. 외부 스타일을 적용하면 문서가 간결해 진다.

    - 1.2.4장의 내부 스타일 예제와 위의 예제를 비교해 보면 쉽게 이해할 수 있다. HTML 문서 내에 CSS가 들어가지 않는 것만으로도 문서가 훨씬 간결해진다.

2. 문서 내용을 여러개의 HTML 파일로 나누더라도 일관된 스타일을 적용할 수 있다.

    - 내부 스타일을 적용하면 같은 내용이라도 스타일이 여러번 정의된다. 편집을 하다 보면 스타일을 수정하게 될 때가 있는데 HTML 파일을 하나씩 모두 수정해야 하는데 이런 과정을 반복하다 보면 스타일이 틀어지게 된다. 하지만 CSS파일을 사용하면 CSS 파일 하나만 수정하게 되고, 수정된 내용이 모든 HTML 파일에 적용되어 스타일이 항상 일관되게 유지된다. 

3. CSS 스타일만 수정하면 모든 문서에 수정된 내용이 반영되기 때문에 편집이 쉬워진다.

   - 각 챕터별로 HTML 파일로 나눠진 10개의 챕터로 된 책이 있다고 하자. 챕터의 제목을 다른 스타일로 바꿔야 할 경우 내부 스타일은 10번을 작업해야 한다. 하지만 CSS를 이용하면 한번의 작업으로 10개의 챕터를 모두 수정할 수 있다.

4. 문서의 양이 줄어들고 뷰어의 성능을 높일 수 있다.

   - 뷰어는 문서를 열 때마다 스타일을 분석한다. 뷰어에서 가장 많은 부하가 걸리는 부분 중 하나가 이 스타일을 분석하는 작업이다. CSS를 이용하게 되면 뷰어는 한번만 스타일을 분석하면 되는데 내부 스타일을 이용하면 모든 스타일이 동일하더라도 챕터를 열 때마다 스타일을 분석하기 때문에 챕터가 열리는 속도가 느려질 수 있다.

5. 누구나 쉽게 스타일을 이해하고 편집할 수 있다.

   - CSS로 스타일을 정리해 놓으면 책이 어떻게 편집됐는지 이해하기 위해 CSS 파일만 분석하면 된다. 모든 HTML 파일을 열어볼 필요 없이 CSS 파일만 확인하면 스타일이 어떻게 적용됐는지 확인할 수 있기 때문에 편집자가 바뀌더라도 스타일을 쉽게 수정할 수 있다.

6. 재활용이 가능하다.

   - 출판사마다 고유의 편집 스타일을 갖고 있다. 그리고 분야별로 적용하는 스타일이 다르다. CSS를 이용하면 스타일을 템플릿화 시킬 수 있어 책에 일관된 스타일을 적용할 수 있게 된다. 책을 만들 때마다 새로 스타일을 조정할 필요 없이 CSS 파일로 정리된 스타일을 적용하기만 하면 된다. 물론 책의 내용에 따라 세부적인 스타일을 적용해야 한다면 그 책의 CSS 파일을 수정하면 된다. 또한 소설, 여행, 인문 등으로 템플릿을 만들어 관리한다면 성격이 다른 분야에 다른 스타일을 적용할 수 있기 때문에 편집 시간을 크게 줄일 수 있다.

이 외에도 외부 스타일의 장점은 많이 있지만 이정도만 해도 외부 스타일을 사용해야 하는 이유로 충분하리라 생각한다.