내맘대로의 EPUB 제작 가이드

오랜만에 고민하게 만든 스타일이 있어 이것 저것 시도해 봤습니다.

아래는 PDF 캡쳐 이미지입니다. 어디가 문제인지 아시겠지요?

대표사진 삭제

사진 설명을 입력하세요.

처음 떠오른 태그는 테이블이었어요.

테이블로 만들면 간단합니다.

테이블로 만들어도 아무 문제가 없긴 한데, 그냥 테이블로 만들기 싫었어요 ㅎㅎ

table, tbody, tr, td가 들어가다 보면 코드가 너무 복잡해 지기도 하고요.

그래서 flex를 사용했습니다.

<div class="box_book_title">

<div class="box_book01">

<p class="txt_book01">파브르 곤충기</p>

<p class="txt_book01_sub">자연에 대한 이성적 관찰</p>

</div>

<div class="box_slash"></div>

<div class="box_book02">

<p class="txt_book02">시튼 동물기</p>

<p class="txt_book02_sub">자연에 대한 감성적 관찰</p>

</div>

</div>

코드가 간단하지는 않아요.

테이블 보다 tbody 한 줄 빠집니다.

테이블의 문제는 또 있어요.

가운데 사선 셀 크기는 고징시킨다 해도

좌우 텍스트가 들어간 셀 크기는 고정을 시킬 수 없거든요.

그럼 테이블은 텍스트 양에 맞춰 자동으로 크기를 조절합니다.

좌우 테이블 크기가 달라질 수 있지요.

이것도 해결 안되는건 아니지만,

이걸 해결 하느니 flex가 더 낫겠다 싶더라구요.

flex 속성을 적용한 결과입니다.

flex 속성을 이용하면 표 보다 간단하게 셀 안의 텍스트 길이와 상관 없이 좌우 크기가 동일하게 맞출 수 있지요.

가운데 사선도 크기를 맞추기 쉬워요.

가운데 사선 크기를 고정하지 않고 폭에 맞춰 좌우 셀은 같은 크기로, 가운데는 일정 비율로 맞추는 것도 가능하고요.

대표사진 삭제

사진 설명을 입력하세요.

CSS가 뭔지 모르는 사람들을 위한 WYSIWYG 방식 CSS 편집기 플러그인입니다.

https://drive.google.com/file/d/1eRqDzPa737p1EYhtJ5naN1sopaSXq_Cc/view?usp=sharing 

Sigil에서 플러그인을 설치한 후 실행하세요.

플러그인을 어떻게 설치하는지 모르는 분이라면 이 플러그인 설치해도 사용 못합니다.

Sigil을 먼저 공부하세요.

왼쪽에는 CSS 속성이, 오른쪽에는 스타일용 샘플이 표시됩니다.

Examples를 누르면 샘플을 바꿀 수 있습니다.

왼쪽 메뉴에서 CSS 속성을 선택하면 조절을 할 수 있습니다.

속성을 조절하면 샘플에 반영됩니다.

CSS 스타일을 만들면 오른쪽 상단에서 CSS를 선택합니다.

CSS 스타일을 복사해 Sigil의 CSS에 붙여 넣습니다.

지금까지 작업한 것과 다른 테두리 스타일을 만났습니다.

글자가 테두리 보다 길어요.

이런 테두리는 어떻게 그릴까요?

Previous imageNext image

이것 역시 border-image로 그릴 수 있습니다.

뭔가 엄청난게 있을 것 같지만, 아주 단순합니다.

결정적인 힌트를 드릴게요.

아! 하고 느끼셨나요^^?

​

재미있는 테두리가 많이 쓰인 책이에요.

이런 테두리는 어떻게 그릴까요?

​

이 테두리의 이미지입니다.

보기엔 2겹, 3겹으로 된 테두리 처럼 보이지만 선 하나로 그린 테두리예요.

​

그럼 이건 어떻게 그릴까요?

바깥 테두리를 그리고, 안쪽에 다른 테두리를 그렸을까요?

이럴 때는 아주 단순하게 생각을 하면 돼요.

어디에서 어디까지를 테두리로 잡느냐가 기준이 됩니다.

단선 테두리 안에 이중선 테두리를 넣는 것도 방법이지만,

그냥 단선과 이중선을 포함해서 하나의 테두리를 보면 훨씬 간단해 집니다.

​

모두 border-image 속성을 이용했습니다.

border-image 모르는 분은 없을거예요.

이 속성으로 저런 다양한 테두리를 만들 수 있느냐, 없느냐의 차이가 있지요.

속성을 어떻게 활용하느냐, 이게 중급에서 고급으로 넘어 가는 핵심이에요.

​

전자책에서는 이렇게 보입니다.

그나저나, Sigil 리디움 뷰어 플러그인 너무너무너무너무 편하고 좋네요 ^^

검수할 때 너무 편해요.

요즘 일에 치여서 글을 올리지 못했네요.

게시판이 너무 오래 쉬고 있으면 안되겠기에...^^;;

간만에 스타일 하나 올립니다.

