내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
전자책을 보면 본문은 텍스트가 가득해서 스타일이 많이 필요할 것 같지 않지만 유통되고 있는 콘텐츠의 CSS를 확인해 보면 본문에 들어가는 스타일이 가장 많다. 본문을 편집하다 보면 주석이나 설명 문구, 단락의 소제목, 단어나 문장 강조 등 다양한 스타일이 필요하다.
CSS를 만들 때 본문 스타일을 제대로 잡아주지 않으면 전자책 소스가 아주 지저분해 지게 된다. 편집자는 책을 보는 독자만 고려해서는 안되고 유통사의 뷰어에서 얼마나 가볍고 빠르게 열릴지, 오류 가능성은 없는지, 편집이 틀어지지 않는지 등을 모두 고려해야 한다. 그렇기 때문에 뷰어에 보이는 화면 뿐 아니라 태그와 스타일이 어떻게 적용되었는지도 확인을 해야 한다.
이번 장에서는 전자책 편집시 가장 많이 사용되는 스타일을 깔끔하게 편집에 적용할 수 있는 CSS 스타일을 설명하도록 한다.
* 아래에 설명한 스타일은 그대로 사용하기 보다는 원하는 스타일에 맞춰 스타일을 변경해 사용하기를 권한다.
1. 본문 기본 스타일
* {
margin : 0;
padding : 0;
}
p {
text-indent : 1em;
text-align : justify;
line-height : 1.5em;
}
<p> 본문 내용 </p>
* 편집시 별도로 스타일을 지정할 필요가 없다.
본문 기본 스타일은 문서 전체에 영향을 주는 스타일이다. 그렇기 때문에 가급적 간단한 스타일을 적용하는 것이 좋다. *는 모든 클래스를 대표한다. *로 설정한 스타일은 모든 하위 스타일에 적용된다. 여기서는 상하좌우 여백만 0으로 뒀다. 뷰어에 따라 기본 여백이 있기 때문에 책을 편집할 때 다시 여백을 주게 되면 여백이 너무 많아질 수 있어 여백을 0으로 두는 것이 좋다.
<p> 태그는 문단 태그로, 거의 모든 텍스트 편집에 사용한다. 제목과 일부 특수한 경우를 제외하면 모든 글자는 <p> 태그 스타일에 영향을 받는다고 말할 수 있다. 따라서 <p> 태그에는 가장 많이 쓰이는 스타일만 간단히 적용해야 한다.
2. 기본 편집 스타일
2.1 들여쓰기 해제 스타일
/* 들여쓰기 해제 */
.noindent { text-indent : 0; }
본문 기본 스타일에 적용한 들여쓰기를 해제해야 할 때 사용하는 스타일이다. 이 스타일은 <p> 태그에 직접 적용하고 <sapn> 태그에 적용하지 않는다.
2.2 오른쪽, 왼쪽 정렬 스타일
/* 오를쪽 정렬 */
.txt_right { text-align : right; }
/* 가운데 정렬 */
.txt_center {
text-align : center;
text-indent : 0;
}
오른쪽, 가운데 정렬에 사용한다.
들여쓰기가 되어 있으면 들여쓰기가 된 지점부터 오른쪽 끝의 중간을 가운데로 보기 때문에 뷰어에서는 오른쪽으로 치우쳐 보인다. 그래서 화면 정 가운데에 맞추기 위해 가운데 정렬 스타일에 text-indent : 0;을 넣었다.
2.3 주석 관련 스타일
/* [단어주1 처럼 위첨자 표시에 사용 */
sup {
font-family : "강조를 위한 글꼴" /* 필요시 적용 */
font-size : 0.8em; /* 원하는 크기로 설정 가능 */
}
/*단어의 간단한 설명을 추가하거나 아래첨자에 사용한다.*/
sub {
font-family : "강조를 위한 글꼴" /* 필요시 적용 */
vertical-align : bottom; /* sub는 아래첨자에 쓰여 앞쪽 글자보다 아래에 위치한다. vertical-align으로 세로 위치를 조절할 수 있다.*/
}
/*단어의 간단한 설명을 추가하거나 아래첨자에 사용한다.*/
/*본문과 구분이 필요한 스타일이 여러개인 경우 클래스를 지정할 수 있다*/
cite {
font-family : "강조를 위한 글꼴" /* 필요시 적용 */
font-style : none; /*cite 태그의 기본 스타일인 기울임을 제거한다*/
font-size : 0.8em;
color=#555555; /*필요시 글자 색을 변경한다*/
}
.txt_annotation {
font-family : "강조를 위한 글꼴" /* 필요시 적용 */
font-style : none; /*cite 태그의 기본 스타일인 기울임을 제거한다*/
font-size : 0.8em;
color=#555555; /*필요시 글자 색을 변경한다*/
}
.txt_chiness {
font-family : "강조를 위한 글꼴" /* 필요시 적용 */
font-style : none; /*cite 태그의 기본 스타일인 기울임을 제거한다*/
font-size : 0.8em;
color=#555555; /*필요시 글자 색을 변경한다*/
}
HTML의 기본 태그 중에 주석을 처리할 수 있는 태그가 많이 있다. 주석이 있음을 표시할 때는 윗첨자<sup>, 단어 옆에 괄호를 치고 간단한 설명을 추가하기 위해서는 <cite>나 <sub>를 사용할 수 있다. 그리고 이보다 많은 스타일이 필요하다면 클래스를 지정해 사용할 수 있다.
주석 스타일이 여러개가 필요한 경우가 아니라면 HTML 태그 사용을 권한다. 아래 코드를 보면 HTML 태그를 사용했을 때 코드가 간결해 지는 것을 볼 수 있다.
/*HTML 코드를 사용했을 때*/
<p>IDPF<cite>International Digital Publishing Forum</cite>에서 EPUB 표준<cite>標準</cite>을 배포<cite>配布</cite>한다.</p>
/*<span> 태그에 클래스를 적용했을 때*/
<p>IDPF<span class="txt_annotation">International Digital Publishing Forum</span>에서 EPUB 표준<span class="txt_annotation">標準</span>을 배포<span class="txt_annotation">配布</span>한다.</p>
2.4 문단 단위의 인용구
/*문단 단위의 인용이나 편지글 등 본문과 구분을 위해 사용한다.*/
blockquote {
font-family : "강조를 위한 글꼴" /* 필요시 글꼴을 변경한다 */
margin : 10px 0 10px 5px; /*본문과 구분을 두기 위해 상하 왼쪽 여백을 둔다.*/
font-size : 0.9em; /*필요시 글자 크기를 변경한다*/
color=#555555; /*필요시 글자 색을 변경한다. */
}
문단 단위의 인용구나 본문과 구분을 해야하는 단락에 사용하는 스타일이다. 본문과 구분을 두기 위해 여백, 글자색, 글자크기 등 다양한 효과를 줄 수 있다. 본문과 구분을 주기 위해 배경색, 문단 테두리 등을 적용하고자 할 때는 <div> 태그를 사용한 text_box 스타일을 참고하기 바란다.
2.5 글자에 선을 긋는 스타일
/*글자의 위, 가운데, 아래에 선을 긋는다*/
.txt_overline {text-decoration:overline;}
.txt_midline {text-decoration:line-through;} /*<del> 태그를 사용할 수 있다*/
.txt_underline {text-decoration:underline;} /*<ins> 태그를 사용할 수 있다*/
글자에 취소선이나 밑줄을 그어야 할 때 사용할 수 있다. 이 중 txt_midline과 txt_underline은 각각 <del>, <ins>태그를 활용할 수 있다.
2.6 첫 글자
'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글
| 모르는 사람이 의외로 많은 CSS 문법 (1) (0) | 2017.08.24 |
|---|---|
| 1.2.7.5 CSS 템플릿 활용하기 - 목록 스타일 편집 (0) | 2015.03.11 |
| 1.2.7.3 CSS 템플릿 활용하기 - 본문 내어쓰기 (0) | 2014.12.26 |
| 1.2.7.1 CSS 템플릿 활용하기 - 표지 이미지 스타일 (0) | 2014.12.19 |
| 1.2.7.2 CSS 템플릿 활용하기 - 제목 꾸미기 (2) | 2014.12.12 |
