[제작 샘플링] 나에게 고맙다

여기서 설명한 내용들이 전자책 제작에 도움이 될까?

라고 생각하는 분들도 계시겠지요? 그래서 샘플링을 통해 전자책 제작에 어떻게 적용되는지 보여드리겠습니다. 제가 직접 제작하는 책들은 종수가 한정되어 있어 다양한 편집을 보여드릴 수 없잖아요. 그래서 베스트셀러나 재미있는 편집을 해볼만한 책을 샘플로 뽑아 스타일을 만들어 보려고 합니다.

'이런 편집은 스타일을 어떻게 만들까?' 고민하고 계신 책이 있으면 방명록이나 댓글로 남겨주세요. 저도 고민해 보고 제가 생각한 방법을 올리겠습니다 ^^

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

'나에게 고맙다' 제목을 만들어 봤습니다.

전자책은 아쉽게도 확인하지 못했습니다. 리디에서 미리보기 지원이 안되더라구요. 내용상 미리보기를 제공하기 어려운 책이어서 그런 것 같아요.

제목을 보면 보라색에서 연녹색으로 자연스럽게 색이 바뀝니다.

배경에 '그라데이션'이 들어가 있습니다. 그라데이션에 대해서는 설명을 한 적이 있습니다. 

http://epubguide.net/202

http://epubguide.net/199

CSS3에서는 글상자에 그라데이션을 지원합니다. 웹킷에 한해 텍스트도 그라데이션도 가능합니다. 둘 다 CSS3이기 때문에 구형 스마트폰에서는 지원하지 않을 수 있습니다. 하지만 걱정하지 않아도 됩니다. 국내 사용자들은 대부분 안드로이드 4.4보다 높은 버전의 안드로이드 폰을 사용합니다. iOS는 최신버전 사용율이 더 높고요. 그리고 구버전이라도 그라데이션 처리가 되지 않을 뿐, 텍스트를 보는데 아무 문제가 없습니다. 

그라데이션 속성은 이렇습니다.

background: -webkit-linear-gradient(left, #A79DCB, #ABE5BF);

background : linear-gradient(left, #A79DCB, #ABE5BF);

-webkit-linear-gradient는 웹킷을 위한 속성이고 linear-gradient는 기본 속성입니다. 안드로이드폰과 아이폰은 웹킷을 사용하기 때문에 -webkit-linear-gradient만 써도 되지만 나중을 위해서는 둘 다 적어주는게 좋습니다.

이 속성을 사용해 그라데이션 배경의 제목을 만들어 봤습니다. 

h3 {

font-family : "기본글꼴";

background: -webkit-linear-gradient(left, #A79DCB, #ABE5BF);

background : linear-gradient(left, #A79DCB, #ABE5BF);

text-align : center;

color : #FFFFFF;

margin : 1em auto 1.2em auto;

padding : 5px 10px;

display : table;

}

스타일을 적용한 결과물은 이렇게 보입니다.

샘플 파일 첨부하니 자세한 코드 확인하고 싶은 분들은 참고하세요 ^^

나에게 고맙다.epub