1. EPUB이란
2. EPUB 만들 때 이것만은
3. EPUB 제작을 위한 쉽고 간단한 HTML
4. CSS, 전자책 편집의 시작과 끝
5. 편집하고 바로 읽는 EPUB 3
HTML이 글자와 이미지를 뷰어에 나타나도록 해준다면 CSS는 글자와 이미지를 어떤 모습으로 보여줄지 결정한다. 이 장의 제목을 [CSS, 전자책 편집의 시작과 끝]이라고 지은 것은 CSS를 다루는 게 편집자의 편집 능력을 결정짓는 중요한 요소이기 때문이다. 마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.(https://ko.wikipedia.org/wiki/종속형시트 참조)
초보 전자책 편집자가 실수를 가장 많이 하는 부분이 CSS이고, 전자책의 코드가 지저분해지는 이유 역시 CSS 때문인 경우가 많은데 이번 장에서는 CSS를 사용할 때 주의할 내용과 전자책 편집에 많이 쓰이는 CSS 속성과 사용법을 알아본다.
CSS란
CSS는 웹문서를 꾸미기 위한 서식, 도구모음이다. 다만 워드프로세서의 서식은 마우스로 선택해서 지정하지만 CSS는 {font-size : #112233;}처럼 코드로 입력한다는 차이가 있다.
웹문서 편집기도 이런 기능을 제공한다. 그러나 종이에 인쇄를 목적으로 스타일이 고정된 일반 문서와 달리 웹문서는 화면 크기, 해상도, 다양한 액션(마우스 클릭, 슬라이드, 터치 등)에 따라 스타일이 달라지기 때문에 서식과 도구모음으로 표현하기에 한계가 있다. 전자책 역시 웹문서처럼 다양한 기기에서 다양한 스타일이 적용되기 때문에 기본 제공 서식으로는 표현할 수 없는 스타일이 많이 있다. 그래서 Sigil같은 전자책 편집 프로그램은 최소한의 기본 서식만 제공하고 코드창에서 편집자가 CSS를 직접 편집하는 기능을 제공한다.
CSS 사용시 주의사항
● 기본 편집 기능에 의존하지 말자 컴퓨터 프로그래밍을 해보지 않은 전자책 편집자들은 CSS의 개념을 이해하기 어려워한다. 그 때문에 기존 문서 프로그램과 비슷한 위지윅 기반의 전자책 편집 프로그램을 사용하는 편집자가 있는데 HTML과 CSS를 모르고 편집 기능에만 의존하면 아래 그림처럼 코드가 엉망이 된다. 이런 코드는 뷰어에서 오류를 일으키며 뷰어의 사용자 지정 스타일과 충돌한다.
스타일 지정이 잘못된 코드의 예
● 코드는 간결하게! CSS는 최대한 간결하게 정리하는 것이 좋다. 거듭해 말하지만, 코드가 간단할수록 문제가 발생할 가능성이 줄어들기 때문이다. 그리고 편집시간도 준다. 코드가 복잡하다고 해서 편집이 정교해지는 것이 아니며, 간결할수록 편집 결과물이 정교하다.
여러 태그에 3개 스타일 사용, 2개 태그에 2개 스타일 사용
● 다양한 기기를 고려하자 전자책 편집이 어려운 이유 중 하나는 다양한 환경을 고려해야 한다는 점이다. 4인치 스마트폰에서 40인치 TV까지 어떤 기기에서도 전자책을 볼 수 있다. 20대 학생은 10포인트로 읽을 테고 60대 독자는 20포인트로 글자를 본다.
책 편집자라면 텍스트에 담긴 의미 뿐 아니라 텍스트가 어떻게 보이는지도 책 내용을 전달하는데 중요하다는 걸 알 것이다. 스타일을 잘못 지정하면 편집자가 전달하고자 하는 책의 모양을 제대로 담을 수 없다. 여기서 또 한번 스타일이 간결해야 하는 이유가 나온다. 위에서 예로 든 복잡한 스타일과 간결한 스타일의 결과를 보면 아래와 같다.
스타일이 잘못 지정하면 같은 책이라도 다르게 보인다.(같은 스타일, 뷰어 글자 크기 변경)
화면이나 글자 크기가 바뀌더라도 일정한 패턴을 보여준다.
● 기본 태그를 최대한 활용하자 HTML은 다양한 기능의 태그를 제공한다. 제목(h1~h6), 본문(p), 첨자/주석(sup, sub), 인용(cite, blocquote), 강조(strong, em) 등 책 편집에 필요한 태그가 있다. 이 태그는 기본 스타일이 지정돼 있지만 CSS로 스타일을 바꿀 수 있다. 기본 태그를 사용하면 편집 시간을 줄이고 코드를 간결하게 할 수 있다.
● 외부 스타일을 사용하자 스타일을 인라인, 내부, 외부 스타일 이렇게 세가지 방법으로 지정할 수 있다. 인라인 스타일은 태그 안에 직접 스타일을 지정한다. 태그별로 스타일을 지정해야 하기 때문에 편집 시간이 오래 걸린다. 내부 스타일은 HTML 파일의 헤더<head> 영역에 스타일을 지정해 사용한다. 각각의 HTML 파일에 스타일을 지정해서 인라인 스타일보다 편집하기 쉽다. 외부 스타일은 별도의 CSS 파일을 만들어 쓰는데 이 CSS파일 하나만 수정하면 문서 전체의 스타일이 바뀐다.
스타일은 책이 열리는 속도에도 큰 영향을 준다. 외부스타일은 뷰어가 한번만 분석하면 되기 때문에 인라인이나 내부 스타일보다 빠르고 안정적으로 책이 열릴 수 있다. 그렇기 때문에 특별한 경우가 아니라면 외부스타일을 사용하기를 권한다.
▷ 인라인 스타일
<p style="font-size : 1em;">글자 크기 1em</p>
▷ 내부 스타일
<head>
<style>
p {font-size : 1em;}
</style>
</head>
<body>
<p>글자 크기 1em</p>
</body>
▷ 외부 스타일
●style.css
p {font-size : 1em;}
●sample.html
<p>글자 크기 1em</p>
CSS 기본 문법
CSS는 구조가 간단하다. 선택자, 속성, 값 세 개의 구성 요소로 되어 있고, 하나의 선택자에 여러개의 값과 속성이 올 수 있다.
CSS 구조(016)
선택자는 여러개의 속성과 값을 문서에 반영하는 역할을 한다. HTML 태그나 사용자가 임의로 만든 클래스를 사용하는데 클래스를 만들 때는 점(.)으로 시작하고 영문, 숫자, 하이픈(-), 언더바(_) 등을 사용할 수 있다. 속성은 글자 모양, 줄간격, 색, 배경 등 180여개가 있다. 값 역시 속성별로 정해져 있는데 값에도 규칙이 있어 속성별로 어떤 값이 들어가야 하는지는 CSS를 몇 번 이용해 보면 쉽게 알 수 있다. 크기, 간격에 해당하는 속성이라면 1em, 1px, 1cm, 1%등 길이나 크기에 대한 값이 오고, 색이 필요한 속성이라면 blue, #0000FF처럼 색에 대한 값이 온다.
● @font-face 전자책에서 쓸 글꼴을 정하는 속성으로 font-family는 글꼴의 이름을 지정하고 영문, 한글, 숫자에 모두 사용 가능하고 공백을 포함할 수 있다. 공백을 포함할 때는 반드시 따옴표(“”)로 묶어줘야 한다. src: url(...)은 글꼴 파일의 위치를 알려주는데 경로와 파일명은 영문, 숫자를 사용하고 반드시 대소문자를 구분해서 쓴다.
@font-face {
font-family: “기본 글꼴”;
src: url(../Fonts/NanumPen.ttf);
}
●font-size : 글자 크기를 조절 크기를 조절하는 값은 %, em, px, cm 등을 사용할 수 있다. 기기의 기본 글꼴에 따라 크기가 조절되는 %나 em을 사용을 권한다.
▷ 사용 방법
p { font-size : 1.5em; }
▷ 본문에 사용
<p>기본 글자보다 1.5배 커집니다.</p>
●text-align : 글자를 왼쪽, 가운데, 오른쪽, 양쪽 정렬
▷ 사용 방법
p { text-align : justify; }
.txt_left { text-align : left; }
.txt_center { text-align : center; }
.txt_right { text-align : right; }
▷ 본문에 사용
<p>문단의 오른쪽 끝이 균일하게 정리됩니다. 문단의 기본 스타일로 지정하는 것을 권합니다. </p>
<p class="txt_left">단어나 문장이 왼쪽으로 정렬됩니다. </p>
<p class="txt_center">단어나 문장이 가운데로 정렬됩니다.</p>
<p class="txt_right">단어나 문장이 가운데로 정렬됩니다.</p>
● text-indent : 들여쓰기 들여쓰기는 내어쓰기로 활용할 수 있다. CSS에서는 들여쓰기(text-indent) 속성만 있고 내어쓰기 속성은 없는 대신 들여쓰기에 마이너스(-1em) 값을 줄 수 있다. 단, 내어쓰기를 할때는 왼쪽에 padding으로 여백을 둬야한다. 여백을 두지 않거나 margin으로 여백을 둘 경우 독자들 눈에는 보이지 않지만 뷰어는 아래와 같은 편집 오류가 발생한다.
▷ 사용 방법
p { text-indent : 1em; }
.txt_outdent { text-indent : -1em; padding-left : 1em; }
▷ 본문에 사용
<p>들여쓰기를 하면 문단이 처음 시작되는 부분에 편집자가 지정한 간격만큼 들여쓰기 됩니다. </p>
<p class="txt_outdent">들여쓰기 속성으로 내어쓰기를 할 수도 있습니다. 내어쓰기를 할 때는 마이너스 값(-1em;)을 줍니다.</p>
margin을 적용하거나 여백을 두지 않으면 테두리를 그렸을 때 편집 오류를 확인할 수 있다.
● line-height : 줄 간격을 조절함
▷ 사용 방법
p { line-height : 1.8em; }
▷ 본문에 사용
<p>HTML의 기본 줄간격은 가독성이 좋지 않습니다. 뷰어에 따라 차이가 나지만 1.5em ~ 1.8em으로 줄간격을 설정하면 가독성이 높아집니다.</p>
4.4.2 글상자에 사용하는 속성
● margin, padding 글상자 바깥쪽, 안쪽 여백을 규정하는 margin과 padding은 쓰임이 완전히 다르다. 이 차이를 잘 구분해야 하는데 HTML 태그로 글자를 표현하면 가상의 글상자 안에 글자가 들어간다. 이 글상자는 border 속성을 사용해 테두리를 그리면 눈에 보이는데 margin은 글상자 바깥쪽, padding은 글상자 안쪽 여백을 지정한다. 위에서 설명한 text-indent에서 padding을 사용해 여백을 줘야 하는 이유도 이 때문이다.
margin은 상하좌우 4가지 속성으로 구분해서 쓴다. margin-top, margin-bottom, margin-left, margin-right으로 원하는 방향만 여백을 줄 수 있다. 또한 margin 하나에 2개, 3개, 4개 값을 사용할 수도 있다.
▷ 사용 방법
.box_margin_2 { margin : 2em; }
.box_padding_2 { padding : 2em; }
▷ 본문에 사용
<p class="box_margin_2">margin은 글상자 바깥쪽의 여백을 지정하는 속성입니다.</p>
<p class="box_padding_2">padding은 글상자 안쪽의 여백을 지정하는 속성입니다.</p>
테두리를 그려 보면 margin과 padding의 차이를 알 수 있다.
● border : 글상자 바깥쪽, 안쪽 여백 border는 여러 값이 모두 포함되야 하는 속성이다. 이중 선의 종류는 반드시 넣어야 한다. 두께, 색은 기본값이 정해져 있지만 선은 정해져 있지 않기 때문에 선 종류를 지정하지 않으면 테두리가 표현되지 않는다.
▷ 사용 방법
.txt_box { border : solid 2px red; }
▷ 본문에 사용
<div class="txt_box">
<p>글상자는 선 종류, 두께, 색깔 이렇게 3가지 값을 갖습니다.</p>
</div>
구분 | 기본값 | 값 |
선 종류 (style) | 필수항목 | solid(실선) dotted(점선) dashed( double(이중 실선) groove, ridge, inset, outset 등 |
두께 (width) | medium | medium thin thick px(숫자로 입력) |
색 (color) | #000000(검정) 혹은 상속 값 | #000000 rgb(0,0,0) black |
border는 각각의 값을 나눠서 표현할 수 있다. border-color, boder-style, boder-width로 구분해 표현이 가능하다. 이렇게 구분을 하면 margin에서처럼 상하좌우 값을 다르게 적용하는 것도 가능하다. 또한 이 속성들은 border-left-color처럼 상하좌우를 개별적으로 지정할 수 있다.
▷ 예제
.txt_box { border-style : solid dotted dashed double; }
<div class="txt_box">
<p>border-style을 사용하면 상하좌우 스타일을 다르게 지정할 수 있다.</p>
</div>
(024-1)
●border-radious : 둥근 모서리 border-radius는 글상자 테두리를 둥글게 처리해 주는 속성이다. border-radius의 값을 조절하면 모서리의 둥근 정도를 조절할 수 있다.
▷ 사용 방법
.txt_box_round { border : solid 2px red; border-radius : 25px }
▷ 본문에 사용
<div class="txt_box_round">
<p>글상자의 모서리를 둥글게 처리하고 싶다면 border-radius를 사용한다.</p>
</div>
CSS 활용법. 나만의 템플릿 만들기
● style.css 파일 만들기 메모장이나 sigil 등 텍스트 파일일 편집할 수 있는 프로그램으로 style.css 파일을 만든다. 메모장을 열고 [파일 > 새이름으로 저장]을 하거나 sigil에서 [빈 스타일 시트 추가]를 한다. 파일이름은 원하는대로 지정하되 영문과 숫자만 사용한다. 새로 만든 스타일 시트(여기서는 style.css)에 다음에 설명하는 속성들을 모두 추가한다.
● 공통 속성 공통 속성으로 margin과 padding을 0으로 설정한다. HTML의 기본 문단 간격은 줄간격보다 넓다. 공통속성으로 margin과 padding을 0으로 설정하면 이 문제를 해결할 수 있다. 선택자 *를 사용하면 모든 태그에 속성이 상속된다.
* { margin : 0; padding : 0;}
HTML의 기본 문단 간격은 줄간격보다 넓다. 공통 속성으로 margin과 padding 간격을 조절해 해결할 수 있다.
● 기본 글꼴 설정 많은 편집자들이 글꼴을 지정할 때 [font-family : “나눔명조”]처럼 글꼴 이름으로 설정한다. 이렇게 하면 ‘코펍바탕’으로 글꼴을 바꿀 때 CSS의 다른 항목들도 모두 바꿔야 한다. 글꼴 이름을 “기본 글꼴”, “본문 글꼴‘, ”강조 글꼴’처럼 쓰임에 따라 지정을 하면 글꼴을 변경하고 CSS를 수정하는 불편을 해결할 수 있다.
@font-face {
font-family: “기본 글꼴”;
src: url(../Fonts/NanumMyeongjo.ttf);
}
● 제목 스타일 제목은 h1 ~ h6 태그 중 하나를 선택한다. 책 제목은 h1을, 장 제목은 h2나 h3를 절이나 소단락 제목은 h4~h6를 쓰면 좋다. 제목과 본문 간격을 두기 위해 빈 문단(<p><br></p>)을 4~5칸 삽입하는 편집자가 많은데 제목 태그에 margin-bottom을 주면 간단히 해결할 수 있다. 글꼴이나 글자 크기 등은 제목 모양에 따라 변경하자.
h2 {
font-family : “기본 글꼴”;
font-size : 1.5em;
text-align : center;
margin-bottom : 5em;
margin-top : 2em;
}
● 본문 기본 스타일 시중에 유통되는 전자책들이 들여쓰기, 양쪽 정렬을 하지 않아 뷰어에서 강제로 스타일을 적용한다. 뷰어가 처리해 주니 편해 보이지만, 들여쓰기, 양쪽정렬을 하면 안되는 편집까지 강제로 적용되는 문제가 생긴다. 책을 만들 때 본문 들여쓰기, 양쪽 정렬이 필요한 책이라면 반드시 본문 기본 스타일을 추가해 주도록 하자. 줄간격 1.8em은 국내 유통사 뷰어에서 가독성이 가장 좋다고 생각하는 수치다. 책의 성격이나 편집자 취향에 따라 수정하면 된다.
p {
font-family : “기본 글꼴”;
text-indent : 1em;
line-height : 1.8em;
text-align : justify;
}
● 텍스트 정렬 편집을 하다 보면 텍스트 정렬은 수시로 사용하게 된다. 이런 스타일은 기본으로 CSS에 추가해 두면 편집이 편해진다. 왼쪽 정렬과 오른쪽 정렬은 [text-indent : 0;] 속성을 추가했다. 본문 기본 스타일에 들여쓰기를 설정했기 때문에 정렬 스타일에 들여쓰기를 0으로 하지 않으면 왼쪽으로 약간 치우친다. 가운데 정렬을 했는데 중앙에서 약간 벗어나 보이면 들여쓰기를 했는지 확인해 보자.
.txt_left { text-indent : 0; text-align : left; }
.txt_center { text-indent : 0; text-align : center; }
.txt_right { text-align : right; }
들여쓰기를 0으로 주지 않으면 왼쪽으로 치우친다.
● 글상자 이 스타일을 이용하면 테두리와 배경색이 있는 글상자를 쉽게 만들 수 있다. 스타일을 CSS 파일에 복사해 넣고 원하는 속성 값만 수정하면 된다. 속성이 필요 없다면 값을 0으로 주거나 삭제를 하면 된다.
.txt_box {
border : solid 1px #999999; /* 선 종류, 두께, 색 */
background-color: #dddddd; /* 배경색 */
border-radius : 20px; /* 모서리 둥글게 처리 */
padding : 1em; /* 안쪽 여백 */
}
● 나만의 style.css 템플릿 이제 위에서 설명한 내용들을 하나의 style.css 파일에 정리를 해 보겠다. 이 스타일만 있어도 소설처럼 편집이 간단한 전자책을 만들 수 있다. 아래 스타일시트 파일은 위에서 설명한 내용에 파란색 테두리 글상자 하나를 추가한 파일이다. 이처럼 기본 스타일에 약간씩 변형을 가하면 누구나 새로운 스타일 시트 탬플릿을 만들 수 있다.
▷ style.css 탬플릿 파일
* { margin : 0; padding : 0;}
/* 폰트를 추가하고 싶다면 이 항목을 복사한 후 url을 변경한다 */
@font-face {
font-family: “기본 글꼴”;
src: url(../Fonts/NanumMyeongjo.ttf); }
h2 {
font-family : “기본 글꼴”;
font-size : 1.5em;
text-align : center;
margin-bottom : 5em;
margin-top : 2em; }
p {
font-family : “기본 글꼴”;
text-indent : 1em;
line-height : 1.8em;
text-align : justify; }
.txt_left { text-indent : 0; text-align : left; }
.txt_center { text-indent : 0; text-align : center; }
.txt_right { text-align : right; }
.txt_box {
border : solid 1px #999999; /* 선 종류, 두께, 색 */
background-color: #dddddd; /* 배경색 */
border-radius : 20px; /* 모서리 둥글게 처리 */
padding : 1em; /* 안쪽 여백 */ }
/* 파란색 테두리에 흰색 배경의 글상자 추가 */
.txt_box_blue {
border : solid 1px #000099;
background-color: #ffffff;
border-radius : 5px;
padding : 1em; }
▷ style.css 탬플릿을 적용한 HTML 코드
<h2>4.5.7 나만의 style.css 템플릿</h2>
<p>이제 위에서 설명한 내용들을 하나의 style.css 파일에 정리를 해 보겠다. 이 스타일만 있어도 소설처럼 편집이 간단한 전자책을 만들 수 있다. </p>
<p>아래 스타일시트 파일은 위에서 설명한 내용에 파란색 테두리 글상자 하나를 추가한 파일이다. 이처럼 기본 스타일에 약간씩 변형을 가하면 누구나 새로운 스타일 시트 탬플릿을 만들 수 있다. </p>
<div class="txt_box">
<p class="txt_left">왼쪽 정렬</p>
<p class="txt_center">가운데 정렬</p>
<p class="txt_right">오른쪽 정렬</p>
</div>
<p><br/></p>
<div class="txt_box_blue">
<p>간단한 수정으로 새로운 글상자를 만들 수 있다.</p>
</div>
style.css 탬플릿을 적용한 결과
180개 정도의 CSS 중에 style.css 템플릿에 있는 속성만 잘 활용해도 소설, 인문 같은 텍스트 중심의 책은 대부분 편집이 가능하다. 그림을 글자와 자연스럽게 배치해 주는 float, 글자의 수직 정렬을 해주는 vertical-align, 글상자에 입체감을 주는 box-shadow처럼 몇 가지 고급 속성을 익힌다면 종이로 인쇄된 책은 대부분 전자책으로 편집할 수 있다. 전자책 전문 편집자가 되고 싶다면 3회와 이번 회에 소개한 HTML과 CSS를 익히고 지면 관계상 소개하지 못했지만 책 편집에 사용할 수 있는 몇가지 태그와 스타일 속성을 공부하기 바란다.
고정레이아웃 샘플.epub
