"전자책"의 두 판 사이의 차이
(→기초 html tag) |
(→시길 메타문자 의미 이해하기) |
||
(같은 사용자의 중간 판 19개는 보이지 않습니다) | |||
53번째 줄: | 53번째 줄: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
− | ! 태그!! 역할 | + | ! 태그!! 역할 !! 사용법 |
|- | |- | ||
− | | <nowiki> <h1>...</h1> </nowiki> | + | | <nowiki> <h1>...</h1> </nowiki> || 부, 장, 절 등 제목에 사용|| h1~h6까지 숫자가 커질수록 작은크기, h4가 본문 글자와 비슷한 크기, 블럭태그 |
|- | |- | ||
− | |<nowiki> <p>...</p> </nowiki> || 문단 | + | |<nowiki> <p>...</p> </nowiki> || 문단|| 한 문단(paragraph)을 감싸줌. 가장 많이 쓰이는 블럭 태그 |
|- | |- | ||
− | |<nowiki> <i>...</i> </nowiki> || 이탤릭체 | + | |<nowiki> <i>...</i> </nowiki> || 이탤릭체|| 기울이는 인라인 태그, 꼭 블럭 태그와 함께 사용. |
|- | |- | ||
− | |<nowiki><b>...</b></nowiki> || 볼드체 | + | |<nowiki><b>...</b></nowiki> || 볼드체||진하게 하는 인라인 태그, 꼭 블럭 태그와 함께 사용. |
|- | |- | ||
− | |<nowiki> <ins>...</ins> </nowiki>|| 밑줄 | + | |<nowiki> <ins>...</ins> </nowiki>|| 밑줄||밑줄(insert) 인라인 태그, 꼭 블럭 태그와 함께 사용. |
|- | |- | ||
− | | <nowiki><sup>...</sup> </nowiki>|| 위첨자 | + | | <nowiki><sup>...</sup> </nowiki>|| 위첨자||위첨자 인라인 태그, 꼭 블럭 태그와 함께 사용. |
|- | |- | ||
− | | <nowiki><sub>...</sub></nowiki> || 아래첨자 | + | | <nowiki><sub>...</sub></nowiki> || 아래첨자||아래첨자 인라인 태그, 꼭 블럭 태그와 함께 사용. |
|- | |- | ||
− | | <nowiki><span class="...">...</span> </nowiki>|| 본문 내 글자에 스타일 적용 | + | | <nowiki><span class="...">...</span> </nowiki>|| 본문 내 글자에 스타일 적용||인라인 태그이므로 꼭 블럭 태그와 함께 사용하며 속성(attribute)를 같이 써야함. |
|- | |- | ||
− | | <nowiki><div>...</div> </nowiki>|| 그룹을 묶어 스타일 적용, 글상자 만들기 | + | | <nowiki><div>...</div> </nowiki>|| 그룹을 묶어 스타일 적용, 글상자 만들기||division을 의미하고 큰 블럭 태그로 다른 블럭 테그를 감쌀 수 있음. 테두리, 배경색 등의 속성 필수. |
|- | |- | ||
− | | <nowiki><img alt=".." src=".."/></nowiki> || 이미지 삽입 | + | | <nowiki><img alt=".." src=".."/></nowiki> || 이미지 삽입|| 인라인 태그로 꼭 블럭태그와 함께 사용. alt="이미지설명" src="이미지 위치 경로" , 닫는 "/'"가 없는 단독 테그(빈 테그) |
|} | |} | ||
83번째 줄: | 83번째 줄: | ||
</nowiki></pre> | </nowiki></pre> | ||
− | *인라인 tag: | + | *인라인 tag: p 등의 블럭 tag안에서만 i, b, span등이 사용 가능함 |
<pre> | <pre> | ||
<nowiki> | <nowiki> | ||
89번째 줄: | 89번째 줄: | ||
</nowiki> | </nowiki> | ||
</pre> | </pre> | ||
+ | |||
+ | ===css(Cascading Style Sheet)=== | ||
+ | *html은 문서의 구조를 만든다면 css는 문서의 모양을 꾸며줌 | ||
+ | *글꼴, 글자 크기, 색, 상하좌우 정렬, 배경색, 테두리, 레이아웃 등 | ||
+ | *구성: 선택자, 속성, 값 | ||
+ | <pre> | ||
+ | h1 { font-size : 1.5em ; color : red } → 태그 선택자 | ||
+ | .title { font-size : 1.5em ; color : red } → 클래스 선택자 | ||
+ | ---- ----------- --- ----- --- | ||
+ | 선택자 속성 값 속성 값 | ||
+ | </pre> | ||
+ | |||
+ | *선택자: html 태그에 직접 스타일을 적용한 '''태그 선택자'''와 편집자가 임의로 이름을 지정한 선택자인 '''클래스 선택자''' | ||
+ | |||
+ | *클래스 선택자의 규칙 | ||
+ | #태그를 클래스 이름으로 쓰지 않는다. 예) .h1{...}X | ||
+ | #예약어를 사용하지 않는다 예) .with{...}X | ||
+ | #반드시 영문으로 시작하고 숫자, 하이픈, 믿줄 이외에는 사용하지 않는다. 예) .장제목{...}X | ||
+ | #이해할 수 있는 단어를 사용한다. 예).t01{...} X, .chap_title{...}O | ||
+ | |||
+ | *클래스 이름만들기 | ||
+ | #예약어를 사용하지 않도록 주의해야 한다. | ||
+ | #종류를 구분해서 머리말_(언더바)를 넣는다. | ||
+ | <pre> | ||
+ | .txt_sample: 본문의 글자를 꾸미는 클래스 | ||
+ | .img_sample: 이미지를 꾸미는 클래스 | ||
+ | .title_:제목과 관련된 클래스 | ||
+ | .box_: 글상자와 관련된 클래스 | ||
+ | .bg_: 배경색, 배경이미지 클래스 | ||
+ | </pre> | ||
+ | #클래스의 이름은 주요 속성의 영어 단어를 최대한 그대로 사용한다. | ||
+ | <pre> | ||
+ | .txt_gothic_bold: 진한 고딕 글씨체 | ||
+ | .txt_red, txt_color_red: 빨간 글씨체 | ||
+ | .txt_center: 글자 가운데 정렬 | ||
+ | </pre> | ||
+ | #클래스명이 길면 쉽게 유추할 수 있는 약어를 쓴다. | ||
+ | <pre> | ||
+ | .img_float_L | ||
+ | .img_float_R | ||
+ | </pre> | ||
+ | |||
+ | ===필수 css=== | ||
+ | *font-family: 글꼴 이름, @font-face와 함께 사용 | ||
+ | *text-indent: 들여 쓰기 | ||
+ | *padding-left: 내여 쓰기 | ||
+ | *text-align: 글자 정렬 | ||
+ | <pre> | ||
+ | 양쪽정렬 | ||
+ | p{ | ||
+ | text-align:justify; | ||
+ | } | ||
+ | </pre> | ||
+ | *line-height: 줄 간격, 1.8~2.0 em 정도 | ||
+ | <pre> | ||
+ | p{ | ||
+ | line-height: 1.8em; | ||
+ | } | ||
+ | </pre> | ||
+ | *font-size: 글자 크기 | ||
+ | *color: 글자 색 | ||
+ | *margin: 바깥쪽 여백 | ||
+ | <pre> | ||
+ | margin: 1em; 상하좌우 모두 1em | ||
+ | margin: 1em 2em; 상하 1, 좌우2 | ||
+ | margin: 1em 5em 2em; 상1 좌우5 하2 | ||
+ | margin: 1em 2em 3em 4em; 상1 우2 하3 좌 4(시계방향) | ||
+ | </pre> | ||
+ | *padding 안쪽 여백 | ||
+ | *width: 폭 | ||
+ | *height: 높이 | ||
+ | *float: 이미지와 글자가 자연스럽게 배치되는 스타일 | ||
+ | |||
+ | ==html과 css로 전자책 완성하기== | ||
+ | ===스타일 기본 설정=== | ||
+ | *스타일/빈 스타일시트 추가 | ||
+ | *text파일들 모두 선택후 스타일시트를 연결 | ||
+ | *폰트폴더에서 기존파일 추가로 원하는 글꼴 추가 | ||
+ | |||
+ | ===글꼴 선언=== | ||
+ | *글꼴 추가 후 style0001.css파일에 @font-face로 선언 | ||
+ | <pre> | ||
+ | @font-face{ | ||
+ | font-family:"명조" | ||
+ | src:url("../Fonts/NanumMyeongjo.ttf"); | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | ===본문 스타일=== | ||
+ | <pre> | ||
+ | p{ | ||
+ | font-family:"명조"; | ||
+ | text-indent:1em; | ||
+ | line-height: 1.8em; | ||
+ | text-align: justify; | ||
+ | |||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | ===제목 스타일=== | ||
+ | <pre> | ||
+ | h3{/*장 제목은 명조로, 색깔은 파랑, 사이즈는 일반의 1.5배, 오른쪽 정렬 위에서 2줄, 아래에서 7줄 본문과 간격*/ | ||
+ | font-family: "고딕"; | ||
+ | color: blue; | ||
+ | font-size: 1.5em; | ||
+ | text-align:right; | ||
+ | margin-top:2em; | ||
+ | margin-bottom:7em; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | ===이미지 정렬=== | ||
+ | *가운데 정렬 | ||
+ | <pre> | ||
+ | .img_center{ text-indent:0; | ||
+ | text-align:center; | ||
+ | margin: 1em 0 1em 0; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | *왼쪽 어울림 | ||
+ | <pre> | ||
+ | .img_left{ text-indent:0; | ||
+ | float:left; | ||
+ | text-align:left; | ||
+ | width:45%; | ||
+ | margin-right:1em; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | *오른쪽 어울림 | ||
+ | <pre> | ||
+ | .img_right{ | ||
+ | text-indent:0; | ||
+ | float:right; | ||
+ | text-align:right; | ||
+ | width:45%; | ||
+ | margin-left:1em; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | *이미지 자동 맞추기 | ||
+ | <pre> | ||
+ | img{ | ||
+ | width:100% | ||
+ | } | ||
+ | .img_center img, .img_left img, .img_right img{width:100%} | ||
+ | </pre> | ||
+ | |||
+ | ===본문 인용 강조 스타일=== | ||
+ | *아래첨자 | ||
+ | <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> | ||
+ | |||
+ | *분할 태그 div: 한문단 이상의 인용구에 사용 | ||
+ | <pre> | ||
+ | .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> | ||
+ | </pre> | ||
+ | div 태그 보다 p 태그가 안에 있기 때문에 p태그의 영향을 더 먼저 받음. 따라서 div와 p의 스타일을 따로 잡아줘야함. div는 부모, p는 자식이라고도 함. | ||
+ | |||
+ | ===정렬 스타일=== | ||
+ | <pre> | ||
+ | .txt_center{ | ||
+ | text-align: center; | ||
+ | text-indent:0; | ||
+ | } | ||
+ | .text_right{ | ||
+ | text-align:right; | ||
+ | text-indent:0; | ||
+ | } | ||
+ | .text_left{ | ||
+ | text-align:left; | ||
+ | text-indent:0; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | ===시/목차/판권면 스타일=== | ||
+ | *배경색과 테두리: div로 문단을 지정 | ||
+ | <pre> | ||
+ | .box_poem{ | ||
+ | border: 3px solid cyan; | ||
+ | background-color:#E4E4E4; | ||
+ | padding: 10px; /*테두리와 글자사이의 여백, 글자와 테두리가 너무 붙으면 가독성이 떨어짐*/ | ||
+ | } | ||
+ | .box-poem p{ | ||
+ | text-indent:0; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | *목차 | ||
+ | <pre> | ||
+ | .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의 약자로 이퍼브에서 차례 파일을 의미*/ | ||
+ | </pre> | ||
+ | |||
+ | *판권 | ||
+ | <pre> | ||
+ | .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; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | ===EPUB TOC(차례파일) 만들기=== | ||
+ | #도구/차례/Generate Table of Content | ||
+ | #차례 만들기 상자 확인 후 ok, 이때 오류가 있을때는 본문에서 고쳐서 다시 부르기. | ||
+ | #오른쪽 차례창에서 확인 가능. 저장. 전자책 편집 끝. | ||
+ | |||
+ | ==시길 메타문자 의미 이해하기== | ||
+ | {| class="wikitable" | ||
+ | |- | ||
+ | ! 메타문자!! 의미 !! 예제 | ||
+ | |- | ||
+ | | . || 임의의 한 문자 || 123.456은 123과 456사이에 임의의 문자가 들어간 값을 찾음, 120456, 123a456 등 | ||
+ | |- | ||
+ | | \d || 숫자 || \d\d월은 숫자 2자리+월로 된 문자열을 찾음, 01월, 02월, 12월 등 (\은 역슬레시) | ||
+ | |- | ||
+ | | \w || 영문, 숫자, _ || \w\w\w는 영문, 숫자, _로 이루어진 3가지 문자를 찾음, aaa, 123,b3_ 등 | ||
+ | |- | ||
+ | | [a-z] || 알파벳 소문자 || [a-z][a-z]는 연속된 알파벳 소문자 2자를 찾음, ab,bc,cd 등 | ||
+ | |- | ||
+ | | [A-Z] || 알파벳 대문자 ||[A-Z][A-Z]는 연속된 알파벳 대문자 2자를 찾음 | ||
+ | |- | ||
+ | | [a-zA-Z] || 알파벳 대소문자 || 대소문자 구분없이 연속된 알파벳 2자, AA,Aa,aa 등 | ||
+ | |- | ||
+ | | [가-힣] || 한글 || 홍[가-힝][가-힝]은 홍으로 시작하는 한글 3자, 홍길동, 홍난파 등 | ||
+ | |- | ||
+ | | \s || 공백 || \d\d년\s\d\d월\s\d\d일, 년 월 일 뒤에 공백 1칸이 들어간 값을 찾음 | ||
+ | |- | ||
+ | | [] || 문자 클래스 || [*] *를 찾아줌 | ||
+ | |- | ||
+ | | + || 앞에 문자 1회 이상 반복 || [가-힣]++는 한글로 된 단어 하나를 찾음, | ||
+ | |- | ||
+ | | * || 앞에 문자 0회 이상 반복 ||<nowiki> <p>(.*)</p>는 <p>와 </p>를 포함해 이 사이에 있는 모든 문자, <p>...</p></nowiki> | ||
+ | |- | ||
+ | | <nowiki>|</nowiki> || 조건문 or || <nowiki>[a-z]|[0-9]</nowiki>는 영문1자 혹은 숫자1자를 찾음 | ||
+ | |} | ||
=참고문헌= | =참고문헌= | ||
박웅영(2018). 제대로 된 전자책 한권 잘 만들기. 미디어랩 | 박웅영(2018). 제대로 된 전자책 한권 잘 만들기. 미디어랩 |
2021년 1월 27일 (수) 12:26 기준 최신판
목차
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;
- 분할 태그 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(차례파일) 만들기
- 도구/차례/Generate Table of Content
- 차례 만들기 상자 확인 후 ok, 이때 오류가 있을때는 본문에서 고쳐서 다시 부르기.
- 오른쪽 차례창에서 확인 가능. 저장. 전자책 편집 끝.
시길 메타문자 의미 이해하기
메타문자 | 의미 | 예제 |
---|---|---|
. | 임의의 한 문자 | 123.456은 123과 456사이에 임의의 문자가 들어간 값을 찾음, 120456, 123a456 등 |
\d | 숫자 | \d\d월은 숫자 2자리+월로 된 문자열을 찾음, 01월, 02월, 12월 등 (\은 역슬레시) |
\w | 영문, 숫자, _ | \w\w\w는 영문, 숫자, _로 이루어진 3가지 문자를 찾음, aaa, 123,b3_ 등 |
[a-z] | 알파벳 소문자 | [a-z][a-z]는 연속된 알파벳 소문자 2자를 찾음, ab,bc,cd 등 |
[A-Z] | 알파벳 대문자 | [A-Z][A-Z]는 연속된 알파벳 대문자 2자를 찾음 |
[a-zA-Z] | 알파벳 대소문자 | 대소문자 구분없이 연속된 알파벳 2자, AA,Aa,aa 등 |
[가-힣] | 한글 | 홍[가-힝][가-힝]은 홍으로 시작하는 한글 3자, 홍길동, 홍난파 등 |
\s | 공백 | \d\d년\s\d\d월\s\d\d일, 년 월 일 뒤에 공백 1칸이 들어간 값을 찾음 |
[] | 문자 클래스 | [*] *를 찾아줌 |
+ | 앞에 문자 1회 이상 반복 | [가-힣]++는 한글로 된 단어 하나를 찾음, |
* | 앞에 문자 0회 이상 반복 | <p>(.*)</p>는 <p>와 </p>를 포함해 이 사이에 있는 모든 문자, <p>...</p> |
| | 조건문 or | [a-z]|[0-9]는 영문1자 혹은 숫자1자를 찾음 |
참고문헌
박웅영(2018). 제대로 된 전자책 한권 잘 만들기. 미디어랩