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

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

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

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

* 전자책 편집 화면

종이책과 전자책 이미지 보시면 어떤 스타일인지 한 눈에 알 수 있을거예요. 각 장의 첫번째 문단 첫번째 글자를 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으로 전체 여백을 줬어요.

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

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