[TIP] 페러그린과 이상한 아이들의 집 FirstLetter 스타일

Tip&Tech 2016.11.11 10:16

팀버튼 영화를 보고 책에도 관심이 생겨 읽은 '패러그린과 이상한 아이들의 집'에서 재미있는 스타일을 발견해 만들어 봤습니다.

예전에 만든적이 있는데 한글 보다는 영문에 많이 사용되는 스타일이라 사용한 적이 거의 없거든요. 그런데 이 책에 사용이 됐네요.


* 교보문고 종이책 미리보기 캡쳐





* 전자책 편집 화면



종이책과 전자책 이미지 보시면 어떤 스타일인지 한 눈에 알 수 있을거예요. 각 장의 첫번째 문단 첫번째 글자를 2줄로 크게 보여줍니다.

이 스타일은 어렵지 않아요. 이미지에서 쓰는 float 속성을 사용하면 쉽게 적용할 수 있습니다. 




<style>

@font-face {

font-family : "기본글꼴";

src : url("../Fonts/mobileNanumMyeongjo.ttf");

}


* {

margin : 0 5px;

padding : 0;

}


p {

font-family : "기본글꼴";

font-size : 1em;

text-align : justify;

line-height : 1.8em;

text-indent : 2em;

}


.firstLetter {

float : left;

font-size : 2.5em;

line-height : 1em;

padding : 5px;

}


.no_indent {

text-indent : 0;

}


</style>


<p><span class="firstLetter">내</span> 인생이 지극히 평범할 거란 사실을 받아들이기 시작할 무렵부터 아주 이상한 일들이 일어나기 시작했다. 첫 번째 사건은 나에게 끔찍한 충격으로 다가왔다. 인생을 영원히 뒤바꿔놓는 사건들이 대개 그러하듯 그 사건도 내 삶을 사건 이전과 이후로 두 동강 냈다. 그 이후로 일어날 수많은 이상한 일들처럼 그 사건도 우리 할아버지 에이브러햄 포트먼과 관련된 일이었다.</p>



전자책에 적용된 편집을 조금 수정했습니다. 전자책을 보면 첫번째 글자가 너무 커서 본문 위로 툭 튀어나와 있어요. 그게 마음에 들지 않더라구요(개취입니다. 편집이 잘못됐다는 의미는 아니니 오해하지 마세요^^)


글자 크기를 한단계 낮추고(원본은 font-size : 3em;) 글자 오른쪽 여백(원본은 margin-right:5px;) 대신 padding으로 전체 여백을 줬어요.


종이책에도, 전자책에도 들여쓰기가 되어 있지만 첫번째 글자를 강조했기 때문에 들여쓰기도 하지 않았습니다. 이 역시 편집자의 취향에 따라 선택하면 되요. 


출간된 책 중에 이렇게 첫번째 글자를 꾸민 편집이 간혹 보입니다. 이런 책을 편집할 때 활용해 보세요 ^^

설정

트랙백

댓글


티스토리 툴바