나에게 어울리는 삶을 살기로 했다 - 여름오후

제목 : 나에게 어울리는 삶을 살기로 했다

출판사 : 여름오후

제작기간 : 2일


2도 인쇄용 PDF를 받아 이미지 색을 다시 설정하느라 이미지 편집 시간이 걸렸습니다. 본문에도 재미있는 스타일이 있어요.



목차는 단순해 보이지만 느낌을 그대로 살리려면 조금 까다로와요. 장 번호 모양을 그대로 살리면서 장 제목과 절 제목 배치를 해야되서 약간 트릭(?)을 썼습니다. 하늘색은 2도 인쇄용이라 실제 종이책 색상은 보라색이에요.


전자책에서는 이렇게 보입니다.


종이책에 2페이지로 편집된건 전자책에서 1페이지로 느낌을 살려야 합니다.

역시 색은 보라색이에요.



전자책에서는 이렇게 보입니다. 

2페이지로 된 테두리를 1페이지로 처리했어요. 테두리는 단순합니다. border로 만들면 되요.

본문은 약간 손이 가는 부분이 있었지만 스타일 자체는 다른 책과 큰 차이가 없습니다. 첫단락 들여쓰기 없고, 인용구, 목록 등 많이 쓰이는 스타일입니다.

그런데 절 제목 아래에 이런 점이 붙어있어요.


총 9장, 각 장마다 5개의 절이 있어 총 45개 절입니다.

제목 아래에 45번 똑같은 코드를 반복해서 넣어야 할 때 사용할 수 있는 스타일을 설명드린 적이 있어요.


의사클래스(Pseudo-class)를 활용하면 코드를 넣지 않아도 제목 아래에 자동으로 점이 들어갑니다.

의사 클래스는 여기를 참고하세요 





h3:after 클래스를 사용해 스타일을 잡으면 HTML 태그는 이렇게 됩니다.

아래 코드를 보면 <h3>내 삶을...</h3> 밑에 점을 넣는 코드가 보이지 않아요.



하지만 책보기나 미리보기로 보면 이렇게 점이 들어갑니다. 

점을 넣지 않아도 되고, 점 대신 다른 문장이나 기호로 바꿀 일이 생겨도 CSS에서 코드 한줄만 수정하면 모든 제목에 적용되기 때문에 편집 시간을 절약할 수 있어요.





전자책으로는 이렇게 보입니다.



복잡한 스타일은 아니지만 재미있는 속성을 사용한 책이에요.

여름오후 출판사의 첫번째 책이니 전자책으로도 많이 봐주세요 ^^

설정

트랙백

댓글

지금 하지 않으면 언제 하겠는가 - 토네이도

책 제목 : 지금 하지 않으면 언제 하겠는가

출판사 : 토네이도

제작 기간 : 2일


2일 걸렸는데 오전에 다른 일을 하며 만들었기 때문에 실제 제작 기간은 1.5일 정도입니다.


이 책에는 얼마 전에 설명드린 스타일이 나왔어요.




종이책 목차에 이런 테두리가 있습니다. 

이런 테두리를 만드는 방법은 2가지예요.



첫째, border를 이용하는 방법.


.sample {

    border-top : 10px grey solid;

    border-bottom : 10px grey solid;

    border-left : 10px black solid;

    border-right : 10px black solid;

}


둘째, 테두리 이미지를 쓰는 방법


자세한 설명은 아래 글을 참고하세요.


패턴을 넣은 테두리 : http://epubguide.tistory.com/254


저는 두번째 방법을 썼습니다. 

어떤 방법을 쓰든 괜찮습니다. 


전자책에서는 이렇게 보여요






그리고 이런 스타일이 있네요.

이미지로 넣을까, 글자로 넣을까 고민을 하다 글자로 넣었어요.

Introduction이라는 부분을 이미지로 넣으면 더 깔끔할 것 같지만, 화면 폭에 따라 확대/축소 되면서 '마흔 번째 생일에 깨달은 것들' 이라는 제목과 글자 크기 비율이 맞지 않을 것 같았습니다. 그래서 Introduction도 텍스트로 넣었어요.





전자책으로는 이렇게 보입니다. 

Introduction과 딱 맞는 무료 폰트를 찾지 못해 글자 느낌은 달라요. 하지만 화면 크기와 상관 없이 '마흔 번째 생일에 깨달은 것들'이라는 글자와 비율이 유지됩니다. 이미지로 들어가면 화면 폭에 따라 비율이 달라질거예요. 


본문 스타일은 평범합니다. 특별히 설명할 만한 스타일은 없어요.




전자책에서는 이렇게 보입니다. 



본문 중간에 재미있는 스타일이 하나 더 있습니다.


종이책에서는 이렇게 보이는데


iBooks, 리디북스 등에서는 이렇게 보여요.


교보eBook, 알라딘 등에서는 이렇게 보입니다.



'지금 하지 않으면 언제 하겠는가' 전자책 스타일이었습니다.

책도 재미있어요. 전자책 출간되면 읽어보세요 ^^


설정

트랙백

댓글

알츠하이머의 종말

책 제목 : 알츠하이머의 종말

제작 포인트 : 전형적인 스타일의 책


알츠하이머의 종말은 경제경영/자기계발 류의 전형적인 스타일을 갖고 있습니다. 


1. 본문과 다른스타일의 문단 인용구

2. 목록 스타일의 인용구

3. 이미지와 이미지 설명

4. 표

5. 박스 형태의 글상자

6. 팝업 주석

7. 한글-외국어(영어, 한자 등) 병용 표기

8. 괄호 설명

9. 여러 단계의 소제목...


교과서 같은 편집 스타일이라 제작 결과물을 공유합니다.


부 제목 페이지는 이렇게 2페이지로 되어 있습니다. 

이걸 전자책에 그대로 넣으면 쓸모 없는 페이지 넘김이 발생해 독자들이 불편해요.

전자책을 안읽는 사람은 모르겠지만, 전자책을 읽는 분들은 불필요한 페이지 로딩이 반복되는게 많이 불편하거든요.




그래서 이렇게 수정을 했습니다. 

부 제목 페이지를 하나로 합쳐 종이책 스타일을 살리면서 전자책에 어울리도록 만들었습니다.

2페이지에 담긴 내용을 한페이지로. 그래서 부 제목을 한번에 넘길 수 있도록 했어요.

* 교보 뷰어에서 캡쳐하니 워터마크가 들어가네요.


목차 페이지는 별로 손댈게 없어 최대한 종이책 스타일을 살렸습니다. 


전자책에서는 이렇게 보여요.


많은 책들이 장 제목의 번호에 스타일을 줍니다. 이 책도 장 번호 스타일이 독특합니다. 단순해 보이지만 이런 스타일은 잡기 어렵지요. 이미지로 넣는다면 글자 크기를 변경할 때 이미지 크기도 같이 변경하도록 해야합니다. 이미지의 배경색을 투명으로 하면 사용자가 배경색을 바꿔도 어색하지 않아요. 


그리고 장의 첫번째 단락에는 이미지가 들어갔습니다.

글자 모양이 다르거나 이렇게 이미지가 들어간 책이 많이 있지요.

이 이미지도 글자 크기를 바꾸면 글자 크기와 같은 비율로 바뀝니다. 

배경색을 없애 독자가 배경색을 바꿔도 이미지가 하얀 네모로 보이지 않아요.


* 이미지 배경을 없애면 글자 크기나 배경색이 바뀌어도 글머리 기호 같은 이미지는 하얀 네모로 표시되지 않습니다. 글자 크기와 이미지 크기를 연동시켜 글자를 확대하거나 축소해도 이미지는 글자 비율에 맞춰 자동으로 확대/축소 됩니다.  



이 책은 목록 스타일의 인용구가 많습니다.

목록 스타일도 글머리 번호와 글머리 기호로 구분돼 있습니다.


글머리 번호 중에 강조가 들어간 경우도 있습니다. 


인용구는 위, 아래, 왼쪽만 여백을 줬습니다. 글자 크기는 본문보다 작게. 종이책 편집을 그대로 살렸습니다. 


이미지와 이미지 설명입니다.

이미지 설명은 본문보다 작은 글씨로 이미지 폭에 맞춰 넣었습니다. 


이 책에 들어간 표는 한 칸에 들어있는 내용이 많지 않고 2단~3단으로 열이 많지 않습니다.

반면 글자가 많고 판형이 조금 큽니다. 그리고 2페이지 이상 걸쳐있는 표가 많지요. 그래서 표를 이미지로 넣을 경우 스마트폰에서는 글자가 작아 읽기 불편합니다.


그래서  이미지로 넣지 않고 표로 넣었어요. 표로 넣을지, 이미지로 넣을지는 표에 따라 달라집니다. 이 책은 이미지 보다는 표로 들어가는게 가독성에 좋다고 판단했습니다. 




글상자가 많지는 않습니다. 하지만 이렇게 회색이나 패턴 배경이 들어가 있습니다. 




본문 안에 글상자가 들어간 경우도 있습니다. 

본문 안에 들어간 글상자는 배경색이 아니라 패턴이 있는 배경이미지 입니다. 



글상자가 단독으로 들어가면 패턴 배경이 확실하게 보입니다. 


팝업주석입니다.

팝업주석을 넣을 때는 주의해야합니다. 예스24 안드로이드 버전에서는 팝업 주석이 링크로 연결되거든요. 그래서 팝업과 링크 모두 포함하는게 좋습니다. 팝업 주석이 지원되는 뷰어는 팝업으로, 링크만 지원하는 뷰어는 링크로 이동합니다.


교보, 리디, iBooks는 팝업주석이 지원하는 대신 주석 내용이 나타나지 않습니다. 그래서 주석 내용이 있는 부분에는 일부 뷰어에서 주석 내용은 팝업으로만 볼 수 있다는 안내 문구를 넣어 주는 것도 좋습니다. 



설정

트랙백

댓글

분노유발 심리학

