텍스트의 변형을 위한 스타일 시트 활용 _ Sigil _ ePub _ 전자책제작

텍스트의 변형을 위한 스타일 시트 활용 _ Sigil _ ePub _ 전자책제작

이번 글은 책을 좀 더 그럴싸하게 만드는 방법을 설명한다. 글씨의 크기를 바꿔보고 색도 알록달록하게…. 

많은 내용도 아니니 천천히 따라 오시면…. 

되도록 내가 잘하기로 한다. -_-;

재료는 이전 포스팅에 만들어두었던 ‘김동인_k박사의 연구.epub’으로. <- 누르시면 다운

사족

이 글을 준비하다가 문득 태크를 설명하려는 나를 발견한다.

이런 식으로 

'rel’은 a태그(앵커 태그)의 속성 중에 href의 속성 값에 의해 지정된 다른 문서와의 관계를 정의하는.....'

이런 풀이가 초보에게 무슨 의미가 있긴 하겠는가 말이다.

처음의 쉽게 하자의 의미를 잃는 것 같아 정신 차리고 급 선회. 다시 쉽게 가기로 한다.

1. HTML 폰트 태그

우선 간단한 방법으로 글자의 형태를 바꿔보는 작업부터 시작해 본다.

북 브라우저 에서 ‘Section0001.xhtml’을 열어 Code View로 내용을 본다.

 

이전에 헤드로 지정된 소제목을 제외하곤 대부분의 글이 문단 태그라 불리는 ‘<p>’ 안에 갇혀있는데 이건 말 그대로 문단만 나눠 주는 태그 안에 글이 들어 있는 형태이다.

이곳에 이런 변화를 줘본다.

 

다시 북 뷰로 돌아와 보면 문단의 앞에 <b>가 들어가고 끝에 </b>로 닫아 준 것 만으로 아래와 같이 글씨가 볼드체로 두껍게 변했다.

 

2. 스타일 시트 적용

이제 똑 같은 결과를 다른 방식으로 도출해 보자.

우선 북 브라우저의 Style폴더를 오른 클릭해서 Add Blank Stylesheet로 빈 스타일 시트를 만든다.

 

그리고 빈 공간에 이렇게 적어준다.

 

굳이 해석을 하자면 ‘t1이라고 지정된 폰트의 두께는 볼드야’ 라는 의미를 CSS문법에 맞도록 적은 것이다.

이제 ‘Section0001.xhtm'로 돌아와 이전의 <b>태그를 삭제해 처음과 같이 돌려놓고 비어 있는 ‘<title>’(원래는 이 페이지의 제목을 넣는 곳이다) 아래 ‘<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />’ 를 적어 넣는다.

이것도 굳이 설명하자면 ‘이 페이지(Section0001.xhtml)는 스타일 폴더 안에 들어있는 스타일0001.css의 내용을 따를거야. 그리고 걔들은 얘량 이런 관계이고 생긴 건 이래.’ 란 뜻이다.

 

그럼 위의 선언대로 이 페이지가 스타일 시트 안의 법칙을 따를 준비는 마쳤고, 다음으로 ‘<p>’ 태그 안의 내용을 위와 같이 바꿔 본다. ‘Class’는 식별자로 이전에 Style0001의 내용 중 ‘t1’의 지정 값을 실행한다.

지금까지의 내용을 다 마쳤으면 다시 북 뷰로 전환

 

이전과 똑 같은 결과를 얻을 수 있다.

3. 스타일 시트 사용의 이유

지금 경험해 본 스타일 시트에 사용되는 태그의 종류는 아주 다양해서 글씨의 서체, 크기, 색, 자 간격, 들여쓰기 등 폰트 전반의 다양한 변화를 조절 할 수 있다.

보통 이펍 제작에 사용되는 폰트 스타일과 조절 단위는 아래의 리스트 정도이다. 

color: 색상 (black, #000000)

font-size: 크기 (px, %, em)

font-style: 스타일 (normal, italic, oblique)

font-weight: 두께 (normal, bold, 숫자)

line-height: 행 간격 (%, px, pt, 숫자)

word-spacing: 자간 (px, pt, cm, em)

letter-spacing: 띄어쓰기 간격 (px)

padding: 여백 (px, pt, pm, %)

text-align: 정렬 (center, left, right)

text-indent: 들여쓰기 (px, pt, cm, em, %)

text-decoration: 윗줄, 아랫줄, 취소선 (overline, underline, line-through)

하지만 이 중에서도 어느 뷰어에서는 실행이 되고 또 어느 뷰어에서는 실행이 안 되는 태그도 있을 수 있다. 이 전의 포스팅에서도 말했지만 모든 뷰어에서 동일하게 보일 수 있는 이펍 파일을 제작 한다는 것은 알고도 모른 척 하는 겸손의 미덕이 필요한 대목이다. -_-;

다시 CSS의 사용으로 돌아와

책 안에 내용으로 있는 수 많은 문단과 문장을 찾아 ‘1. HTML 폰트 태그’ 방식으로 제작을 한다는 것은 두 번째 방법인 ‘2. 스타일 시트 적용’ 방법보다 단점이 너무 많다. 

우선은 코드 내용이 복잡해지고,

제작 시간이 길어지고,

일괄적인 수정이 힘들어지고,

로딩 시간도 길어진다.

 

그래서 가장 쉬운 방법은 이렇다.

제작 전에 책을 구성 하는 텍스트 요소들을 몇 부분으로 나누고,

그에 해당하는 스타일 시트를 작성하고,

또 그 룰을 텍스트가 따르도록 한다.

과정 중 스타일 시트의 내용을 수정, 보완하며 완성한다.

이전에 태그나 스타일 시트를 경험하신 분들은 뭐 이딴 허접한 내용을 포스팅씩이나 하고 앉았나 싶으시겠지만 개념 조차 전무한 초보들을 위해 잠시만 참아주자.

이번 글의 마지막으로 이전 포스팅에서 만들었던 ‘김동인_k박사의 연구.epub’ 파일에 스타일 시트를 마구잡이로 적용한 예제를 첨부해 드린다. 

김동인_k박사의 연구_css적용.epub

‘Style0001’의 알록달록한 북 뷰와 함께 ‘Style0001.css’의 내용을 참고해 보며 이것저것 숫자를 바꿔 보면 감이 오실 것이다.

이곳의 전자책 제작 관련 포스팅이 정리되어 전자책으로 나왔습니다. 블로그의 내용과 동일하나 좀 더 편하게 보실 분들께 권해 드립니다. 이 도서는 한번 구입 하시면 앞으로 추가 될 내용도 함께 업데이트 되므로  항상 최신 내용을 보실 수 있습니다. 리디북스와 교보문고에서 만나 보실 수 있습니다.