내맘대로의 EPUB 제작 가이드

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%는?

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

심훈의 상록수 무료로 보세요~

jikji.duckdns.org/book/113

아이디어회관 SF / 직지 프로젝트 도서(등록 완료)

jikji.duckdns.org/shelf/1

한국문학-단편(등록중)

jikji.duckdns.org/shelf/3

한국문학-장편(등록중)

jikji.duckdns.org/shelf/2

전자책 뷰어가 없어도, PC에서도, 스마트폰에서도 볼 수 있습니다.

무료 전자도서관에 들어가 책을 선택하면 오른쪽 위에 다운로드와 책보기 버튼이 있어요.

전자책 뷰어가 뭔지, 전자책을 어떻게 보는지 모르는 분은 책보기 버튼 눌러 보시고,

내 기기에서 보고싶다 하는 분들은 다운로드 받아 보세요.

몇번 소개를 했는데, 오늘 [ㄱ] 까지 작업을 끝낸 기념으로 다시 공유합니다.

단편 목록에서 1/4정도 작업을 한 것 같아요.

속도는 느리지만 중/장편까지 모두 올리는걸 목표로 하고 있습니다.

아이디어회관 직지 프로젝트(https://sf.jikji.org/) 도서는 모드 등록했고,

위키문헌의 한국 근대문학 단편을 EPUB으로 재편집해 등록합니다.

jikji.duckdns.org/discover/new/

보고싶은 책 선택 후 오른쪽을 보면 작은 아이콘 2개가 있습니다.

하나는 EPUB 다운로드. 다른 하나는 브라우저에서 바로 볼 수 있는 아이콘입니다.

바로 보기는 PC와 모바일 모두 지원하니 전자책 체험하고 싶은 분들 이용하세요.

아이디어회관이 명맥만 유지하고 있어 이를 계속 유지할 생각으로 시작했는데 혼자 작업하려니 느리네요.

전자책 원고 출처는 아이디어회관과 위키문헌입니다.

아이디어회관 SF - 직지 프로젝트 1999

http://sf.jikji.org

위키문헌 원고를 EPUB으로 만들어 보내주시면 서재에 등록하겠습니다.

작은 프로젝트지만 참여하곳 싶은 분들은 언제든 쪽지나 메일 보내주세요.

https://ko.wikisource.org/wiki/%EB%B6%84%EB%A5%98:%EB%8B%A8%ED%8E%B8%EC%86%8C%EC%84%A4

참....

생각하고 계신 그 ID와 패스워드로는 절대 로그인 안됩니다.

로그인 안해도 100% EPUB으로 다운로드 되고, 책도 볼 수 있어요.

로그인 하려고 괜한 고생 하지 마세요.

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)

​

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

​

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

​

_아래첨자 (X)

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

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

​

<p>_아래첨자</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 속성 사용 빈도도 아주 높습니다.

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