- 표지 스타일
표지 스타일은 한번 만들면 모든 책에 사용할 수 있다. 간단하게 편집하고 싶다면 아래처럼 좌우 가운데 정렬을 해 주면 된다. 이미지 태그는 <div>나 <p>태그로 감싸는데 <p>태그로 감쌀 경우 들여쓰기가 되지 않도록 주의해야 한다.
<CSS 코드>
.img_cover {
text-indent : 0; /*div 태그를 쓸 경우 없어도 됨*/
text-align : center;
tidth : 100%;
teight : 100%
}
<HTML 코드>
<p class="img_cover"><img
src="../Images/cover.jpg" alt="cover" /></p>
이렇게 표지를 삽입하면 좌우는 가운데 정렬이 되지만, 세로로 긴 화면에서 보면 표지가 화면 위쪽에 붙는다. 표지가 뷰어의 상하좌우 중앙에 오게 만들고 싶다면 아래 스타일을 사용할 수 있다.
<css 코드>
.cover {
width: 100%;
height : 100%;
text-indent : 0;
text-align : center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
}
img.cover {
width : 100%;
height : auto;
}
<html 코드>
<div class="cover"><img
alt="표지 이미지"
class="cover" src="../Images/cover.jpg"
/></div>
표지 스타일 적용 전
표지
스타일 적용 후
- 속표지 스타일
전자책과 종이책은 읽는 방식이 다르다. 텍스트를 담는 그릇 자체가 종이와 디지털이라는 전혀 다른 성질이다. 종이책 편집에 익숙한 편집자들은 전자책에 종이책 감성을 담으려고 노력을 하는데, 그러다 보면 아래 같은 편집이 나오게 된다.
종이책과 똑같이 편집한 전자책
이 책은 필자가 시간상의 문제로 외주 제작을 의뢰해 받은 전자책 파일이다.
표지, 책등의 저자 소개, 저작권면 등 목차까지 6개 페이지가 나온다. 스마트폰 같은 작은 화면에서 보면 저자 소개, 저작권면 등은 2~3페이지가 나오기 때문에 실제로는 10페이지가 넘는다.
독자의 입장에서 생각해 보자. 종이책이라면 책을 펼쳐 바로 본문으로 넘어갈 수 있다. 편집자에게는 책등과 속표지와 저작권면이 중요하겠지만, 독자에게는 큰 의미가 없다. 특히 전자책은 바로 본문으로 넘어갈 수 없기 때문에 책을 열자 마자 필요 없는 페이지를 10페이지 이상 넘겨야 하는 불편이 생긴다.
저자소개와 판권면을 책의 뒤로 보내고, 속펴지를 없앤 편집
편집을 수정해 책에 포함되야 하는 저자소개와 판권면은 뒤로 넘기고, 속표지를 없앴다. 독자는 이 책을 볼 때 본문까지 가는데 3페이지면 충분하다. 전자책을 편집할 때는 종이책과 달라야 한다는 생각으로 전자책에 필요하지 않은 부분은 과감히 없애고, 독자에게 불편할 수 있는 부분은 뒤쪽으로 넘기는게 좋다.
그래도 속표지가 필요한 경우가 있다. 그럴 때는 겉 표지와 편집을 달리 가져가는게 좋다. 샘플로 사용하는 이상한 나라의 앨리스는 종이책으로 보면 목차까지 4페이지가 있다. 간지와 책날개 등을 포함하면 7페이지가 된다.
전자책으로 편집할 때는 표지, 속표지, 목차 이렇게 3페이지만 표현할 것이다.
속표지는 종이책 이미지를 그대로 가져와도 되지만 여기서는 표지 스타일을 적용해 텍스트 형식으로 제작하려고 한다.
왼쪽은 종이책 표지이고 오른쪽은 CSS를 적용하기 전 EPUB 속 표지이다. 속표지에는 영문 제목, 한글 제목, 저자, 역자 그리고 출판사 로고 이렇게 5개의 스타일이 필요하다.
- 영문 제목
영문 책 제목은 h1 태그를 사용한다. 제목 아래에 밑줄이 있고, 글자 크기는 다른 글자보다 커야 한다. 태블릿 처럼 화면이 넓은 기기에서는 제목이 한 줄로 표현되지만, 스마트폰에서는 제목이 2줄 이상이 될 수 있어 밑줄은 화면 길이에 맞춰 폭이 조절되야 한다.
<h1>Alice’s Adventures in
Wonderland</h1>
h1 /* 책 제목에 사용 */
{
text-indent:0 !important;
text-align:center;
font-size:3em;
font-family: "Times New Roman", Times, serif;
display : table; /* 제목 밑줄*/
border-bottom : solid 1px #000000;
margin : 20% auto 10px auto;
padding-bottom : 10px;
}
위 스타일을 적용하면 아이패드의 넓은 화면과 스마트폰의 좁은 화면에 맞춰 글자가 자동으로 배열된다. 밑줄 역시 화면에 맞춰 길이가 조절된다.
- 한글 제목
한글 제목에는 h2를 사용한다. 한글 제목은 글자 크기를 맞추고 가운데 정렬을 시켜준다. 그리고 한글 제목과 저자 사이에 간격이 벌어져 있으니 margin으로 폭을 조절해 준다.
<h2>이상한 나라의 앨리스</h2>
h2 {
text-indent : 0 !important;
text-align:center;
font-size:1.6em;
font-family:"강조글꼴";
margin : 0 0 15% 0;
}
- 저자와 역자
저자와 역자는 p 태그에 클래스로 스타일을 지정한다. 저자와 역자 역시 가운데 정렬에 글자 크기만 지정해 주면 된다.
<p class="sub_author">루이스 캐럴</p>
<p class="sub_translator">최지원 옮김</p>
.sub_author {
text-align : center;
text-indent : 0 !important;
font-size:1.2em;
font-family:"기본글꼴";
}
.sub_translator {
text-align : center;
text-indent : 0 !important;
font-size:0.8em;
font-family:"기본글꼴";
}
- 로고
로고 이미지가 준비돼 있다면 Images 폴더에 로고 이미지를 불러온다.
로고는 화면 크기에 따라 크기가 조절되야 한다. 아이패드처럼 큰 화면에서는 크게, 스마트폰 같은 작은 화면에서는 작게 조절되야 한다. 화면 크기에 따라 로고는 가로 20% 크기로 하고, 최대 크기는 100%를 넘지 않게 스타일을 지정한다.
<p class="logo"><img alt="logo"
class="logo" src="../Images/logo.png" /></p>
.logo {
text-align : center;
text-indent : 0 !important;
}
img.logo {
margin-top : 10%;
width : 20%;
max-width : 100%;
}
왼쪽은 종이책 속표지, 오른쪽은 전자책 CSS를 적용한 표지
스타일이 모두 적용이 되면 종이책 표지와 비슷한 느낌으로 속표지가 표현된다. 차이가 있다면 이미지형 표지는 화면 크기가 작아지면 글씨를 읽기 힘들어지고, 가로 화면에서도 세로형으로 표현되지만 텍스트로 편집한 표지는 가로/세로에 따라 표지 배열이 바뀌고 화면이 작아도 글씨 크기가 그에 맞게 조절된다는 점이다.
전자책 표지는 화면크기 및 비율에 맞춰 자동으로 조절됨
* Tip
스타일을 적용하다 보면 똑같이 반복되는 속성이 있다. 제목 스타일도 아래 속성이 계속 반복된다.
text-align : center;
text-indent : 0 !important;
font-family:"기본글꼴";
이렇게 반복되는 스타일은 한번에 지정을 할 수 있다.
h2 .sub_author .sub_translator {
text-align : center;
text-indent : 0 !important;
font-family:"기본글꼴";
}
h2 {
font-size:1.6em;
margin : 0 0 15% 0;
}
.sub_author {
font-size:1.2em;
}
.sub_translator {
font-size:0.8em;
}
중복 스타일을 묶어 한번에 지정을 하면 CSS 파일을 조금 더 깔끔하게 정리할 수 있다.
속표지 스타일은 책마다 다양한 변형이 가능하다. 이미지로 표현할 수도 있고, 텍스트로 된 속표지라면 여기에서 처럼 CSS로 스타일을 지정해 표현할 수도 있다. 어떤 형태로 만들 든 전자책 화면은 종이책 처럼 고정되어 있지 않고 다양한 비율, 다양한 크기라는 점을 잊지 않는게 중요하다. 이미지로 속표지를 넣더라도 4인치 스마트폰부터 10인치 태블릿까지 고려해서 편집을 해야한다.
