내맘대로의 EPUB 제작 가이드

1.2.2. CSS의 기본 구조

CSS는 HTML 태그나 클래스에 표현하고 싶은 스타일을 정의한다. 스타일을 지정받게 될 태그나 클래스를 선택자(Selector)라고 하고, 선택자 뒤에 지정할 속성과, 속성의 값을 대괄호{ }로 묶어 표현한다. 

CSS의 구조

하나의 선택자에 여러개의 속성을 정의할 수 있다. 글자 크기, 모양, 색 등 글자 속성, 상하좌우 정렬, 좌우 여백, 들여쓰기, 줄간격, 테두리, 배경색 등 문단 편집에 필요한 속성, 이미지, 동영상, MP3, 에니메이션 등 CSS로 표현할 수 있는 편집 형태는 다양하다.

CSS도 HTML처럼 여백이나 줄간격은 무시된다. 그래서 구조적으로 보기 좋게 편집이 가능하다. 아래 3개의 CSS는 모두 똑같은 스타일이 적용되지만 첫번째 보다 두번째가 알아보기 쉽다. 만약 여러사람이 사용하거나, 제3자가 스타일을 수정할 필요가 있다면 세번째처럼 설명을 추가할 수도 있다. “/*”와 “*/”사이에 있는 내용은 공백처럼 컴퓨터가 무시를 하기 때문에 CSS에 설명을 추가할 때 사용할 수 있다. 

속성을 한줄로 나열하게 되면 어떤 속성을 적용했는지 확인하기 어렵다. 속성을 한줄로 나열하기 보다는 아래처럼 한줄씩 줄바꿈을 해서 선택자에 어떤 속성이 적용되었는지 보기 편하게 정리하는 것이 좋다.

또한 아래처럼 /*설명*/을 붙여 각 선택자에 어떤 목적으로 속성을 적용했는지를 적어주거나 각 속성에 특이점이 있다면 어떤 특이점이 있는지 등을 설명해 주는 것이 좋다. 설명을 달아 두면 시간이 지나도 CSS를 알아보기 쉽고, 만약 제3자가 수정을 할 일이 생기더라도 처음 책을 편집한 사람의 의도를 쉽게 파악할 수 있게 된다. 

1.2.1  CSS란?

인터넷과 웹이 보편화 되면서 HTML로 웹페이지를 만들 수는 없더라도 HTML이 무엇인지 정도는 누구나 알고 있다. 하지만 많은 사람들에게 CSS는 낯선 단어이다. CSS는 쉽게 설명하면 워드프로세서의 편집기능에 해당한다. 워드에는 글자 크기를 조절하고, 글자 색을 넣고, 상하좌우 여백을 지정하고, 왼쪽, 오른쪽 정렬을 하는 기능이 있는데 HTML에서는 이런 편집을 하기 위해 CSS를 사용한다. HTML에도 기본 속성이 있어 간단한 편집을 지원한다. 좌우 정렬이나 글자색 등을 HTML 기본 속성으로 설정할 수 있다. 하지만 기본 속성으로 표현을 하기에는 한계가 있다. 복잡한 편집이 어렵고 개별 태그에 속성을 하나씩 지정해야 하기 때문에 시간도 오래걸리며 통일된 편집을 유지하기도 어렵다.

CSS는 이런 태그별 속성 지정 방식의 한계를 극복하고 다양한 편집이 가능하도록 해준다. CSS를 사용하면  문서 전체를 일관된 형태로 편집할 수 있고, CSS파일을 변경하는 것 만으로 문서 전체의 편집을 수정할 수 있어 편집 시간이 절약된다. CSS를 표준화시키면 테마형태로 스타일을 만들어 놓고 여러 EPUB에 적용할 수 있다. 여행 테마, 자기계발 테마, 소설 테마를 만들어 놓고 책의 내용에 맞게 테마를 선택해서 편집할 수 있다. 또한 여행 테마를 선택하더라도 CSS 파일만 약간 수정하면 전체적인 분위기는 유지하면서 다른 느낌의 여행책을 만들 수도 있다. 

CSS를 간단히 정리하면?

1. CSS는 Cascading Style Sheet의 약자이다.

2. HTML로 만든 문서를 화면에 어떤 스타일로 표현할 것인지를 정의한다.

3. HTML로는 표현이 어려웠던 다양한 스타일을 적용할 수 있다.

4. CSS파일 하나로 여러개로 분리된 HTML에 스타일을 정의할 수 있고, CSS만 바꿔도 전체 스타일이 변경된다.