1.2.7.4 CSS 템플릿 활용하기 - 다양한 본문 편집 스타일

전자책을 보면 본문은 텍스트가 가득해서 스타일이 많이 필요할 것 같지 않지만 유통되고 있는 콘텐츠의 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 첫 글자