"전자책"의 두 판 사이의 차이
(→이미지 정렬) |
(→본문 인용 강조 스타일) |
||
239번째 줄: | 239번째 줄: | ||
===본문 인용 강조 스타일=== | ===본문 인용 강조 스타일=== | ||
+ | *아래첨자 | ||
+ | <pre> | ||
+ | sub{ | ||
+ | font-size: 0.8em; | ||
+ | vertical-align:baseline; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | *고딕 기울임 | ||
+ | <pre> | ||
+ | font-style:italic; | ||
+ | font-family:"고딕"; | ||
+ | </pre> | ||
+ | 본문에 sub로 묶어서 표현 | ||
+ | |||
+ | *span tag | ||
+ | <pre> | ||
+ | css: | ||
+ | .txt_small{ | ||
+ | font-size: 0.8em; | ||
+ | } | ||
+ | html: | ||
+ | <span class="txt_small">...</span> | ||
+ | +글꼴 font-family:"고딕"; | ||
+ | +스타일 font-style:italic; | ||
+ | </pre> | ||
===정렬 스타일=== | ===정렬 스타일=== |
2021년 1월 22일 (금) 16:38 판
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
전자책 출판사 만드는 순서
- 시길 설치하기. 그전에 책을 위한 원고작성 및 자료모음이 먼저.
- 시길을 이용한 전자책만들기. 완성
- 출판사 등록을 위한 구청(문화체육과)방문
- 구청 재방문 서류 받기, 받은 서류(등록증)로 세무서에 가서 신고
- 계약하고자 하는 플랫폼(전자책을 내놓을 배부할 회사)마다 요구하는 서류가 다름. 사업자 통장과 사업자공인인증서 미리 준비.
- 각 유통사 플렛폼에 메일을 보내고, 서류 준비.
- 서지정보시스템에 들어가서 isbn, cip를 발행하고 전자책에도 등록.
- 각각의 scm 사이트에 isbn, cip를 등록.
- 각 회사에서 정산금액을 메일로 알려주면 홈텍스에서 세금계산서를 발생. 출판사는 면세사업자
전자책 만들기
기본 구성
- 본문
- 메터데이터
- 표지
- 목차
목차 및 이미지 추가를 위한 정규표현식
- 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 태그에 직접 스타일을 적용한 태그 선택자와 편집자가 임의로 이름을 지정한 선택자인 클래스 선택자
- 클래스 선택자의 규칙
- 태그를 클래스 이름으로 쓰지 않는다. 예) .h1{...}X
- 예약어를 사용하지 않는다 예) .with{...}X
- 반드시 영문으로 시작하고 숫자, 하이픈, 믿줄 이외에는 사용하지 않는다. 예) .장제목{...}X
- 이해할 수 있는 단어를 사용한다. 예).t01{...} X, .chap_title{...}O
- 클래스 이름만들기
- 예약어를 사용하지 않도록 주의해야 한다.
- 종류를 구분해서 머리말_(언더바)를 넣는다.
.txt_sample: 본문의 글자를 꾸미는 클래스 .img_sample: 이미지를 꾸미는 클래스 .title_:제목과 관련된 클래스 .box_: 글상자와 관련된 클래스 .bg_: 배경색, 배경이미지 클래스
- 클래스의 이름은 주요 속성의 영어 단어를 최대한 그대로 사용한다.
.txt_gothic_bold: 진한 고딕 글씨체 .txt_red, txt_color_red: 빨간 글씨체 .txt_center: 글자 가운데 정렬
- 클래스명이 길면 쉽게 유추할 수 있는 약어를 쓴다.
.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;
정렬 스타일
시/목차/판권면 스타일
EPUB TOC(차례파일) 만들기
참고문헌
박웅영(2018). 제대로 된 전자책 한권 잘 만들기. 미디어랩