테이블 _ Sigil _ ePub _ 전자책제작

테이블 _ Sigil _ ePub _ 전자책제작

이전편의 ‘a’태그 보다는 덜하지만 전자책 파일의 장점 요소라고 할 수 있는 테이블 제작 방법을 다뤄 본다.

역시 결과를 먼저 보여 드리고 설명은 뒤에 따르겠으니 완성 파일을 열어놓고 살펴 보며 곰곰 생각해 보시길 바란다.

테이블 - 완성.epub

위의 파일을 받아 Seciton0004.xhtml을 열어 북 뷰로 내용을 확인하면 아래와 같다.

일반적인 테이블과 좀 더 복잡한 테이블 두 가지의 예시가 있는데 우선 ‘테이블 연습’ 이란 제목이 붙은 테이블이 만들어지기 까지의 과정은 이렇다.

이전에 사용했던 Style0002.css 파일의 맨 아래에 

.s23{

background: #CBFF75;

border: 1px solid #AAAAAA;

text-align: center;

}

.s33{

background: #dcdcdc;

border: 1px solid #AAAAAA;

text-align: center;

}

이와 같은 구문이 덧붙여 있는데 그 뜻은 이렇다.

“스타일 S23은 배경이 #CBFF75색이고 테두리는 선 형태의 1px굵기, 글자는 중앙정렬이고, 

스타일 S33은 배경이 #dcdcdc색이고 테두리는 선 형태의 1px굵기, 글자는 중앙정렬을 해 줘.”

다음 Style0001.css의 문자 속성과 Style0002.css의 테이블 속성을 따르도록 준비 된 Section0004.xhtml은 아래와 같은 내용을 담고 있다.

 

<table style=”margin-left:2.0px; width:95%; border-collapse:collapse”>

“이 테이블의 스타일은 왼쪽 마진 2.0px, 폭은 화면의 95%, 선의 형태는 테이블과 셀의 선을 합쳐서 하나로 표현 해 줘.” 

*border-collapse의 변수는 'separate: 테이블이나 셀의 테두리선을 분리시켜 표현', 'inherit: 상위로부터 상속받음' 이 더 있다.

<col style=”width:6%”>

세로줄(첫 번째)의 넓이는 6%로 지정.

그 아래 <tr>과 <td>로 묶인 내용은 아래의 그림으로의 설명 드린다.

 

한마디로 ‘<tr>가로 한 줄’ 안에 ‘<td>셀’들이 모여 테이블을 구성하는 것이다.

다음으로 조금 더 복잡한 테이블의 설명.

 

Rows는 행(가로), Cols는 열(세로)로 

rowspan은 행의 병합으로 위아래가 합쳐지고, colspan은 열의 병합으로 좌우가 뭉친다.

처음에는 좀 헛갈리는 경향이 있는데 자꾸 하다 보면 확실히 

더 헛갈린다. -____-;

전자책 제작에 있어 중요한것은 과정을 이해하고 결과물을 만들어 내는 것이다. 

아무것도 없는 백지 스타일 시트에 능숙하게 css언어들을 적어 내려가는 것도 좋지만 실제로는 이해를 바탕으로 뼈대를 갖춘 구문들을 복사하고, 붙이고, 가공하는 과정이 필요하다.

혹시 어렵다는 느낌을 받는 분들이 계실까봐......

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