posted by 내.맘.대.로 2021. 1. 28. 13:38

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

d3_sample_PolarClock.epub
0.36MB

 

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로 구현해 유통할 수 있습니다.

반응형
posted by 내.맘.대.로 2021. 1. 6. 12:18

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

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

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

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

 

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

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

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

 

line-sample.epub
0.01MB

 

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

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>

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

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

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

반응형
posted by 내.맘.대.로 2020. 12. 14. 14:39

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

http://selfcss.org/

 

selfCSS - WYSIWYG CSS Editor

Impressum Angaben gemäß § 5 TMG: Kontakt: Name:Simon Waldherr Straße:Kloepfstrasse 2 Wohnort:94522 Ettling Telefon:0049 151 11309488 Telefax:0049 32 224178618 E-Mail:contact@selfcss.org

selfcss.org

CSS로 원하는 스타일 만드는게 어려운 분들께 추천을 합니다.

Sigil은 코딩 편집기여서 CSS를 모르면 스타일을 만들기 어렵습니다.

이 페이지는 CSS를 몰라도 CSS를 쉽게 만들 수 있게 도와줍니다.

사이트에 들어가면 이런 화면이 보입니다.

책 제목 스타일을 만들고 싶다면 오른쪽 위에 있는 HTML 버튼을 누릅니다.

편집 창에 있는 내용을 모두 지우고 편집하고 싶은 html 내용을 넣습니다.

저는 이렇게 넣었어요.

<h2 class="selfCSS">책 제목 스타일</h2>

선택자는 selfCSS입니다. 태그는 바꿔도 선택자는 selfCSS를 넣으세요.

이제 오른쪽 메뉴에서 CSS를 누릅니다.

CSS 코드가 보이고, 아래에 edit CSS라는 버튼이 보입니다.

edit CSS를 누르세요.

edit CSS를 누르면 선택자를 수정할 수 있습니다.

선택자는 Sigil에서 사용할 선택자를 넣으세요.

html 창에서 제목을 h2 태그로 지정했으니 선택자도 h2로 수정합니다.

스타일을 처음부터 새로 만들고 싶다면 CSS 속성을 모두 지워도 됩니다.

이제 오른쪽 위의 메뉴에서 Preview를 선택하세요.

그럼 html에서 입력한 스타일이 보입니다.

배경을 바꾸고 싶다면 오른쪽 아래에 있는 background를 수정하세요.

저는 흰색으로 하고, 기본 CSS 스타일을 모두 삭제한 후 수정을 하겠습니다.

CSS 스타일을 모두 삭제하고, 배경을 흰색으로 놓으면 이렇게 보여요.

글자가 안보이는게 정상입니다.

글자가 보이게 font-color를 바꿔보겠습니다.

왼쪽 메뉴 중 font를 선택해 보세요.

1. font를 on으로 놓고 colored를 선택합니다.

2. Red, Green, Blue를 원하는 색이 나오도록 조정합니다.

원하는 색의 rgb 값을 알고 있다면 그대로 맞춰주세요.

3. rgb 색을 조정하면 제목 스타일의 색이 반영됩니다.

폰트 크기도 바꿔보겠습니다.

Font 메뉴에서 Size를 On한 다음 EPUB에서 많이 사용하는 em을 선택합니다.

원하는 크기가 되도록 크기를 조정합니다.

테두리 스타일, 속성을 지정했습니다.

배경색, 안쪽 여백, 바깥 여백 등 원하는 스타일을 지정해 줍니다.

초보 편집자가 어려워 하는 그림자 스타일도 쉽게 추가할 수 있습니다.

스타일 편집이 끝났으면 오른쪽 위 메뉴에서 CSS를 누릅니다.

이게 CSS 코드예요.

이 코드를 복사해 Sigil의 CSS 파일에 붙여넣습니다.

복사한 코드를 Sigil의 CSS 파일에 붙여넣고, 전자책에서 사용할 선택자 이름을 붙여줍니다.

오른쪽 메뉴 Example을 누르면 이미지 스타일도 적용할 수 있습니다.

selfCSS로 간단한 스타일을 만들 수 있습니다.

하지만 100여개의 CSS 속성 중 많이 사용하는 기본적인 속성 몇개만 설정할 수 있지요.

초보를 넘어, 전자책 디자인을 원하는 대로 편집하고 싶다면 CSS를 공부하세요.

반응형
posted by 내.맘.대.로 2020. 11. 23. 13:31

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

이미지는 주로 가운데, 왼쪽, 오른쪽 3가지 스타일로 작업을 많이 합니다.

그런데 간혹 아래처럼 넣어달라고 요청하는 분들이 계세요.

이미지가 세로로 길어 가운데 넣기엔 너무 커지고,

이미지 설명이 많아 왼쪽이나 오른쪽으로 float을 하자니 캡션이 다음페이지로 넘어가 가독성이 떨어질 때가 있지요.