책 제목 : 분노유발 심리학

포인트 : 작은 부분에서 색다른 편집이 필요했던 책.


제목과 내용이 재미있는 책입니다. 분노유발자를 아홉가지 '또라이'로 분류해 대처하는 방법이 담긴 책이에요.


'또라이'라는 단어가 좀 과격하다 싶을 수 있는데, 책머리에 왜 '또라이'라는 단어를 선택했는지 설명이 나옵니다. 그리고 책을 보면 왜 '또라이'인지 알게 되고요.


어려운 스타일은 없었지만 처음 시도해 본 재미있는 편집이 몇가지 있습니다.


가장 고민을 많이 했던게 목차였네요 ㅡ.ㅡ;;

종이책 목차가 이렇게 되어 있습니다. 

[차례]라는 글자 아래로 청록색 선이 있고, 선의 반대쪽 끝에는 이미지가 있어요. [차례]의 아랫쪽, 이미지의 중간에 선이 오도록 하는게 포인트라 이 부분을 살려봤습니다. 


전자책에서는 이렇게 보입니다. 페이지가 없는 전자책이다 보니 종이책에서 2페이지로 구분된걸 한페이지에 몰아넣었습니다. 딱 한번 들어가는데 공을 들여야 하나 싶은 생각도 들었지만, 이 포인트를 살려야겠다는 생각이 들더라구요.



화면이 큰 PC나 태블릿에서 본 화면입니다. 본문, 제목 스타일은 어렵지 않게 작업할 수 있습니다.




스마트폰처럼 작은 화면에서 보면 이렇게 보입니다. 제목 상단 이미지를 본문 크기에 맞췄는데 큰 화면에서 보면 제목과 비교해 너무 커져서 화면 폭의 40%로 맞췄습니다. 




이 책의 재미있는 스타일이 나옵니다. 소제목 아래에 선이 있는데 청록색과 검정색이 겹쳐지는 점선느낌입니다. 한가지 색의 선이나 점선이라면 border를 썼을거예요. 그런데 이런 선은 이미지로 들어가야합니다. 

저는 이 이미지를 썼습니다. 이 이미지를 배경으로 넣었어요.

배경으로 이미지를 넣으면 문장 길이에 맞춰 줄이 조절됩니다. 

문장 길이에 딱 맞추기 위해 display속성을 추가했어요.



여기 쓰인 선은 위에 쓰인 선과 모양이 다릅니다. 

display 속성을 없애고, 좌우에 여백을 줘서 아랫쪽 회색 글상자보다 안쪽으로 들어가도록 했지요.


대화문에 사람 이름을 다른 색으로, 내어쓰기, 이런건 설명 안드려도 쉽게 할 수 있을거예요^^


이 책에서 독특했던 부분이 또 있습니다. 영문 병기 글자가 위쪽이나 아랫쪽이 아닌, 글자 가운데 정렬을 했더라구요. 그래서 영문 병기 표기가 글자의 중간에 배치되도록 상하 정렬을 맞췄습니다. 


종이책에서는 이렇게 보입니다.



어렵고 까다로운 스타일은 없었는데 배경이미지로 밑줄을 넣고, 영문 병기를 글자 가운데로 맞춘건 처음이라 소개해 봤습니다.


설정

트랙백

댓글

일개미 자서전

제작 기간 : 2일

포인트 : 편집자가 신경을 많이 쓴 장 제목을 최대한 살리자.


이 책은 시간이 오래 걸릴 것 같지 않았는데 생각보다 오래 걸렸습니다. 이미지가 많이 들어있기도 했고, 인디자인에서 편집한 이미지라 원본 이미지를 쓰지 못하고 PDF에서 편집된 최종 이미지를 추출하는데 시간이 좀 걸렸지요. 그런데 가장 시간이 많이 걸린건 제목입니다. 4개 파트로 구성되어 있고, 각 파트별로 10 ~ 14개의 챕터로 나눠진 책입니다. 챕터가 40개 조금 넘게 구분되어 있습니다.


전자책 샘플 이미지 세번째 그림에 육각형 글머리 기호가 있고, 제목은 1줄 혹은 2줄로 세로로 늘어서 있는 장 제목 스타일이 있습니다. PDF(종이책)에는 이렇게 편지돼 있습니다.



본문에는 다른 포인트가 없어 이 부분을 살리다 보니 손이 만히 가서 편집하는 시간이 오래 걸렸습니다. 2일 중 1일은 40개의 제목을 넣는데 보냈네요.


아래는 편집이 끝난 '일개미 자서전' 캡쳐 화면입니다.



전자책 샘플 이미지



* 스마트폰에서는 제목과 본문 줄간격이 너무 벌어지면 보기 좋지 않아 종이책 보다 줄간격을 조금 벌렸다. 스마트폰을 통해 전자책을 보는 사람이 70% 정도 되기 때문에 PC나 태블릿 보다 스마트폰에 디자인을 맞췄다.  



설정

트랙백

댓글

복잡하지만 활용도 높은 스타일 - 엄마 같지 않은 엄마


엄마 같지 않은 엄마 표지

교보문고

리디북스


오늘 설명드릴 스타일은 조금만 응용하면 다양하게 활용을 할 수 있습니다. 

출산 경험이 있는 여성분들이 격하게 공감하는 책 '엄마 같지 않은 엄마'를 전자책으로 만들면서 스타일 고민을 많이 했어요. 까다로운 편집이 많아서 이미지로 넣을까 생각을 했다가, 본문 내용상 이미지 보다는 텍스트로 가는게 맞아 CSS로 표현했습니다. 스타일 잡는데 생각보다 시간이 오래 걸렸어요. 만들고 나면 별거 없는데, 방법을 생각하는데 시간이 오래 걸리네요 ^^;


1. 주요 편집 스타일


1.1 둥근 이미지에 텍스트 어울림 처리


이런 편집은 종종 봤지만 직접 만들 생각을 하지는 않았습니다. 종이책을 보면서 '가능하겠네' 정도만 생각하고 어떻게 구현할지 구체적으로 생각해 본 적은 없었는데 '엄마 같지 않은 엄마'에서 만나게 됐네요.


이 스타일은 2가지로 활용할 수 있습니다. 하나는 이 책에서처럼 둥근 이미지 바깥쪽에 자연스럽게 텍스트를 배치하는 방법입니다. 다른 하나는 둥근 이미지 안쪽에 텍스트를 배치하는거예요. 텍스트를 둥근 공모양으로 만들 수 있습니다. 




1.2. 말풍선 안에 텍스트 넣기


얼핏 보면 쉬워보이는데 생각보다 따져야 할게 많습니다. 이 책에서는 말풍선이지만, 사과모양, 컵 모양 등 배경 이미지를 바꿀 수 있어요. 종이책에서 종종 볼 수 있는 편집입니다.


1.3. 배경과 텍스트가 있는 장 제목


이 스타일도 이미지로 만들까 하는 생각을 했습니다. 장 제목 페이지를 이미지로 넣는 경우가 종종 있거든요. 그런데 이미지로 넣기에는 너무 단순한 형태여서 텍스트로 만들었습니다. 




1.4. 텍스트 길이에 따라 길이가 달라지는 밑줄


'첫째 출산', '모유 수유는 흥미로운 경험이다' 처럼 제목 길이에 맞게 밑줄을 넣는 스타일입니다. 간단해 보이지요? 그런데 밑줄이 border나 text-decoration이 아니에요. 이미지로 된 물결무늬입니다. 

글자 크기가 변경돼도 밑줄이 늘었다 줄었다 변해야 하고, 글자 수가 달라져도 변해야 합니다. 물결무늬라 이미지 크기를 조절하면 안되요. 텍스트 넓이에 맞게 물결 무늬가 늘어나야 합니다. 







2. 전자책 편집 스타일


2.1 둥근 이미지에 텍스트 어울림 처리


.circle_left {

width: 200px;

height: 200px;

float: left;

margin-right:1em;

border-radius: 50%;

-webkit-shape-outside:circle(50%);

shape-outside:circle(50%);

}


.circle_right {

width: 200px;

height: 200px;

float: right;

margin-left:1em;

border-radius: 50%;

-webkit-shape-outside:circle(50%);

shape-outside:circle(50%);

}


.box_family_intro {

display : block;

min-height : 200px;

margin-bottom : 2em;

}


.box_family_intro > p {

text-indent : 0;

font-family : "강조";

}


<div class="box_family_intro">

<p class="circle_left"><img alt="family_mother" src="../Images/family_mother.png"/></p>

<p class="noindent"><strong>엄마 세라</strong></p>

<p>일명 엄마 같지 않은 엄마.</p>

<p>작가이자 블로거. 철학 전공으로 대학교를 우수한 성적으로 졸업했다<sub>(철학 전공은 취직에 전혀 도움이 안 되었음)</sub>. 홍차를 엄청 마셔댄다. 포도주스와 캔에 든 진토닉을 좋아하며 BBC에서 방영하는 〈폭풍의 언덕〉 광팬이다. 페이스북을 밥 먹듯 들락거린다.</p>

</div>


스타일 중에 box_family_intro는 가족별로 텍스트가 겹치지 않도록 구분하기 위한 스타일입니다. float 속성을 써본 분이라면 다음 문단이 윗쪽 이미지에 올라가는 경험을 해보셨을 거예요. 텍스트가 많은 본문이라면 상관 없지만 이미지 하나에 가족 1명의 설명이 들어가야 되서 구분을 해줬습니다.

만약 텍스트가 많은 본문이라면 이런 구분을 해 줄 필요가 없어요.


이 스타일의 핵심은 이 두 속성이에요.


border-radius: 50%;

-webkit-shape-outside:circle(50%);


