HTML 및 CSS 스타일 편집 - ① 필요한 스타일 목록 정하기

전자책 제작의 90% 스타일 편집이다. 편집자는 독자들에게 전달하고자 하는 내용을 텍스트 아니라 행간, 여백, 이미지의 위치 등으로 책에 담는다. CSS 전자책을 편집자가 원하는 형태로 독자들에게 보이도록 해준다.

다른 편집 프로그램들은 HWP MS워드같은 문서편집기가 제공하는 수준의 편집 기능을 제공하기도 한다. 하지만 Sigil 이런 기능이 없고, 사용자가 직접 CSS 편집해야 한다. 방식은 각각 장점과 단점이 있다.


전자책 편집 프로그램의 CSS 편집기 



  1. 편집 기능과 코드 편집의 장단점


편집기능이 있으면 초보자도 쉽게 CSS 편집이 가능하다. CSS 적용 결과를 눈으로 확인하며 편집을 있기 때문에 원하는 스타일을 쉽게 만들 수도 있다. 하지만 이런 편집 기능으로 만든 전자책은 코드가 깔끔하지 않은 경우가 많고 기능도 제한적이다.

 

편집 프로그램으로 만든 CSS 코드

 


Sigil 직접 편집한 코드

 

Sigil처럼 직접 CSS 편집하는 방식은 초보들이 사용하기 어렵다. HTML CSS 대해 알고 있어야 편집이 가능하다. 그리고 HTML 어떻게 적용하는지, CSS 설정이 중복될 경우 어떤 순서대로 표현되는지 까다로운 조건을 편집자가 고려해야 한다.

까다로운 대신 제대로 활용하면 장점이 아주 크다. 편집 프로그램으로는 표현하기 어려운 다양한 스타일을 적용할 있고, 미세한 표현도 가능하다. CSS3 에니메이션 같은 강력한 기능도 지원하기 때문에 JavaScript 몰라도 간단한 에니메이션이나 인터렉티브형 표현도 가능하다. 편집 시간도 절약할 있다. Sigil 찾기/바꾸기 기능에서 정규표현식을 사용할 있어 제목, 주석처럼 형식이 정해져 있을 경우 클릭 한번으로 백개의 코드를 수정할 있다.

편집 기능과 코드 편집 어떤 방식이 좋다고 말할 수는 없다. 코드 편집이 강력한 기능을 제공한다 해도 초보자에게는 없느니만 못하고 고급 편집자라도 글꼴 크기를 바꾼다든지 적당한 색을 찾을 때는 코드 편집 보다 편집 기능에서 제공해 주는 미리보기로 스타일을 잡는게 편하다.

 

여기서는 코드 편집 중심인 Sigil 맞게 HTML CSS 사용한 편집 방법을 설명하려고 한다. CSS 편집기가 필요한 사람은 미투북스의 스타일리스트나 나모 펍트리 등을 이용하면 좋다.

 


  1. 기본 스타일 정하기

본문을 편집하기 위해 필요한 기본 스타일은 그리 많지 않다. 책의 구성 항목을 생각해 보면 소설류는 5 이내, 자기계발서는 10 안팎, 여행책 처럼 편집이 복잡해도 20 이내로 기본 스타일을 잡을 있다.

기본 스타일을 정하는 방법은 간단하다. 종이책이 있다면 책을 보면서 본문과 다른 형태의 편집 요소를 뽑아내면 된다. 대부분 (챕터) 살펴봐도 전체 스타일의 90% 이상 정리할 있다.

 

예제로 사용하는 '이상한 나라의 앨리스' 소설이지만 스타일이 많이 쓰이는 책이다. '이상한 나라의 앨리스' 필요한 기본 스타일을 정리하면 다음과 같다.

 

  1. 1. 표지 스타일
  2. 2. 속표지 스타일
  3. 3. 목차 스타일
  4. 4. 장 제목 스타일(11p)
  5. 5. 본문 스타일
  6. 6. 이미지 스타일
    1. 6.1. 한 페이지를 가득 채운 스타일(10p)
    2. 6.2. 왼쪽 어울림 스타일(16p)
    3. 6.3. 오른쪽 어울림 스타일(17p)
    4. 6.4. 가운데 정렬 스타일(30p)
  7. 6. 괄호 설명(11p)
  8. 7. 빈병 라벨(강조)(13p)
  9. 8. 시, 인용구(24p)
  10. 9. 가운데 정렬(18p)
  11. 10. 판권면

(페이지는 [ 인생을 위한 세계문학 14 이상한 나라의 앨리스(심야책방)] 기준으로 함)

 

1장에 필요한 스타일을 정리하면 4 ~ 9번까지 10개가 나온다. 여기에 표지, 속표지, 목차, 판권면 기본적인 스타일을 추가하고, 장별로 나오는 예외적인 스타일을 추가하면 '이상한 나라의 앨리스' 전자책이 완성된다. 표지, 속표지, 목차, 판권면은 한번 만들어 두면 반복해서 사용할 있기 때문에 실제 추가해야 하는 스타일은 4 ~ 9번까지이다.

설정

트랙백

댓글


티스토리 툴바