그래서 이미지를 가운데 넣지만, 50%로 줄이고, 남은 공간에 캡션을 넣는 스타일입니다.

화면 크기가 줄어들면 이렇게 이미지도 같이 작어져요.

캡션은 텍스트기 때문에 이미지가 작아져도 캡션을 보는데 문제가 없습니다.

이런 스타일은 grid나 flex를 쓰면 되지만, grid를 쓰면 태그가 복잡해져요.

img_center 스타일을 그대로 살리면서 캡션과 이미지 영역만 조절해 표현할 수 있습니다.

.img_left_center {

width: 95%;

box-sizing: border-box;

margin: 1em auto 1em auto;

text-align: center;

}

.img_left_center img {

width : 50%;

}

.img_left_center .img_caption {

display : inline-block;

font-size: 0.8em;

font-family: "약물고딕", "기본고딕";

text-align: justify;

width : 45%;

}

이 스타일의 핵심은 display : inline-block;이에요.

이미지 옆에 텍스트가 나오려면 inline 속성이어야 하는데, inline으로 텍스트를 넣으면 이미지 하단에 한줄만 나오고 나머지는 다음줄로 내려갑니다.

이걸 해결하려면 block 속성을 써야하는데 block은 이미지 아래로 설명을 내리지요.

그래서 inline-block이라는 속성을 씁니다.

나머지 속성들은 그저 도울 뿐....

반응형
posted by 내.맘.대.로 2020. 11. 4. 09:20

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

Sigil을 사용하는 이유는

HTML4, 5, CSS2, 3, JavaScript, jQuery 등 거의 모든 코드를 다 받아주는 강력한 코드 편집 기능,

그리고 정규식을 완벽히 지원하는 찾기/바꾸기 때문입니다.

이 두 기능을 안쓴다면 궂이 Sigil을 사용할 이유가 없지요.

특히 정규식을 완벽히 지원하는 찾기/바꾸기 기능은 다른 EPUB 편집기에는 없는 Sigil만의 독보적인 기능입니다.

정규식은 어려워요.

저도 어렵습니다.

제가 아는 있는 20년 다 되어 가는 최상급 개발자도 정규식이 어렵다고 합니다.

이 어려운걸 전자책 만드는데 쓰는건 얼마나 어렵겠어요.

그런데 어렵지 않습니다.

전자책 편집은 앱 개발이 아니잖아요.

기껏 해야 텍스트나 코드를 찾아 다른 것으로 바꾸는 정도예요.

그래서 몇가지만 알면 됩니다.

먼저, 아주 기본적인 PC 상식은 알아야겠지요?

\가 입력이 안되요... 라는 분은 정규식 사용을 권하지 않습니다.

1. (.*)

무엇이든 다 찾습니다.

<p>(.*)</p>

이렇게 찾기에 넣고 검색을 하면 <p>와 </p> 사이에 있는 모든 내용을 다 찾아줍니다.

다 찾는게 무슨 의미가 있지? 하고 생각하셨다면, Sigil 보다는 윙크, ebook스타일리스트를 쓰세요.

오! 하며 느낌표가 팍 오는 분들께는 신세계가 열릴거예요.

2. (\d), (\d\d), (\d+)

숫자만 찾습니다.

\d는 숫자 하나, \d\d는 숫자 두개, \d+는 갯수와 상관 없이 연속된 숫자를 모두 찾습니다.

이 두개만 잘 활용하면 전자책 제작에 필요한 정규식 90%는 해결합니다.

여기에 몇가지만 더 기억하세요.

4. 찾기에는 ()로 그룹을, 바꾸기에는 \1, \2로 찾은 값을...

예를 들어 날짜 표기 형식을 바꾼다고 생각해 보세요.

2020년 1월 1일 -> 1일 1월 2020년

2021년 2월 2일 -> 2일 2월 2021년

2022년 3월 3일 -> 3일 3월 2022년

찾기에 (\d\d\d\d)년 (\d)월 (\d)일

바꾸기에는 \3일 \2월 \1년

이렇게 해주면 됩니다.

(\d{4))

이런 것도 가능하지만, 초보자를 위한거라 넘어가겠습니다.

5. 정규식에서 사용하는 예약어, 예약 코드

(), \, .(점), [ ], ^, ?, * 등은 예약된 코드입니다.

예약코드는, 정규식을 만들 때 쓰는 코드예요.