border-radius는 이미지 영역을 둥글게 제한해 줍니다. border 속성이 없기 때문에 없어도 차이는 없지만, 만약 border로 테두리를 그리고 background-color를 넣는다면 border-radius를 적용해야되요. 컴퓨터에서 이미지는 사각형일 수 밖에 없습니다. 그래서 이미지가 들어가면 그 영역은 사각형이 됩니다. border-radius : 50%;는 사각형 영역을 둥근 모양으로 바꿔주는 역할을 해요. 설명으로 이해가 안가면 border-radius : 50%;를 없애고, border : solid 1px #000000; 속성을 넣어보세요.


shape-outside 속성은 단어 뜻 그대로 바깥쪽의 모양을 만들어 주는 스타일이에요. 이 속성을 사용한 태그를 원형, 타원형, 삼각형, 오각형 등의 모양으로 만들 수 있습니다. 

circle() 값은 원형입니다. 50%를 기준으로 원의 크기가 정해집니다. 예를 들어 widht : 200px짜리 정사각형을 그렸다면 circle(50%)는 지름 200px짜리 원이 되요. 30%라면 120xp짜리 원이 되고요.


* circle(50%)



*circle(60%)


*circle(30%)


shape-outside는 circle(), polygon()-다각형, ellipse()-타원, inset() 등의 값을 사용할 수 있습니다.

이 글을 쓰면서 떠오른건데, '이상한 나라의 앨리스' 이미지에 텍스트 어울림 처리를 할 때 이 속성을 생각 못했었네요. 이 얘긴 다른 글에서 다루기로 하고...


이 스타일의 결과물입니다. 이미지 옆에 있는 빨간 선은 참고용으로 추가한거니 신경쓰지 마세요.

둥근 이미지를 따라 텍스트도 둥글게 배치됩니다. 원, 타원, 다각형 등 다양하게 활용할 수 있어 컵이나 인형 같은 복잡한 이미지에도 이런 식으로 텍스트를 배치할 수 있어 활용도가 높습니다.




2.2. 말풍선 안에 텍스트 넣기

.box_bubble {

background-image : url("../Images/speech_bubble.png");

background-size: 100% 100%;

background-repeat: no-repeat;

padding : 4em;

}


.box_bubble > p {

font-family : "강조";

}


<div class="box_bubble">

<p>아이를 낳기 전에 꿈꿨던 주부의 모습<sub>(1950년대 스타일의 멜빵 반바지를 입은 아이들이 장밋빛 뺨을 하고 얌전하게 노는 동안 친구에게 직접 구운 신선한 머핀을 대접하며 커피를 마시는 모습)</sub>이 떠오를 때마다 한바탕 웃으면서 레깅스에 묻은 아이들의 콧물을 닦는다.</p>

<p class="txt_right">라라, 촐리<sub>Chorley</sub> 거주</p>

</div>


