내맘대로의 EPUB 제작 가이드

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 방식을 지원하는 편집기라도 코드 방식을 권한다.