1.2.6.1 CSS 기초 - CSS 템플릿 기본 구조

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

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

* 추천도서 : 쉽고 빠르게 익히는 CSS3

   - CSS에 대해 쉽게 설명을 한 책으로 '이상한 나라의 앨리스' 영문판으로 CSS가 어떻게 적용되는지 설명을 하고 있어 전자책 관점에서 CSS를 이해할 수 있다.

* 추천 사이트 : W3C CSS2 명세(한글 번역)   w3schools.com/CSS Tutorial

   - CSS는 W3C에서 표준을 제정하기 때문에 W3C 문서를 보는 것이 가장 정확하다. 하지만 W3C문서는 기술문서로 일반인이 이해하기 어렵고, 번역이 매끄럽지 못하다. w3schools는 CSS에 대해 튜토리얼과 레퍼런스로 구분해서 설명이 되어 있다. 필요한 속성의 쓰임과 속성에 적용할 수 있는 값을 쉽게 찾아볼 수 있다.

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

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

▶ 태그에 스타일 적용

p{

본문 스타일

}

<p>태그에 스타일을 적용하면 클래스를 추가하지 않아도 되기 때문에 편집이 편하다.</p>

<p>태그에 스타일을 적용하면 클래스를 추가하지 않아도 되기 때문에 편집이 편하다.</p>

▶ 클래스에 스타일 적용

txt_main {

본문 스타일

}

<p class="txt_main">태그에 스타일을 적용하면 클래스를 추가하지 않아도 되기 때문에 편집이 편하다.</p>

<p class="txt_main">태그에 스타일을 적용하면 클래스를 추가하지 않아도 되기 때문에 편집이 편하다.</p>

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

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

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

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

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

▶CSS 템플릿 기본 구조 예시

* {

/*공통 스타일

문서 전체에 공통으로 적용되는 여백, 줄간격, 문단정렬 등*/

}

h1{

/*부 제목 스타일*/

}

h2{

/*장 제목 스타일*/

}

h3{

/*절 제목 스타일*/

}

p{

/*본문 스타일*/

}

cite{

/*짧은 인용문이나 주석 스타일

p태그 안에서 사용*/

}

blockquote{

문장 인용

}

strong {

/*단어나 문장의 강조

p태그 안에서 사용*/

}

sup{

/*윗첨자

p태그 안에서 사용*/

}

sub{

/*아랫첨자

p태그 안에서 사용*/

}

/*필요에 따라 클래스 추가*/

aside{

/* 주석 스타일. EPUB3를 지원하지 않는 뷰어에서는 사용할 수 없음 */

}

.txt_center {

text-align:center;

text-indent: 0px; !important /* 강제로 들여쓰기를 하지 않음 */

}

.txt_left {

text-align:left;

text-indent: 0px; !important /* 강제로 들여쓰기를 하지 않음 */}

}

.txt_right {

text-align:right;

text-indent: 0px; !important /* 강제로 들여쓰기를 하지 않음 */

}

.img_left {

float:left; /* 이미지를 문단의 왼쪽에 배치 */

}

.img_right {

float:right; /* 이미지를 문단의 오른쪽에 배치 */

}