배경에 이미지를 넣는 법을 소개한 적이 있습니다. (배경에 이미지 넣는 법 http://epubguide.net/182)

이를 활용한 스타일이에요. 다만 배경 이미지가 사각형이 아닌 불규칙한 모양입니다. 스타일이 간단해서 긴 설명은 필요 없을 것 같네요. 글상자를 만들고, 이미지를 배경으로 지정한 후 모양에 맞게 padding을 설정하면 됩니다. 


텍스트 양에 따라 말풍선 크기가 조절됩니다. 2페이지로 넘어가도 잘 표현되고요.


* 1페이지에 들어간 말풍선




* 2페이지 이상 넘어갈 때



2.3. 배경과 텍스트가 있는 장 제목


h2 {

font-family : "강조";

font-size : 1.8em;

display : block;

text-align : right;

margin-bottom : 5em;

}


.ch_no {

font-family : "제목";

font-size : 0.6em;

}


.bg_grey {

background-color : #ffffff;

opacity: 0.6;

margin : 15px;

padding : 5px;

}


.bg_grey > p {

text-indent : 0;

color : #000000;

}


.ch_bg {

background-image : url("../Images/ch_bg.jpg");

background-position : center;

background-repeat: no-repeat;

}


<body class="ch_bg">

<h2><span class="ch_no">Chapter 5</span><br/><br/>완벽하지 않아도<br/>괜찮아</h2>


<div class="bg_grey">

<p>괜찮지 않은 날이 있어도 괜찮다. 더는 버티기 힘든 날, 또다시 ‘웬수덩어리’ 모드로 전환한 아이들과 영영 인연을 끊고 싶어질 때, 엄마가 삐걱거리는 날들 말이다. 그런 순간마다 자신을 고문하는 엄마들에게 꼭 해주고 싶은 말이 있다. 삐걱거린다고 나쁜 엄마는 아니다. 지극히 인간적일 뿐이다. 엄마들이여, 삐걱거려도 괜찮다. 당신들은 정말 잘하고 있다.</p>

</div>

</body>


이것 역시 스타일이 복잡하지는 않습니다. 많이 쓰는 스타일을 어떻게 조합하느냐의 문제예요. 유통중인 책들 대부분이 장제목 페이지를 이미지로 넣는데 구조가 간단하다면 텍스트로 넣을 수 있습니다. 얼마 전에 올렸던 '설민석의 조선왕조실록(http://epubguide.net/201)' 처럼 텍스트가 많이 있을 때는, 종이책 사이즈의 장제목 페이지를 그대로 넣으면 글자를 읽기 어려울 수도 있어요. 


복잡한 패턴의 이미지가 들어간게 아니라면 이렇게 텍스트로도 얼마든지 장 제목 페이지를 만들 수 있습니다. 



2.4. 텍스트 길이에 따라 길이가 달라지는 밑줄


h4 {

font-family : "강조";

font-weight : bold;

font-size : 1.2em;


display : table;

text-align : left;

margin : 2em auto 1em 1em;

padding-bottom : 0.5em;


background-image : url("../Images/wave_line_small.png");

background-repeat: repeat-x;

background-position: left bottom;

}



<h4 id="sigil_toc_id_4">아기는 시도 때도 없이 먹는다</h4>



간단해 보이는데 생각보다 스타일이 복잡하지요? 물결모양의 밑줄을 그어야 하는데, 이 부분이 생각보다 까다롭거든요.


일정 길이의 물결무늬 이미지를 넣는다면 텍스트 길이에 따라 이미지를 확대/축소 시켜야합니다. 가로 폭만 확대시키면 될거라 생각할 수도 있는데 그럼 물결 모양이 길게 늘어져요.


제가 밑줄에 사용한 이미지에요. 



잘 안보이세요? 가운데 있는 먼지같은 이미지가 물결 무늬 밑줄을 그린 이미지입니다.

이 이미지를 가로로 계속 반복해 넣어 밑줄을 그린거예요. 텍스트가 얼마나 많든, 크기가 크든 작든 상관 없습니다. 한 자만 들어가도, 가로로 꽉 차도 물결 무늬가 일정하게 반복되요.


밑줄 뿐 아니라 반복되는 패턴의 배경이라면 이 스타일을 활용할 수 있습니다.







이 스타일을 활용할 만한 편집은 아주 많아요. 예를 들어 '당신은 아무 일 없던 사람보다 강합니다'라는 책 제목도 이 스타일을 활용할 수 있습니다. 제목에 다이아몬드 문양이 반복되는 밑줄이 있지요? ◇ 이 모양의 이미지 하나면 이런 밑줄을 그을 수 있어요. 이 책은 샘플링으로 설명 드릴게요 ^^



오늘은 여기까지...

설정

트랙백

댓글

단순하지만 재미있는 편집 - 요리하는 도시 농부

어떤 책은 전자책을 만들면서 재미 없고 지루하고 짜증이 납니다. '친절한 국어 문법'이 그런 책이었어요. 책 내용 때문은 절대 아닙니다. 제작하며 내용을 보는 경우는 거의 없거든요. 책 내용이 아무리 좋아도 편집이 정돈되지 않으면 짜증이 납니다. 

시간도 오래 걸려요. '정돈 됐다'는 상대적인 의미입니다. 종이책으로 보면 아주 잘 만든 책인데 전자책 관점에서 정돈되지 않을 수도 있어요. 그러니까 정돈 됐다는 의미가 종이책을 엉망으로 만들었다는 얘기는 아닙니다. 물론... 인디자인 파일이 엉망일 수는 있겠지요.


예를 들면, 대부분의 사전은 잘 정돈된 편집입니다. 편집이 아무리 복잡해도 정해진 패턴이 있어요. 잡지는 대부분 '정돈되지 않은' 편입니다. 이미지와 텍스트가 불규칙하게 놓입니다. 전자책을 만들 때 편집이 불규칙하면 편집 시간이 오래 걸리고, 새로운 스타일을 계속 추가해야 합니다. 스타일이 많으면 독자들이 책을 볼 때 편집이 깨질 가능성이 높습니다. 그리고 뷰어에서 로딩이 오래 걸립니다. 오류가 발생할 가능성도 높아지고요. 뷰어마다 다르게 보일 수도 있고.... 등등의 문제들 때문에 정돈되지 않은 종이책은 전자책으로 만들 때 재미가 없습니다.


이 책, 요리하는 도시 농부는 아주 깔끔하게 정돈되어 있는 책입니다. 그래서 편집도 쉬웠고, 스타일 잡는 재미도 있었어요. 특히 지금까지 소개하지 않았던 재미있는 스타일이 포함돼 있습니다. 


대표적인 스타일 4가지를 뽑아서 정리해 볼게요. 다른 책에도 많이 쓰이는, 활용도 높은 스타일 2개, 이미지로 처리를 하지만 CSS로 표현 가능한 스타일 2개입니다.


먼저 종이책에 표현된 스타일을 볼까요?


1. 주요 편집 스타일


1.1 서문 제목


설명을 몇번 했는데 실전에서 활용한 예를 보여드리기 위해 선택했습니다.

위, 아래에 2중 실선이 있는, 제목을 표현할 때 사용하는 스타일입니다. 2중 실선 뿐 아니라, 실선, 점선, 긴 점선 등 다양한 선을 활용할 수 있어요. 이미지를 넣을 수도 있습니다.





1.2 상하 위치 차이 나는 텍스트, 그라데이션 텍스트


아래 이미지는 2개의 스타일이 있습니다. '스스로 자라는 상추'라는 제목을 보세요. 상추가 아래로 내려가 있습니다. 보자 마자 '이거 간단한건데'라고 생각하실 분도 계실거예요. 아주 간단한 스타일입니다.


중간에 '쑥쑥 잘 크는 채소를 꼽으라면...'을 보면 왼쪽에서 오른쪽으로 갈 수록 글자 색이 달라집니다. 그라디언트(gradient), 혹은 그라데이션 효과라고 하지요. Tip[http://epubguide.net/199]으로 설명을 했는데, 실전에서 어떻게 활용하는지 보여드릴게요.


1.3 이미지 좌우 정렬 & 크기 자동 조절


이것 역시 간단한 속성입니다. 이미지를 왼쪽, 오른쪽에 보이도록 하는 스타일이에요. 이미지를 왼쪽, 오른쪽에 넣기는 아주 쉽지요? 여기에 화면 크기에 따라 이미지 크기가 조절되도록 했습니다. 간단한 속성인데 생각 외로 이미지를 화면에 맞게 확대/축소해 주는 책이 많지 않네요. 그래서 넣어봤습니다.



1.4 액자 느낌의 제목 테두리


이 스타일은 고민을 조금 했습니다. 재료와 설명 부분을 어떻게 처리할까? 제목은 이미지를 사용할까? 스마트폰 이용율이 높기 때문에 폰에 맞게 다시 구성을 했습니다. 재료를 윗쪽에 놓고 아래에 설명을 넣었어요. 

제목은 역시 텍스트로 처리를 했습니다. 뒷쪽 그림자까지 그대로 표현을 했어요. 물론 조금 차이는 나지만 느낌은 최대한 살렸습니다.




2. 전자책 편집 스타일


2.1 서문 제목


h2 {

font-family : "기본글꼴";

font-size : 1em;

border-top : double 4px #000000;

border-bottom : double 4px #000000;

display : table;

margin : 1em 0 5em 0;

padding : 1em 0.5em;

}


<h2>서<br/>문</h2>


팁으로 몇번 설명을 했던 스타일입니다. 책에 직접 적용하면서 어떻게 활용이 되는지 보실 수 있을거예요.


간단한 스타일이지만 스타일 자체는 조금 복잡합니다. 텍스트 상자를 만들어 보신 분들은 스타일이 복잡한 이유를 아실거예요. border 속성만 주면 화면 폭을 가득 채운 테두리가 그려집니다. 


border 속성만 주면 이렇게...


이걸 글자 폭에 딱 맞춰야합니다. width를 쓰면 안되요. 글자 수가 정해져 있다면 width로 맞출 수 있어도, 제목이 항상 같은 글자 수로 들어가지는 않잖아요. 글자 수에 따라 폭이 자동으로 조절되야 합니다. 그래서 display : table 속성을 줬습니다. 여기서는 margin-left, margin-right를 0으로 줬는데 스타일에 따라 auto로 줘야할 수도 있습니다. 


속성을 적용하면 뷰어에서 이렇게 보입니다.





2.2.1 절 제목


h4 {

font-family : "기본글꼴";

font-size : 1.4em;

font-weight : bold;

text-align : center;

margin-top : 3em;

margin-bottom : 3em;

}


h4 > sup {

vertical-align : 60%;

font-size : 1em;

}


<h4 class="h4_spring"><sup>자연에</sup> 물들다</h4>


이렇게 글자 위치를 상하 다르게 표현하는 방법은 여러가지가 있을거예요. 저는 sup를 써서 앞쪽 글자의 높이를 높여줬습니다. sup는 글자 크기가 본문 기본 글씨체보다 작기 때문에 font-size 속성을 줘서 글자 크기를 맞췄습니다. vertical-align은 퍼센트(%) 값을 이용해 높이를 조절할 수 있어요. sup가 갖고 있는 기본 속성도 기본 줄보다 약간 높게 올라가지만 vertical-align을 사용해 종이책에서 표현한 정도로 높이를 맞췄습니다. 


h4 > sup를 쓴건 sup를 다른 곳에도 활용하기 위해서예요. sup는 본문 인용 등에도 사용할 수 있어서 h4 태그 안에서만 vertical-align : 60; font-size : 1em; 속성이 적용되도록 했습니다. h4 태그 바깥에서는 이 속성이 적용되지 않습니다. 



2.2.2 텍스트 그라데이션


.txt_center, .txt_green, .txt_pink, .txt_pink_2, .txt_green_2, .txt_green_3,.txt_brown_3, .txt_brown_4, .txt_blue_4 {

text-align : center;

text-indent : 0;

}


/*spring*/

.txt_green {

font-size : 1.2em;

background: -webkit-linear-gradient(left, #7FD08B, #A1BE90);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

color : #A1BE90;

}


.txt_pink {

font-size : 1.2em;

background: -webkit-linear-gradient(left, #A1BE90, #EE6C92);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

color : #EE6C92;

margin-bottom : 2em;

}



<p class="txt_green">이 모든 시작이</p>

<p class="txt_pink">정말 우연이었을까.</p>


이 속성이 재미있어요. 저도 이 책을 만들면서 알게 됐습니다.


background: -webkit-linear-gradient(left, #7FD08B, #A1BE90)


이건 기본 속성으로 글상자에 그라데이션을 줄 때 사용합니다. 특별한 속성은 아니에요. 


-webkit-background-clip: text;

-webkit-text-fill-color: transparent;


이 두 속성이 중요합니다. background 속성은 글상자, 즉 텍스트의 배경에 그라데이션을 주는데 이 두 속성이 적용되면서 배경이 아닌 글자에 그라데이션이 적용됩니다. 


이 속성은 웹킷에서만 사용할 수 있습니다. 익스플로러나 오페라, 파이어폭스 같은 브라우저에서는 속성이 표현되지 않습니다. 웹킷을 사용하는 브라우저는 크롬과 사파리가 있습니다. 


네. 안드로이드폰의 기본 브라우저 엔진, 아이폰의 기본 브라우저 엔진이 웹킷이에요. 그리고 이 두 폰에 들어가는 국내 유통사 뷰어는 웹킷 엔진을 사용합니다. 그러니 두 뷰어에서 표현이 되는 것이지요. 


color : #A1BE90;


이건 보험입니다. 혹시라도 텍스트 그라데이션 속성이 적용되지 않을 때는 이 색이 글자색이 됩니다.


속성이 적용되면 이렇게 보여요. 그라데이션은 색상 차이가 크지 않아서 자세히 보셔야되요^^


2.3 액자 느낌의 제목 테두리


h5 {

font-family : "기본글꼴";

font-size : 0.7em;

text-align : center;

line-height : 3em;

}


h5:after {

content : url("../Images/recipe.png");

display : block;

margin-top : 2em;

}


.recipe_title_box {

font-size : 1.4em;

font-weight : bold;

border : 1px solid #000000;

background-color : #ffffff;

padding : 0.5em 1em;

display : box;

box-shadow: 7px 7px 5px #888888;

}


<h5>recipe 01<br/><span class="recipe_title_box">매크로바이오틱 샌드위치</span></h5>


이 스타일은 고민을 많이 했어요. 

유통되고 있는 책들은 대부분 이미지로 처리를 했습니다. 이미지로 처리하면 간단하긴 해요. 그런데 예쁘지는 않아요. 글자 크기도 조절할 수 없고, 스마트폰에서는 잘 보여도 태블릿에서는 이미지가 확대되 깨질 수 있거든요. 글자 크기가 본문과 어울리지 않을 수도 있고... 이미지로 넣었을 때 단점이 정말 많습니다.


제목 테두리를 넣는 방법은 다양합니다. 종이책과 똑같이 그림자를 점으로 처리하려면 배경만 이미지로 넣을 수도 있어요. 


[제작이 까다로운 책. 친절한 국어 문법 http://epubguide.net/197] 이 글에 2.4.1, 2.4.2를 참고하시면 되요. 여기서는 배경이미지를 상하로 넣었지만, 동일한 방식으로 좌우에 넣을 수도 있습니다.


그런데 이렇게 넣으면 코드가 너무 복잡해져요. 제목이기 때문에 h5 태그 안에 제목을 모두 넣어야 했습니다. 그래야 제목 자동 생성이 되거든요.


그래서 span을 이용해 테두리 상자를 만들고 그림자 효과를 줬습니다. 


background-color : #ffffff;


그림자 효과를 넣을 때는 글상자의 배경색을 넣어줘야되요. 배경색이 흰색으로 보여도 border-color를 주지 않으면 투명한 색이 적용됩니다. 배경이 투명해지면 그림자와 테두리가 겹쳐보이거든요.


display : box;


2.1에서 글자에 맞게 크기가 조절되도록 하기 위한 display : table;과 비슷한 목적으로 부여한 속성입니다. display:box;와 table;은 약간 차이가 나요. 2.1에서는 왜 table을 쓰고 여기서는 box를 썼는지는 직접 확인해 보세요 ^^


box-shadow: 7px 7px 5px #888888;


이건 그림자 효과를 주는 속성입니다. 글상자 뒤에 그림자가 보이도록 해줍니다. 종이책 처럼 점으로 된 그림자는 아닌데, 편집을 위해 이 부분을 포기하고 아래처럼 바꿨어요.


이 책에서는 하나를 더 바꿨습니다. 종이책은 재료를 왼쪽에, 설명을 오른쪽에 넣었어요. 종이책이라면 괜찮습니다. 태블릿도 문제 없을거예요. 그런데 스마트폰에서는 어떻게 보일까요? 폭이 좁은 스마트폰에서는 재료와 설명을 좌우에 배치하면 엄청난 줄바꿈이 생길거예요. 그래서 재료를 위로, 설명을 아래로 내렸습니다. 


스타일을 적용하면 이렇게 보입니다.



1.3 이미지 좌우 정렬 & 크기 자동 조절


.img_70_left {

margin : 1.5em 0;

text-aling : left;

text-indent : 0;

}



.img_70_right > img, .img_70_left > img {

width : 60%;

}



.img_70_right {

margin : 1.5em 0;

text-align : right;

text-indent : 0;

}


<p class="img_70_right"><img alt="img007" src="../Images/img007.jpg"/></p>

<p class="img_70_left"><img alt="img008" src="../Images/img008.jpg"/></p>


이미지 배치는 정말 '별거 없습니다.'

그냥 좌우 정렬 해주고, 적당히 여백 별려준 것 뿐입니다. 하지만 이미지 크기는 60%로 맞췄어요. 태블릿에서는 이미지가 크게 보이고 스마트폰에서는 작게 보입니다. 그런데 두 기기에서 모두 본문 가로 폭의 60%로 일정하게 보입니다. 


이미지 크기를 고정시킬 수도 있지만 화면 크기에 따라 자연스럽게 크기가 조절되도록 하면 다양한 기기에서 이용하기 편해집니다. 이미지는 가로 사이즈가 아주 커요. 이미지 크기가 작다면 최대 크기를 설정해 줬을거예요. 해상도 낮은 이미지가 너무 확대되면 깨지거든요.


이 이미지는 가로 폭이 상당히 큽니다. 가로 1000픽셀정도 되요. 그래서 풀HD 모니터에서 최대 화면으로 봐도 이미지가 깨지지 않습니다. 만약 이미지 해상도가 낮다면 max-width 속성으로 이미지의 최대 크기보다 화면이 더 커지면 확대되지 않도록 했을거예요.


스마트폰 크기에서, 그리고 태블릿 크기에서 이미지가 어떻게 보이는지 넣었습니다. 종이책과는 느낌이 조금 달라지지만 스마트폰이나 태블릿 등 화면 크기에 관계 없이 전자책을 볼 수 있는 편집이에요.



설정

트랙백

댓글

제작이 까다로운 책. 친절한 국어 문법 ①


시간은 오래 걸리고, 결과는 만족스럽지 않은 경우가 있습니다. 아무리 고민을 해도 '아! 이거야.'하는 스타일이 떠오르지 않고, 자잘한 스타일을 여러개 만들어야하는 책이 있어요. 편집할 내용의 많고 적음의 문제는 아닙니다. 편집할 내용이 많아도 패턴만 있으면 생각보다 시간이 오래 걸리지 않습니다.


편집 패턴이 불규칙하고 1~2번 쓰이는 스타일을 많이 만들어야 할 수록 전자첵 제작이 어려워져요.


이 책, 친절한 국어 문법이 딱 이런 책입니다.

EPUB 파일을 만들어 유통사에 등록한 후에 마음에 들지 않아 다시 편집을 했어요. 그런데 여전히 마음에 들지 않네요.


그래도 전자책 제작을 하며 쓸 수 있는 다양한 기술이 들어갔습니다. 전자책 제작 공부를 하는 분들에게는 도움이 될만한 내용이 많을거예요.


내용이 길어서 몇번에 나눠 올립니다.


1. 주요 편집 스타일


1.1 장, 절 번호


장 번호를 보면 이미지 배경 위에 텍스트가 올라와 있습니다. 이럴때는 이미지로 처리하는 경우가 많지요. 하지만 여러 장이나 절로 구분돼 있는 책은 이미지를 삽입하는 것도 일입니다. 

이 책에서는 장번호를 이미지 하나로 처리할 수 있는 스타일을 사용했습니다.





1.2 첫 글자


여기도 장 번호가 있습니다. 이 부분도 이미지로 처리를 했습니다. 그리고 장의 첫 글자가 큰 글씨에 다른 색으로 스타일이 지정돼 있습니다. 첫 글자를 강조하는 책이 많지요? 


1.3 이미지 가운데 정렬


이미지 가운데 정렬은 쉽지요? 일반 이미지면 가운데 정렬로 해서 width : 100%를 적용하면 됩니다. 그런데 텍스트가 들어간 이미지는 어떨까요? 

아래 영역은 글상자를 만들어 텍스트로 처리를 할 수 있습니다. 그런데 다양한 기기에서 보면 제대로 정렬이 되지 않을 수가 있어요. 글상자가 2줄이나 3줄로 내려온다던가, 글상자 안의 텍스트가 줄바꿈이 되는 문제가 생길 수 있습니다. 그래서 이미지로 넣었어요. 

이 이미지를 width : 100%;로 하면 스마트폰에서는 잘 보이지만 아이패드에서는 엄청나게 커집니다. 이럴 때 어떻게 처리를 해야할까요?



1.4 이미지 테두리 글상자


회색 테두리와 배경으로 된 글상자입니다. border로 만들면 쉽지요. 그런데 위, 아랫쪽을 보세요. 이미지로 처리되어 있습니다. 

모든 글상자 크기가 일정하다면 배경 이미지로 처리할 수 있습니다. 하지만 현실에서는 상황에 따라 크기가 달라지는 글상자가 더 많습니다. 윗쪽, 아랫쪽은 크기가 변하지 않으면서 가운데 부분만 늘어나는 글상자로 만들어야 합니다. 



2. 전자책 편집 스타일



2.1 장, 절번호


장과 절 번호 스타일을 묶은건, 두 스타일에 사용한 속성이 유사하기 때문입니다. 장 번호는 포스트잇을 배경으로 1단계, 2단계, 3단계 처럼 글자가 들어가 있습니다. 절 역시 접힌 종이 모양의 이미지가 배경으로 들어가 있고, Chapter 1, Chapter 2...로 번호가 들어갑니다.

먼저 장 번호부터 보겠습니다.


2.1.1 장 번호


[CSS]

.part_no_bg {

background-image : url("../Images/part_no_bg.png");

background-repeat: no-repeat;

background-size: 80%;

background-position: center;

width : 300px;

height : 102px;

margin : auto;

display : box;

}


.part_no {

font-family: "강조글꼴";

font-weight : bold;

font-size : 20px;

color : #00ADEE;


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;

}


[HTML]

<div class="part_no_bg">

<p class="part_no">• 1 단계 •</p>

</div>


이런 스타일은 이미지로 넣어도 됩니다. 이미지가 훨씬 간단할 거예요. 장 제목 전체를 이미지로 넣을 수도 있습니다. 그런데 장번호가 많아지면 이미지로 처리하기 힘듧니다. 만약 1단계 ~ 100단계까지 있다고 생각해 보세요. 장 번호 이미지나 장 제목 페이지만 100개를 만들어야 해요.


CSS로 처리를 하면 장 번호가 몇번 나오든 이미지 하나로 처리할 수 있다는 장점이 있습니다. 그리고 HTML 코드도 깔끔하게 정리할 수 있어요. 


part_no_bg는 글자 뒤에 보이는 이미지를 배경으로 처리한 속성입니다.



.part_no_bg {

background-image : url("../Images/part_no_bg.png");

background-repeat: no-repeat;

background-size: 80%;

background-position: center;

width : 300px;

height : 102px;

margin : auto;

display : box;

}


300*102 픽셀짜리 가상의 글상자를 화면 가운데 만들어 놓고 그 안에 part_no_bg.png 파일을 배경으로 넣었어요. 글상자 크기는 배경이미지나 들어가야 하는 텍스트 크기에 따라 조절하면 됩니다. 


여기서 중요한건, 글상자 크기와 글자 크기를 픽셀(px)로 설정했다는 거예요.

전자책 만들 때 고정 단위는 가급적 피해야합니다. 제가 쓴 다른 글에서도 px나 cm 같은 고정 단위는 사용하지 말라고 보셨을거예요. 그런데 여기서는 px를 사용했습니다.


px를 절대로 사용하면 안되는게 아니에요. 크기가 고정되어 있어야 하면 px를 사용해도 됩니다.

화면 크기에 따라 비율을 맞출 수도 있습니다. width를 30%나 50% 처럼 화면 비율에 따라 달라지게 하면 됩니다. 하지만 그럴 경우 가로나 세로 보기에 따라 장 제목만 화면에 가득 찰 수도 있습니다.


part_no의 font-size 역시 20px로 고정을 시켰어요. 만약 글자 크기가 커지면 어떻게 될까요? 배경 이미지를 벗어나거나, 배경이미지에 비해 글자가 너무 작아질거예요. 그래서 글자 크기도 고정을 시켰습니다. 뷰어에서 글자 크기를 변경해도 장 번호는 크기가 변하지 않아요.


뷰어에서는 이렇게 보입니다. 





2.1.2 절 번호


[CSS]

.ch_no_bg {

background-image : url("../Images/co_no_bg.png");

background-repeat: no-repeat;

background-size: 100%;

width : 115px;

height : 110px;

margin : auto;

display : box;

}


.ch_no {

font-family: "강조글꼴";

font-weight : bold;

font-size : 15px;


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;

}


[HTML]

<div class="ch_no_bg">

<p class="ch_no">1</p>

</div>


장 번호와 절 번호는 스타일이 똑같아요. 이미지 크기가 달라 width와 height만 조금 다릅니다. 이 스타일을 복사해 이미지 크기에 맞게 조절을 하면 다른 책에도 똑같이 적용할 수 있어요.


뷰어에서는 이렇게 보입니다.





2.2 첫 글자


[CSS]

strong {

color : #00ADEE;

font-size : 1.5em;

margin-left : 15%;

}


[HTML]

<p><strong>국어가</strong> 어떤 특성을 ...</p>



첫 글자에는 특별한 스타일이 들어가지 않았습니다. 여기서 팁으로 알려드릴건, span 태그를 쓰지 않고 strong 태그를 쓴 것과, margin-left를 사용한 부분입니다. 이런 스타일을 표현할 때 아래처럼 코드를 짜는 분들이 많이 있더라구요.


[CSS]

.first_letter_indent {

text-indent : 3em;

}


.first_letter {

color : #00ADEE;

font-size : 1.5em;

}


[HTML]

<p class="first_letter_indent"><span class="first_letter">국어가</span> 어떤 특성을...</p>


CSS가 익숙하지 않다면 first_letter에 text-indent : 3em;을 넣으면 되지 않나 생각하는 분들도 있을거예요. 이런 생각을 하신 분들께는 박수를 ^^//

이런 생각을 하는게 당연합니다. 생각하지 않은 분이라면 CSS가 익숙하거나, CSS에 소질이 없거나 둘 중 하나예요.


first_letter 속성에 text-indent : 3em;을 넣으면 코드가 깔끔해 질 수 있습니다. 하지만 아쉽게도 부모 태그 안에 들어간 자식태그는 text-indent 속성이 적용되지 않아요. 그래서 span 태그에 text-indent 속성을 지정할 수 없어 p 태그에 지정을 합니다.


margin-left는 자식 태그여도 여백이 적용됩니다. 그래서 text-indent 대신 margin-left를 쓴거예요. 속성은 조금 차이가 있지만 원하는 결과를 얻어낼 수 있습니다. 


적용된 모습은 2.1.2의 이미지를 참고하세요




2.3 이미지 가운데 정렬


[CSS]

.txt_center {

text-indent : 0;

text-align : center;

}


.img_center {

max-width : 100%;

margin-top : 2em;

margin-bottom : 2em;

}


[HTML]

<p class="txt_center"><img class="img_center" alt="img002" src="../Images/img002.png"/></p>


이미지 가운데 정렬은 정말 쉽지요. 그런데 이렇게 쉬운 부분에서 실수를 자주 합니다.


먼저, 가운데 정렬을 할 때 text-indent : 0; 속성을 주는게 좋아요. 이걸 안하는 분들이 의외로 많습니다. 이 글을 보는 분들 중에서도 왜 들여쓰기를 0으로 줘야 하지? 하고 의아해 하는 분들이 있을거예요.

아래 두 이미지를 보세요. 앞쪽은 들여쓰기가 되어 있고, 뒷쪽은 들여쓰기를 0으로 했습니다. 들여쓰기를 0으로 하지 않으면 이미지에도 들여쓰기가 적용되요. 화면의 가운데 들어가야 하는 이미지가 오른쪽으로 약간 치우쳐 보이게 됩니다. 아래 예는 이미지가 커서 그런데, 이미지가 작으면 균형이 틀어져 보여요. 그래서 이미지 가운데 정렬을 할 때는 의도한게 아니라면 들여쓰기를 0으로 주는게 좋습니다.


    


또 하나. width=100; 대신 max-width : 100;을 줬습니다. 사진이라면 width 100;을 해도 괜찮아요. 하지만 이 책에 있는 이미지는 텍스트를 대신해 사용했습니다. 그래서 일정 크기 이상 커지면 보기 좋지 않아요. 


이 이미지는 width : 100;을 한거예요. 태블릿 같이 가로로 넓은 화면으로 본다면 이미지가 너무 커집니다.


이건 max-width : 100;을 적용했을 때예요. 일정 범위 까지는 화면 크기에 맞게 조절이 되는데 화면이 너무 커지면 이미지 원본 크기보다 더 이상 커지지 않습니다.


max-width 를 쓸 때는 이미지 원본 크기가 중요해요. 이미지가 아무리 커져도 원본 크기보다 커지지 않는데 원본 크기가 너무 크거나 너무 작으면 보기 좋지 않을거예요.


화면 크기에 따라 본문 글자 크기가 달라져요. 스마트폰에서는 글자가 작고, 아이패드에서는 글자가 커집니다. 스마트폰하고 아이패드를 비교하면 3배~4배정도 글자가 클거예요. 이런걸 고려해서 이미지 크기를 적당히 잘라주면 본문 글자 크기와 비슷한 수준으로 이미지 속 글자가 보일거예요.





2.4 이미지 테두리 글상자


2.4.1 위, 아랫쪽 테두리만 있는 글상자


[CSS]

* { 

margin : 0;

padding : 0;

}


.box_top {

width : 100%;

line-height : 0;

}


[HTML]

<div class="box_top">

<img class="box_top" src="../Images/box_quote_top.png" alt="box_quote_top.png"/>

</div>


<div class="txt_out_3em">

<p><em>추상성</em>&nbsp;:실제 사물에...</p>

</div>


<div class="box_top">

<img class="box_top" src="../Images/box_quote_bottom.png" alt="box_quote_bottom.png"/>

</div>


글상자는 다양하게 활용을 합니다. 자기계발, 여행, 실용 등의 책에는 대부분 글상자가 들어갑니다. 간단한 글상자는 border로 만들 수 있습니다. 테두리를 넣고 배경 색을 지정하고 border-radius로 모서리를 둥글게 처리할 수 있습니다. box-shadow로 그림자 효과를 줄 수도 있고요.


조금 더 복잡한 디자인이 들어가면 이미지로 만들 수 있습니다. 이미지 패턴이 단순하다면 border-image를 쓸 수 있는데 복잡한 이미지라면 border로 한계가 있습니다.


이럴 때 div나 table를 활용할 수 있습니다.

글상자는 대부분 비슷한 패턴을 가집니다. 윗쪽에 글상자의 내용이 무엇인지 알려주는 부분, 아랫쪽, 그리고 본문 영역이지요.


그래서 div 태그를 3개 사용합니다. 

스타일은 의외로 간단합니다. div 안에 이미지를 넣는데 width를 100으로, 그리고 div와 div 사이에 간격을 없애기 위해 line-height를 0으로 줍니다. 저는 기본 스타일로 margin, padding을 0으로 주기 때문에 속성은 넣지 않았는데, 기본 여백이 설정되어 있다면 margin, padding을 0으로 주는게 좋습니다.



윗쪽과 아랫쪽에만 테두리가 있어 본문 영역은 텍스트를 위한 스타일만 들어갔습니다.

뷰어에서 보면 이렇게 보입니다. 





2.4.2 본문에 배경이 들어가는 글상자


[CSS]

.box_top {

width : 100%;

line-height : 0;

}


.box_ssok_bg {

background-image : url("../Images/box_ssok_middle.png");

background-repeat: repeat-y;

background-size: 100%;

padding : 0.5em 0.5em 0.5em 1em;

}


[HTML]

<div class="box_top">

<img class="box_top" src="../Images/box_ssok_top.png" alt="box_quote_ssok.png"/>

</div>


<div class="box_ssok_bg">

    <div class="txt_out_3em">

    <p class="txt_gothic_cyan">▶언어의 특성</p>


    <p><em>추상성</em> : 실제 사물에서 공통 개념을...</p>

</div>

</div>


<div class="box_top">

<img class="box_top" src="../Images/box_ssok_bottom.png" alt="box_ssok_bottom.png"/>

</div>


위, 아래 테두리는 2.4.1에서 사용한 것과 동일합니다. 같은 스타일을 쓰기 때문에 새로 만들 필요가 없습니다.


본문에 배경을 넣는 스타일은 조금 복잡합니다.

본문은 세로 길이가 일정하지 않습니다. 본문 내용에 따라 세로 길이가 바뀌어야 하지요. 그럼 배경 이미지 길이가 얼마나 되야할까요?



이게 실제 사용된 본문 이미지입니다. 이미지가 이렇게 클 필요도 없습니다. 세로 1px면 충분한데, 그러면 편집할 때 불편해 조금 크게 만들었습니다. 


배경 이미지 크기를 가로 폭에 맞추기 위해 background-size : 100%; 속성을 줬습니다. 

그리고 5px 밖에 안되는 세로를 본문 길이에 상관 없이 넣기 위해 background-repeat : repeat-y; 라는 속성을 부여했습니다. 


repeat-y 속성은 배경 이미지를 세로축으로 계속 반복하라는 속성입니다. 5px 짜리 이미지가 세로로 무한 반복되는 것이지요. 그래서 본문 길이만큼 배경이 들어갑니다. 


이렇게 넣어 주면 위쪽 테두리와 본문이 딱 붙고, 본문 이미지가 반복되어 아래처럼 표현이 됩니다.




같은 속성으로 배경 이미지만 바꾸면 아래처럼 보입니다. 스타일은 똑같고, 이미지만 바꿨습니다. 



이 책은 스타일이 너무 많아 1,2회로 나눠 올립니다. 1회차부터 스크롤 압박이 심하네요 ㅜ.ㅜ 그런 만큼, 재미있는 스타일이 많이 사용되었으니 2회차도 기대해 주세요~~

설정

트랙백

댓글

희곡을 위한 스타일 - 인형의 집

연극 대본, 희곡 같은 책이 의외로 많습니다. 셰익스피어, 소포클레스, 인형의 집... 저도 전자책을 편집하거나 뷰어 테스트를 하다보면 심심치 않게 대본형 전자책을 봅니다. 최근에는 인기 드라마 대본을 전자책으로 판매하기도 합니다.


그런데 대본 원고를 편집하는 방식이 제각각이더라구요.

아래 이미지를 보세요. 리디북스 미리보기로 인형의 집 전자책을 열어봤습니다. 리디북스 미리보기는 스타일이 100% 적용되지는 않아요. 그래도 전자책 뷰어로 보면 어떻게 보일지를 짐작해 볼 수 있습니다.



(클릭하면 확대해 볼 수 있습니다)


이 3가지 방식이 대본류를 편집할 때 가장 많이 사용하는 스타일인것 같아요.

어떤 책이 보기 편하세요? 왼쪽이나 오른쪽이 가운데보다 보기 편할거예요. 종이책은 왼쪽 처럼 내어쓰기 편집을 많이 합니다. 개인적인 취향이긴 하지만, 오른쪽 처럼 등장인물 이름이 너무 도드라져 보이면 대본을 보는데 신경이 쓰여서 저는 왼쪽 편집을 좋아합니다.(제가 만들어서 그런건 아니에요 ^^;)


이번엔 인형의 집을 갖고 전자책을 위한 대본 스타일을 정리해 봤습니다. 


 

1. 주요 편집 스타일


1.1 본문

이 두 페이지 안에 오늘 필요한 스타일이 모두 나와 있습니다. 종이책 PDF를 캡쳐한거예요.

먼저 (대본류의 용어를 모르니 먼저 양해를...) 배경 설명을 하는 부분이 있습니다. 들여쓰기를 안했다는 것 빼면 일반적인 '본문' 스타일이 적용됐어요.


1.2 설명

그리고 등장인물의 행동을 설명하는 부분이 있습니다. 괄호로 묶여있고, 등장인물의 대사에도 쓰입니다. 본문보다는 작은 글씨체예요.


1.3 이름

그 다음 등장인물 이름입니다. 굴림/고딕 계열의 글꼴을 사용해 대사와 구분을 합니다.


1.4 대사

끝으로 대사 부분입니다. 이름과 대사는 하나로 묶여 내어쓰기가 되어 있습니다.



2. 전자책 편집 스타일


2.1 본문


{

font-family:"기본글꼴";

text-align:justify;

line-height:1.8em;

font-size:1em;

text-indent : -3em;

padding : 0 0 0 3em;

}


p.noindent {

padding : 0;

text-indent : 0;

}


<p class="noindent">검소한 가구들이지만 품위 있게 꾸며진 아늑한 거실. 뒷벽에는 문 두 개가 있다. 오른쪽 문은 현...</p>

본문 스타일을 잡을 때 고민을 했습니다. 본문은 p 태그에 기본 스타일을 지정하기 때문에 편집할 때 다른 속성을 넣을 필요가 없습니다. 그런데 대본은 한번 더 생각을 해야되요. 


본문이 많이 나오나요? 아니면 대사가 더 많이 나오나요? 당연히 대사가 더 많이 나옵니다. 그렇다면 기본 스타일은 대사가 되야하지 않겠어요? 본문이 나오는건 장과 장이 넘어갈 때 2~3 단락 정도입니다. 


그래서 본문 기본 스타일을 책의 대부분을 차지하는 대사에 맞추고, 본문에는 noindent 속성을 추가했습니다. 


본문 분량이 많다면 div나 blockquote로 블럭을 지정하고 한번에 스타일을 지정할 수도 있습니다. 가족관계 기억 하시지요? blockquote + p { }요.




2.2 설명


sub

{

font-size:0.9em;

vertical-align : baseline;

}


<p class="noindent"><sub>(현관에서 초인종이 울리고...손에 들고 있던 크리스마스트리와 바구니를 건넨다.)</sub></p>

...

<p><span class="name">노라</span>헬레나, 크리스마스...보면 안 돼. <sub>(지갑을 꺼내며 짐꾼에게)</sub> 얼마죠?</p>


설명 항목은 새로운 스타일을 만들지 않았습니다. 이전 글에서 '기본 스타일'로 설명 드린 <sub> 태그를 그대로 사용했습니다.


설명도 몇가지 고민을 했습니다. 반복 횟수는 많은데 대사 중간에 들어가는 경우도 있거든요. p 태그에 클래스를 추가하는 방식이 더 깔끔하긴 하지만, 이렇게 하면 대사 중간에 들어가는 설명은 더 복잡해집니다. span 태그를 쓰거나, 똑같은 스타일을 선택자와 sub 2개로 만들어야 합니다.


그래서 저는 sub 태그로 통일시켰습니다.


스타일을 2개 만들어야 하는 이유 외에도 sub 태그를 쓴 이유가 하나 더 있습니다. 편집 시간 단축을 위해서예요.


설명은 모두 괄호( )로 묶여 있습니다. sub 태그로 통일시키면 찾아바꾸기로 한번에 스타일을 지정할 수 있습니다. 


몇번을 강조해도 부족함이 없지만, 아무리 강조해도 이해하지 못하는 것 중 하나가, 스타일은 '정답'이 없다는 거예요. 코드는 깔끔해야 하지만, 편집 시간을 확 줄일 수 있다면 조금 복잡한 코드는 눈감아 줄 수 있습니다. 경우에 따라서는 편집 시간을 줄일 수 있다 해도 깔끔한 코드를 선택해야 할 때가 있고요.


저는 이번엔 깔끔한 코드 보다는 짧은 편집 시간을 선택했습니다.


찾기 : (   / 바꾸기 : <sub>(


이거 한번으로 417번의 반복 작업을 끝낼 수 있었습니다. 

그리고, 이게 정답은 아닙니다. 제 선택이었을 뿐이에요.



3. 이름

.name {

font-family:"강조글꼴";

margin-right : 1em;

}


<p><span class="name">노라</span>금방 왔어요. ...</p>


이름 스타일은 특별한게 없어요. 본문과 다른 글꼴, 본문과 오른쪽 간격을 벌려주는 속성을 사용했습니다.


그런데 이름 스타일이 1304번 적용됩니다. 스타일 하나 적용하는데 1초씩 잡아도 20분이 넘게 걸려요. 1초에 가능할까요? 2~3초씩은 걸립니다. 그러다 보면 이름에 스타일 지정하는데만 30분~40분은 걸립니다.


이럴 때 패턴을 찾아보세요. 어떤 패턴이 보이세요?


<p>노라

<p>짐꾼

<p>헬미르

...


등장인물은 모두 9명입니다.

<p> 태그 다음에 사람 이름이 나오면 그건 등장인물인거예요. 무조건 그런건 아닙니다. 원고에 따라 다를 수 있어요. 하지만 이 책은 <p> 태그 다음에 이름이 나오면 그건 등장인물 이름입니다.

그럼 찾아바꾸기가 통하겠지요?


찾기 : <p>노라

바꾸기 : <p><span class="name">노라</span>


이렇게 등장인물 이름을 바꿔가며 9번 실행합니다. 5분도 안걸려요.


다른 대본 원고도 90% 이상은 이런 패턴일 거예요. 그럼 100번 중 90번을 수정하는게 편한지, 아니면 10번을 수정하는게 편한지 고민을 해보세요.



2.4 대사

p

{

font-family:"기본글꼴";

text-align:justify;

line-height:1.8em;

font-size:1em;

text-indent : -3em;

padding : 0 0 0 3em;

}


<p><span class="name">노라</span>헬레나, 크리스마스트리를 잘 숨겨둬. 오늘 저녁 장식을 끝낼 때까지 아이들이 보면 안 돼. <sub>(지갑을 꺼내며 짐꾼에게)</sub> 얼마죠?</p>


마지막으로 대사입니다. [2.1 본문] 설명하면서, 본문보다 대사 분량이 월등히 많기 때문에 기본 스타일을 대사에 맞췄다고 설명했습니다. 기본 스타일로 만드니 대사 부분의 HTML 코드가 깔끔해졌어요. 1400번 반복되는 대사 내어쓰기를 p 태그 하나로 끝냈습니다. 본문에 noindent 클래스를 추가한 이유가 이것 때문이에요.


여기서 눈여겨 보실 부분은 마지막 2줄이에요.


text-indent : -3em;

padding-left : 3em;


padding : 0 0 0 3em;은 padding-left : 3em;과 똑같습니다. 


원리는 이래요.


1. padding-left : 3em; 눈에 보이지는 않지만, 상자를 하나 그리고 상자 안쪽 여백을 3em 만큼 줍니다.

그러면 이렇게 될거예요. 상자 안쪽 여백이 3em 만큼 들어갑니다. 여기서 주의할 점은 절대 margin을 쓰지 말라는거예요. margin을 써도 눈에 보이는 결과는 같습니다. 하지만 margin은 상자 바깥쪽 여백이라 상자를 눈에 보이게 만들면 텍스트가 상자 바깥으로 튀어나가 보입니다.


2. text-indent : -3em; 그 다음 들여쓰기를 -3em 줍니다. 그럼 첫번째 줄만 3칸 앞으로 오게 되요. 들여쓰기의 반대입니다.

그러면 이렇게 될거예요. 상자 안쪽 여백이 3em 만큼 들어갑니다. 여기서 주의할 점은 절대 margin을 쓰지 말라는거예요. margin을 써도 눈에 보이는 결과는 같습니다. 하지만 margin은 상자 바깥쪽 여백이라 상자를 눈에 보이게 만들면 텍스트가 상자 바깥으로 튀어나가 보입니다.

 

이 스타일은 대본 외에도 편집에 많이 사용이 되요. 특히 글머리 숫자글머리 기호를 표현할 때 유용합니다. 



 


이제 비교해 보세요. 본문과 등장인물 이름이 구분 없이 편집된 책, 등장인물 이름만 강조한 책, 들여쓰기를 하고 등장인물을 본문 글꼴과 구분시킨 책. 셋 중에 어떤 책을 읽고싶으신가요?

설정

트랙백

댓글

같은 패턴의 시리즈물 - 심야책방 세계문학

오늘은 같은 패턴을 가진 시리즈물 편집입니다.

심야책방 세계문학 시리즈로 책의 내용에 따라 달라지는 점은 있지만 기본 형식은 동일합니다.

이런 시리즈물은 양식 하나만 잘 만들어 놓으면 1~2시간에 전자책 한권씩 만들 수 있습니다.


심야책방 세계문학은 편집이 간결합니다. 소설 중심이어서 복잡한 스타일은 많지 않습니다. 대신 시리즈의 정체성을 살려주는 포인트를 강조했습니다. 


1. 책은 표지, 속표지, 목차, 본문 순으로 편집해 3페이지만 넘기면 본문을 볼 수 있게 한다.

2. 속표지, 목차 스타일은 종이책 편집을 살리고 모두 통일시킨다.


크게 보면 이 두개를 기준으로 작업을 했습니다.



    

(기본적인 틀은 동일하고 책에 따라 조금씩 달라지는 시리즈물 스타일)



1. 주요 편집 스타일

이번 글은 금방 끝나겠네요 ^^;

시리즈물은 기본 양식 하나로 편집하기 때문에 작업 효율이 좋습니다. 전자책 만들 때 스타일 잡는 시간이 전체 편집 시간의 1/3 이상인데 스타일이 정해져 있기 때문에 제작 시간을 확 줄일 수 있습니다.

심야책방 세계문학 시리즈는 3가지 스타일이 반복적으로 사용됩니다. 


1.1. 속표지


저는 전자책을 만들 때 속표지는 넣지 않습니다. 속표지는 겉표지와 똑같이 만드는데 종이책에서는 형식상 필요하지만 전자책에서는 본문까지 가는데 한 페이지 더 넘겨야 하는 불편 외에는 다른 기능이 없거든요.


하지만 심야책방 세계문학 시리즈는 속표지를 넣었습니다. 표지 -> 목차 -> 본문 순으로 가면 조금 허전한 느낌이 들더라구요. 그리고 겉표지에서는 강조할 수없는 작품의 제목을 도드라져 보이도록 하는 역할도 합니다.



1.2. 목차


목차 스타일은 간단합니다. 다만 종이책과는 조금 다르게 가져갔습니다. 종이책처럼 뷰어 50% 지점에서 목차를 정렬할 수 있지만 전자책은 페이지도 없고, 다수의 책이 1장, 2장 처럼 간결하더라구요. 그래서 전자책에 맞게 오늘쪽 정렬을 시켰습니다. 




1.3. 본문


본문도 특별한 스타일은 없네요. 제목을 가운데정렬 한 것 외에는 신경쓸만한 스타일이 없습니다. 책에 따라 조금씩 다른 부분이 있긴 한데 그건 그때 그때 스타일을 만들어 적용했습니다.




2. 전자책 편집 스타일


2.1 속표지


[CSS]

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

{

text-indent : 0 !important;

text-align:center;

font-size:1.6em;

font-family:"강조글꼴";

margin : 0 0 15% 0;

}


[HTML]

<h1 class="sigil_not_in_toc">Pride and Prejudice</h1>

<h2 class="sigil_not_in_toc">오만과 편견</h2>


심야책방 세계문학이 통일된 느낌을 갖게 만들기 위해 속표지에 신경을 썼습니다. 종이책은 표지에서 통일감을 부여할 수 있지만, 전자책은 표지를 볼 일이 썸네일 외에는 없습니다. 속표지 역시 마찬가지겠지만, 표지를 넘기자 마자 나오는 책 제목 영역을 강조하고 싶었습니다.


종이책 느낌은 살리면서 전자책에 맞게 편집을 하기 위해 몇가지 고민을 해야했습니다. 


첫째. 영문 제목 아랫쪽에 그어진 밑줄은 어디에 속하는가?

이 밑줄이 영문제목에 그어진 것이라면 영문제목의 줄이 바뀌더라도 단어별로 줄이 그어져야 합니다. 그렇지 않고 한글 제목과 영문제목을 구분해 주는 선이라면 줄바꿈과 상관 없이 한글제목과 구분되는 선 하나만 그어져야 합니다.


저는 이 선을 한글 제목과 구분하는 선이라고 봤습니다. 그래서 영문제목이 줄바꿈을 해도 한글제목 사이에 하나만 나타나도록 했습니다.


둘째. 제목 글자 크기

제목의 길이는 작품마다 모두 다릅니다. L'Etranger 처럼 짧은 제목도 있고 Throught the Looking-Glass 처럼 긴 제목도 있습니다. 제목 글자 크기를 화면 폭에 맞출 것인지, 아니면 일정 크기로 고정시킬 것인지를 고민했습니다. 책을 펼쳤을 때 제목이 눈에 확 들어오려면 화면 폭에 맞추는 것 보다는 줄바꿈이 된다 하더라도 일정 정도의 크기를 유지하는게 좋다고 생각했습니다.


뷰어는 기본적으로 영어 단어 단위로 줄바꿈을 합니다. 영어 단어를 폭에 맞춰 잘라내는 방법도 있지만 영문은 단어 단위로 움직이는게 좋기 때문에 뷰어 설정을 그대로 따랐습니다.


여기서 한가지 알아두면 유용한 속성이 있습니다.


border-bottom으로 선을 그리고, 텍스트를 가운데 정렬 하면 화면 왼쪽 끝에서 오른쪽 끝으로 선이 그어집니다. 아래 왼쪽 이미지가 boder-bottom으로 선을 그었을 때 결과입니다. 이럴 때 display:table 속성과 margin-left, margin-right에 auto 값을 넣어 주면 오른쪽처럼 단어나 문장에 딱 맞는 크기로 선이 그려집니다. 


display : table;

border-bottom : solid 1px #000000;

margin : 20% auto 10px auto;



(display : table; 속성을 추가하면 글자 크기에 맞게 선을 그을 수 있습니다)




스타일을 적용한 결과입니다. 화면 크기에 따라 제목 줄바꿈이 되고, 밑줄은 영문과 한글 제목을 구분해 주는 역할을 합니다. 뷰어에서 보면 영문 제목이 도드라져 보입니다. 심야책방 세계문학을 전자책으로 펼치면 제일 먼저 만나는 속표지입니다.






2.2 목차


[CSS]

.nav_title {

text-align : center;

text-indent:0 !important;

font-family:"강조글꼴";


display : table;

border-bottom : solid 1px #000000;

border-top : solid 1px #000000;

margin : 10% 5px 10% auto;

padding : 10px 0 10px 0;


}


.nav_list {

text-align : right;

line-height : 1.8em;

font-family:"기본글꼴";

list-style-type : none;

margin : 10% 5px 10px auto;

}


[HTML]

<p class="nav_title">차례</p>

<ol class="nav_list">

<li><a href="../Text/Section_0001.xhtml">제1부</a></li>...</ol>


종이책 목차는 페이지의 1/2 지점에 책 제목이 있고, 오른쪽으로 페이지 번호가 나옵니다. 

하지만 전자책은 페이지 번호가 없습니다. 그래서 1/2 지점에 목차를 정렬시킬 수는 있지만 그렇게 하면 목차가 아주 이상해집니다. 그래서 허전해 보여도 목차를 오른쪽 정렬 시켰습니다.


여기서도 2.1에서 설명했던 display:table 속성을 사용했습니다.

[차례] 위, 아래에 border-top과 boder-bottom으로 줄을 긋고 dispaly : table, margin-left : auto 속성으로 글자 크기에 맞췄습니다. 





목차 스타일은 이렇게 적용이 됩니다.

목차가 짧아 허전한 감이 있지만, 통일감을 주기 위해 없애지 않고 남겨뒀습니다.



2.3. 본문


본문 제목 스타일

h3

{

text-indent : 0 !important;

font-size:1.2em;

text-align : center;

font-family:"기본글꼴";

margin : 10% 0 15% 0;

}


.no {

font-size:0.8em;

margin : 0 0 1em 0;

display : block;

}


<h3><span class="no">1장</span>&nbsp;토끼 굴속으로</h3>


기타 본문 편집 스타일

sub /* 아랫첨자 */

{

font-size:0.8em;

vertical-align : baseline;

}


blockquote /* 문단 단위 인용문에 사용 */

{

text-indent : 1em;

padding : 1em 0 1em 1.5em;

}


blockquote > p {

font-size : 0.9em;

text-indent : 0;

}


strong /* 특정 단어나 문장 강조가 필요한 경우 사용.*/

{

font-family:"강조글꼴";

}


본문 역시 특별히 강조할 만한 내용은 없습니다. 

목차가 장 번호로만 이루어진 책이 있고, 장 번호와 제목이 함께 있는 책이 있는데 이럴 때 장 번호를 display:block을 써서 제목과 줄바꿈을 해줬습니다. 


본문에는 반복적으로 들어가는 스타일이 있습니다. 본문 내 인용구는 blockquote 태그를, 강조해야 하는 단어는 strong 태그를, 괄호 설명 항목은 sub 태그를 사용해 편집을 합니다. 종이책에서는 조금씩 다르게 표현되었더라도 전자책은 통일감을 주기 위해 스타일을 일치시켰습니다. 희곡처럼 다른 책들과 확연히 구분될 때만 몇가지 스타일을 추가해 줬습니다.



이번에는 복잡한 스타일이 들어가지는 않았습니다.

하지만 스타일이 비슷할 때는 기본 탬플릿을 만들고 이를 바탕으로 여러 책을 편집하는 방식을 설명드렸습니다. 같은 출판사의 책이라면 본문 글꼴, 줄간격, 인용구, 괄호나 영문/한자 등 외국어 표기를 통일시키는 것도 좋습니다. 편집 시간을 절약할 수 있고 출판사 스타일에 통일감을 줍니다.



2.4 편집시 자주 사용하는 기본 스타일


아래 스타일은 어떤 책을 편집하든 사용할 수 있는 스타일입니다. 

상황에 따라 조금씩 수정해 사용하시면 됩니다.



* {

margin : 0;

padding : 0;

}


p /* 본문 기본 스타일 */

{

font-family:"기본글꼴";

text-indent:1em;

text-align:justify;

line-height:1.8em;

font-size:1em;

}


.txt_center /* 가운데 정렬 */

{

text-align : center;

}


.txt_right /* 오른쪽 정렬 */

{

text-align : right;

}


sub /*괄호나 영문 한자 등 외국어 표기*/

{

font-size:0.8em;

vertical-align : baseline;

}


이미지를 왼쪽, 혹은 오른쪽에 어울림 배치하는 스타일

img {

max-width : 100%;

}


.img_right_box {

text-align : right;

text-indent : 0;

width : 50%;

float : right;

}


.img_left_box {

text-align : left;

text-indent : 0;

width : 50%;

float : right;

}


<p class="img_left_box"><img src="../Images/img004.jpg" alt=""/></p>


설정

트랙백

댓글


티스토리 툴바