박스 만들기 _ Sigil _ ePub _ 전자책제작

박스 만들기 _ Sigil _ ePub _ 전자책제작

이번 편은 글 혹은 이미지가 들어가는 박스를 만드는 작업으로 먼저 결과부터 보여 드린다.

 

이전까지 사용해 왔던 샘플용 이펍 파일의 Section0002.xhtml을 북 뷰로 보면 위와 같이 글이 박스로 꾸며져 있고 박스의 색과 선의 굵기, 모서리가 둥글게 깎여 있는 등 다양한 박스가 표현되어 있다. *글 하단 파일 참조

*박스를 위한 스타일 시트를 독립적으로 만들어서 이전의 작업과 다르게 두 개의 스타일 시트를 사용하게 되었다. 이 경우 스타일을 적용 받아야 하는 Section내에 두 번째 스타일 시트의 존재를 알려 한다는 점은 눈치 채셨을 것이다.

 

내용으로 돌아가

이 박스 구현을 위한 스타일 시트는 ‘Style0002.css’로 내용은 다음과 같다.

 

이중 맨 위 ‘box1’의 내용을 설명해 보자면

.box1  <- 박스 1번은

{

border-radius : 0.5em;  <- 박스의 귀퉁이를 0.5em만큼 돌려 깎아줘

border : solid 1px red;  <- 빨간색 1px 두께의 선으로

padding : 2em;  <- 2em 만큼 패딩을 주고

}

한데 ‘box2’의 padding 값 내용은 좀 다르다.

padding : 0em 3em 0em 1em;

별 설명 없이 줄줄이 네 개의 숫자가 지정 되어 있는데 이것은 상, 우, 하, 좌, 순으로 글의 주위를 시계방향으로 돌아가며 수치를 따로 지정한 경우이다. 왜 순서가 그런지는 묻지 마시라. 그냥 CSS의 룰이 그렇다.

Section페이지에서의 적용은 블록 태그라 불리는 ‘div’태그를 사용하여 그룹화 시킨다. 

이 외에도 다양한 모습의 박스 구현을 위한 더 많은 스타일 시트 언어가 있으나 전자책의 제작을 위한 만큼 필요한 최소한의 내용만 다루기로 한다.

그리고 뭐가 패딩이고 뭐가 보더인지 감이 잘 안 오시는 분을 위하여 아래의 그림으로 글이나 이미지등 컨텐츠 영역 요소의 설명을 대신한다.

 

역시 이번 글에 사용한 샘플 이펍 파일을 첨부 드리니 스타일 시트의 숫자를 변화 시켜보며 변화를 관찰해보시기 바란다.

박스만들기샘플.epub

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