그래서 검색창에 (를 넣고 찾으면 못찾습니다.

예를 들어

정규식(Regex)

이런 내용에 (Regex)만 찾고 싶습니다.

(.*)

이렇게 하면 못찾아요.

((.*))

이렇게도 못찾습니다.

괄호는 예약코드기 때문이에요.

예약코드를 찾을 때는 \를 써야합니다.

\((.*)\)

이렇게 하면 괄호를 포함해 괄호 안에 있는 글자를 찾습니다.

점을 찾고 싶다면 \.

물음표는 \?

곱하기는 \*

이렇게 찾으면 됩니다.

이정도만 기억하면 전자책 만들 때 필요한 정규식 95%는 해결됩니다.

5%는?

열심히 공부 해야겠지요^^

반응형
posted by 내.맘.대.로 2020. 10. 15. 09:56

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

Q: 문단 안에 있는 글자에 여백을 주려고 하는데

좌우(margin-left, margin-right) 여백은 적용되지만 상하 여백이 적용되지 않습니다.

<p><span>문단 내 상하 여백</span> 문단 내 글자의 상하 여백 설정은 display:inline-block; 속성으로</p>

span {

color : #00F;

margin-right : 5em;

}

이렇게 margin-left, margin-right는 잘 적용되지요.

하지만 상하 마진을 주면 어떨까요?

span {

color : #00F;

margin-bottom : 5em;

margin-top : 5em;

}

상하 5em을 줬는데 아무 변화가 없습니다.

코드를 아무리 들여다 봐도 문제가 없는데 스타일이 적용되지 않지요.

이건 태그의 속성 때문입니다.

display 속성을 기준으로 보면 태그는 인라인 태그와 블럭 태그 2종류가 있어요.

블럭 태그는 <p>, <div>, <h1> 같은 태그고

인라인 태그는 <span>, <sub>, <b> 같은 태그입니다.

태그 종류만 봐도 둘의 차이가 무엇인지 파악되시나요?

블럭 태그는 독립적으로 사용할 수 있는 태그예요.

<p>본문</p> (O)

이렇게 사용할 수 있습니다.

인라인태그는 독립적으로 사용을 할 수 없어요.

<sub>아래첨자</sub> (X)

이렇게 쓰면 오류가 납니다.

반드시 블럭 태그 안에 써야합니다.

<p><sub>아래첨자</sub></p> (O)

진하게, 기울임, 밑줄 등 글자를 꾸미는 태그는 대부분 인라인 태그예요.

블럭 태그는 <div>처럼 블럭 안에 다시 블럭을 사용할 수 있는 태그와 불럭 안에 블럭을 넣을 수 없는 태그로 구분돼요.

<div><div><p>문단</p></div></div> (O)

div는 이렇게 태그 안에 여러개의 블럭 태그를 쓸 수 있습니다.

<h1><p>제목</p></h1> (X)

h1이나 p태그는 div처럼 블럭 태그지만 태그 안에 블럭 태그를 쓸 수 없습니다.

블럭태그와 인라인 태그를 설명하려는게 아니니 여기서 마무리 하고.

블럭 태그는 상하좌우 마진을 적용할 수 있습니다.

하지만 인라인 태그는 좌우 마진은 적용할 수 있지만 상하 마진은 적용할 수 없습니다.

왜?

그렇게 하기로 약속이 되어 있어서 그렇습니다.

블럭 태그와 인라인 태그는 기본 속성이 다르고 지정할 수 있는 속성도 다릅니다.

블럭 태그는 강제로 줄바꿈을 하지만 인라인 태그는 줄바꿈이 없지요.

이 외에도 블럭 태그 안에는 인라인 태그를 쓸 수 있지만, 인라인 태그 안에는 인라인 태그만 써야 하고

상하정렬(vertical-align)은 인라인 태그만 적용되고 블럭 태그는 쓸 수 없는 등의 여러가지 차이가 있습니다.

그럼 인라인 태그에 상하 정렬을 꼭 해야한다면 어떻게 할까요?

인라인 태그를 블럭태그로 만들어 주면 됩니다.

span {

color : #00F;

display : block;

margin-bottom : 5em;

margin-top : 5em;

}

이렇게 하면 span 태그는 블럭태그 속성을 갖게 됩니다.

하지만 블럭 태그는 강제 줄바꿈이 기본 속성이기 때문에 이런 문제가 생기지요.

줄바꿈은 없이 상하 여백을 주고 싶을 때,

다시 말해 블럭 속성이면서 인라인 속성을 함께 부여하고 싶을 때가 있을거예요.

그럴 때 inline-block 속성을 사용할 수 있습니다.

span {

color : #00F;

display : inline-block;

margin-top : 5em;

margin-bottom : 5em;

}

inline-block 속성은 블럭 속성이기 때문에 margin을 적용할 수 있지만

inline 속성도 함께 갖고 있어 줄바꿈은 되지 않습니다.

display 속성은 여러개가 있습니다.

block, inline, inline-block, flex, grid, lint-item 등 다양합니다.

전자책 만들 때 display 속성 사용 빈도도 아주 높습니다.

잘 활용하면 제작 시간을 단축하고 다양한 스타일을 만들 수 있습니다.

반응형