형광펜 중간에 십자가 표시 보이시나요?

하나는 파란색, 하나는 파란색 테두리입니다.

파란색은 쉽지만, 테두리는 어떻게 할까요?

​

테두리를 그리는 스타일은 없습니다. 글자 테두리 색과 안쪽 색을 지정하는 스타일도 없고요.

이건 그림자 속성을 활용한거예요.

​

상하좌우 그림자를 1px로 주고, 그림자 색을 원하는 것으로 지정하면 되지요.

​

text-shadow: -1px 0 #0181C6, 0 1px #0181C6, 1px 0 #0181C6, 0 -1px #0181C6;

color : #FFFFFF;

눈에는 파란색 테두리 처럼 보이지만, 사실 그림자입니다.

안쪽 글자는 흰색으로, 글자 안쪽은 흰색으로 넣었어요.

​

그런데 회색 바탕이라 티가 안나지만, 글자 안쪽 색을 지정하지 않고 투명하게 하려면 어떻게 하면 될까요?

​

이건 퀴즈로 남겨봅니다.

EPUB3는 공식적으로 HTML5, JavaScript, CSS3에 대한 제한을 거의 두지 않았습니다.

그러니 EPUB3는 Web에서 표현 가능한 거의 모든 기능을 다 구현할 수 있습니다.

​

Sigil 역시 EPUB3를 완벽히 지원합니다.

제한 없이 JavaScript를 사용할 수 있고, HTML5, CSS3로 자유롭게 기능을 구현할 수 있습니다.

​

단!!!!!

기능 구현에 대한 제한은 두지 않았지만,

뷰어가 지원해야 하는 최소 기준은 아주 아주 관대해요.

EPUB3 뷰어는 비디오나 오디오를 지원하지 않을 수 있습니다.

JavaScript도 지원하지 않을 수 있습니다.

MathML이나 SMIL도 지원하지 않아도 됩니다.

이런 기능들은 MUST가 아닌 MAY나 RECOMMENDED입니다.

그래서 많은 EPUB3 지원 뷰어들이 이런 기능을 지원하지 않지요.

​

D3.js를 사용한 복잡한 기능은 EPUB3에서 제한 없이 구현할 수 있습니다.

다만, 지원하는 뷰어가 많지 않아 구현하지 않는 것 뿐이지요.

​

D3.js가 무엇인지 궁금하신 분들, EPUB3로 어디까지 가능한지 궁금하신 분들은

첨부파일을 다운받아 calibre나 Sigil PageEdit로 열어보세요.

​

Calibre에서는 이렇게 보입니다.

Sigil PageEdit에서는 이렇게 보입니다.

소스 원본은 여기서 확인할 수 있습니다.

http://bl.ocks.org/mbostock/1096355

교보ebook(모바일), iBooks는 jquery는 '거의' 지원을 합니다.

중급 정도의 복잡한 인터렉션 까지는 js로 구현해 유통할 수 있습니다.

전자책 Q&A 게시판에 올라온 질문이 있어 스타일 만들어 봤습니다.

​

제목 아래에 다양한 형태의 밑줄을 넣는 방법입니다.

연필로 그린 선, 점선, 사선 등등...

옛날에 올렸다고 생각했는데 찾아 봐도 안나오네요.

그래서 샘플 파일을 하나 만들어 올립니다.

아래에 설명한 내용은 샘플 파일에서 확인할 수 있어요.

기본 스타일은 이렇습니다.

​

h3 {

font-size : 1.3em;

​

background-image: url(../Images/line1.png);

background-position : left bottom;

background-repeat : repeat-x;

padding-bottom : 1em;

margin-left : 0;

margin-right : auto;

display : table;

}

​

<h3>제목 아래 다양한 밑줄 스타일 </h3>

​

background-image의 이미지만 수정하면 이렇게 다양한 모양의 밑줄을 그릴 수 있습니다.

​

그런데, 여기서 문제가 하나 생겨요.

제목이 짧을 때는 별 문제 없는데 제목이 길어 2줄 이상 줄바꿈이 되면 어떻게 될까요?

이렇게 제목이 몇 줄로 늘어나든 밑줄은 하나만 그려집니다.

이렇게 편집한 책도 많이 있어요.

그런데 어떤 책에는 2줄이면 2줄 다 밑줄을 그려야 돼요.

​

h3 {

font-size : 1.3em;

}

​

h3 > span {

background-position : left bottom;

background-repeat : repeat-x;

padding-bottom : 0.5em;

margin-left : 0;

margin-right : auto;

background-image: url(../Images/line4.png);

line-height : 1.8em;

}

​

<h3><span>줄이 바뀌어도 줄마다 밑줄이 생기는 스타일 </span></h3>

​

이건 블럭 태그와 인라인 태그의 특성을 이용한 거예요.

기본 스타일은 똑같습니다. 대신 줄을 블럭 태그가 아닌 인라인 태그에 그려줬어요.

블럭 태그와 인라인 태그의 특성을 이해하면 쉽게 만들 수 있어요.

​