전자책

sigil

• EPUB(전자책 포맷 중 하나) 편집 프로그램으로 이미지, 동영상, 오디오 파일 첨부가 가능하고 글꼴을 포함할 수 있어 다양한 형태의 스타일을 편집할 수 있음.
• 시길 다운로드: http://sigil-ebook.com
• sigil-0.96-window-x64-setup.exe 다운받기
• isbn 발급방법: 서지정보유통시스템 가입, 로그인
• 전자책 뷰어: iBooks, Calibre(캘리버)

플랫폼

• 리디북스: www://ridibooks.com/event/67
• 교보문고, 한국이퍼브, 유페이퍼, 북큐브

상업용 무료 이미지 사이트

• https://pixabay.com
• https://www.freepik.com
• https://unsplash.com
• https://gratisography.com
• https://morguefile.com

전자책 출판사 만드는 순서

1. 시길 설치하기. 그전에 책을 위한 원고작성 및 자료모음이 먼저.
2. 시길을 이용한 전자책만들기. 완성
3. 출판사 등록을 위한 구청(문화체육과)방문
4. 구청 재방문 서류 받기, 받은 서류(등록증)로 세무서에 가서 신고
5. 계약하고자 하는 플랫폼(전자책을 내놓을 배부할 회사)마다 요구하는 서류가 다름. 사업자 통장과 사업자공인인증서 미리 준비.
6. 각 유통사 플렛폼에 메일을 보내고, 서류 준비.
7. 서지정보시스템에 들어가서 isbn, cip를 발행하고 전자책에도 등록.
8. 각각의 scm 사이트에 isbn, cip를 등록.
9. 각 회사에서 정산금액을 메일로 알려주면 홈텍스에서 세금계산서를 발생. 출판사는 면세사업자

전자책 만들기

기본 구성

1. 본문
2. 메터데이터
3. 표지
4. 목차

목차 및 이미지 추가를 위한 정규표현식

• split at markers사용법: 검색 Find&Replace , 방식: Regex, 모든html파일, 아래쪽

  찾기: <p>제(\d++)장(.*)</p>
  바꾸기: <hr class="sigil_split_marker"/><p>제\1장\2</p>

• img 한꺼번에 바꾸기(정규표현식): img000(숫자)으로 자리만 저장한 후, 그림파일을 한꺼번에 올려서 찾아 바꾸기

  찾기: <p>img(\d++)</p>
  바꾸기: <p><img alt="img\" src="../Images/img\1.png"/></p>

본문 스타일 편집

기초 html tag

태그	역할	사용법
<h1>...</h1>	부, 장, 절 등 제목에 사용	h1~h6까지 숫자가 커질수록 작은크기, h4가 본문 글자와 비슷한 크기, 블럭태그
<p>...</p>	문단	한 문단(paragraph)을 감싸줌. 가장 많이 쓰이는 블럭 태그
<i>...</i>	이탤릭체	기울이는 인라인 태그, 꼭 블럭 태그와 함께 사용.
<b>...</b>	볼드체	진하게 하는 인라인 태그, 꼭 블럭 태그와 함께 사용.
<ins>...</ins>	밑줄	밑줄(insert) 인라인 태그, 꼭 블럭 태그와 함께 사용.
<sup>...</sup>	위첨자	위첨자 인라인 태그, 꼭 블럭 태그와 함께 사용.
<sub>...</sub>	아래첨자	아래첨자 인라인 태그, 꼭 블럭 태그와 함께 사용.
<span class="...">...</span>	본문 내 글자에 스타일 적용	인라인 태그이므로 꼭 블럭 태그와 함께 사용하며 속성(attribute)를 같이 써야함.
<div>...</div>	그룹을 묶어 스타일 적용, 글상자 만들기	division을 의미하고 큰 블럭 태그로 다른 블럭 테그를 감쌀 수 있음. 테두리, 배경색 등의 속성 필수.
<img alt=".." src=".."/>	이미지 삽입	인라인 태그로 꼭 블럭태그와 함께 사용. alt="이미지설명" src="이미지 위치 경로" , 닫는 "/'"가 없는 단독 테그(빈 테그)

• 블럭 tag

<div>
<h1>...</h1> <p>div는 큰 블럭으로 p나 h1등을 감쌀 수 있음. 반대로 안되며 p와 h1은 같은 수준이기 때문에 서로 감쌀 수 없음</p>
</div>

• 인라인 tag: p 등의 블럭 tag안에서만 i, b, span등이 사용 가능함

<p><i>기울임 글꼴</i> <b>진한 글꼴</b></p>

css(Cascading Style Sheet)

• html은 문서의 구조를 만든다면 css는 문서의 모양을 꾸며줌
• 글꼴, 글자 크기, 색, 상하좌우 정렬, 배경색, 테두리, 레이아웃 등
• 구성: 선택자, 속성, 값

  h1   { font-size : 1.5em ; color : red }  →  태그 선택자
.title { font-size : 1.5em ; color : red }  →  클래스 선택자
 ----   -----------   ---    -----   ---
 선택자     속성      값      속성    값

• 선택자: html 태그에 직접 스타일을 적용한 태그 선택자와 편집자가 임의로 이름을 지정한 선택자인 클래스 선택자

• 클래스 선택자의 규칙

1. 태그를 클래스 이름으로 쓰지 않는다. 예) .h1{...}X
2. 예약어를 사용하지 않는다 예) .with{...}X
3. 반드시 영문으로 시작하고 숫자, 하이픈, 믿줄 이외에는 사용하지 않는다. 예) .장제목{...}X
4. 이해할 수 있는 단어를 사용한다. 예).t01{...} X, .chap_title{...}O

• 클래스 이름만들기

1. 예약어를 사용하지 않도록 주의해야 한다.
2. 종류를 구분해서 머리말_(언더바)를 넣는다.

 .txt_sample: 본문의 글자를 꾸미는 클래스
 .img_sample: 이미지를 꾸미는 클래스
 .title_:제목과 관련된 클래스
 .box_: 글상자와 관련된 클래스
 .bg_: 배경색, 배경이미지 클래스 

1. 클래스의 이름은 주요 속성의 영어 단어를 최대한 그대로 사용한다.

 .txt_gothic_bold: 진한 고딕 글씨체
 .txt_red, txt_color_red: 빨간 글씨체
 .txt_center: 글자 가운데 정렬

1. 클래스명이 길면 쉽게 유추할 수 있는 약어를 쓴다.

 .img_float_L
 .img_float_R

필수 css

• font-family: 글꼴 이름, @font-face와 함께 사용
• text-indent: 들여 쓰기
• padding-left: 내여 쓰기
• text-align: 글자 정렬

양쪽정렬
p{
   text-align:justify;
}

• line-height: 줄 간격, 1.8~2.0 em 정도

p{
   line-height: 1.8em;
}

• font-size: 글자 크기
• color: 글자 색
• margin: 바깥쪽 여백

 margin: 1em; 상하좌우 모두 1em 
 margin: 1em 2em; 상하 1, 좌우2
 margin: 1em 5em 2em; 상1 좌우5 하2
 margin: 1em 2em 3em 4em; 상1 우2 하3 좌 4(시계방향)

• padding 안쪽 여백
• width: 폭
• height: 높이
• float: 이미지와 글자가 자연스럽게 배치되는 스타일

html과 css로 전자책 완성하기

스타일 기본 설정

• 스타일/빈 스타일시트 추가
• text파일들 모두 선택후 스타일시트를 연결
• 폰트폴더에서 기존파일 추가로 원하는 글꼴 추가

글꼴 선언

• 글꼴 추가 후 style0001.css파일에 @font-face로 선언

@font-face{
   font-family:"명조"
   src:url("../Fonts/NanumMyeongjo.ttf");
}

본문 스타일

p{
   font-family:"명조";
   text-indent:1em;
   line-height: 1.8em;
   text-align: justify;

}

제목 스타일

h3{/*장 제목은 명조로, 색깔은 파랑, 사이즈는 일반의 1.5배, 오른쪽 정렬 위에서 2줄, 아래에서 7줄 본문과 간격*/
   font-family: "고딕";
   color: blue;
   font-size: 1.5em;
   text-align:right;
   margin-top:2em;
   margin-bottom:7em;
}

이미지 정렬

• 가운데 정렬

.img_center{ text-indent:0;
             text-align:center;
             margin: 1em 0 1em 0;
}

• 왼쪽 어울림

.img_left{ text-indent:0;
           float:left;
           text-align:left;
           width:45%;
           margin-right:1em;
}

• 오른쪽 어울림

.img_right{
   text-indent:0;
   float:right;
   text-align:right;
   width:45%;
   margin-left:1em;
}

• 이미지 자동 맞추기

img{
   width:100%
}
.img_center img, .img_left img, .img_right img{width:100%}

본문 인용 강조 스타일

• 아래첨자

sub{
   font-size: 0.8em;
   vertical-align:baseline;
}

• 고딕 기울임

font-style:italic;
font-family:"고딕";

본문에 sub로 묶어서 표현

• span tag

css:
.txt_small{
   font-size: 0.8em;
}
html:
<span class="txt_small">...</span>
+글꼴 font-family:"고딕";
+스타일 font-style:italic;

• 분할 태그 div: 한문단 이상의 인용구에 사용

.box_letter{
   margin-left:2em;
   margin-top:2em;
   margin-bottom:2em;
}
.box_letter p{/*분할태그안의 p태그 스타일 지정*/
   font-family:"고딕";
   font-indent:0;
   font-size: 0.9em;
}
<div class="box_letter">
   <p>...</p>
   <p>...</p>
</div>

div 태그 보다 p 태그가 안에 있기 때문에 p태그의 영향을 더 먼저 받음. 따라서 div와 p의 스타일을 따로 잡아줘야함. div는 부모, p는 자식이라고도 함.

정렬 스타일

.txt_center{
   text-align: center;
   text-indent:0;
}
.text_right{
   text-align:right;
   text-indent:0;
}
.text_left{
   text-align:left;
   text-indent:0;
}

시/목차/판권면 스타일

• 배경색과 테두리: div로 문단을 지정

.box_poem{
   border: 3px solid cyan;
   background-color:#E4E4E4;
   padding: 10px; /*테두리와 글자사이의 여백, 글자와 테두리가 너무 붙으면 가독성이 떨어짐*/
}
.box-poem p{
   text-indent:0;
}

• 목차

.box_TOC p{
   text-align:right;
   font-size:0.9em;
}

.TOC-title{
   border-bottom:1px solid #oooooo;
   font-size:1.5em;
   font-style:bold;
   font-family:"고딕";
}
/*TOC: Table of Content의 약자로 이퍼브에서 차례 파일을 의미*/

• 판권

.box_copyright p{
   text-indent:0;
}
.box_copyright_strong{
   font-family:"고딕";
}
.box_note{
   border:1px solid #A3A3A3;
   background-color:#858585;
   margin:1em;
   padding: 0.5em;
}
.box_note p{
   text-indent:o;
   font-size:0.9em;
}

EPUB TOC(차례파일) 만들기
참고문헌
박웅영(2018). 제대로 된 전자책 한권 잘 만들기. 미디어랩