내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
CSS 스타일 중에 background 속성에 사용할 수 있는 linear-gradient라는 보조 속성이 있습니다.
참고 : http://www.w3schools.com/css/css3_gradients.asp
CSS3 속성인데, 안드로이드 4.4 이상 버전과 같은 시기 출시된 iOS 이후 버전에서 지원이 됩니다. 국내 유통사도 공식적으로는 EPUB2를 지원하지만, 스마트폰에 내장된 웹킷을 사용하기 때문에 CSS3는 대부분 지원을 하고요.
Gradient는 그라데이션이라고 하는 그것입니다.
왼쪽 끝에 빨간색, 오른쪽 끝에 노란색을 놓고 왼쪽에서 오른쪽으로 가면서 서서히 빨간색을 노란색으로 바꾸는 효과예요. 아래 예즐 보시면 확 이해 가실거예요.
이게 그라데이션 효과
참고로 그라데이션 효과를 주는 방식은 브라우저에 따라 조금씩 다릅니다. 오페라, 크롬&사파리, 파이어폭스, 인터넷 익스플로러가 조금씩 차이를 보여요. 그래서 위 스타일은 크롬이나 사파리가 아니면 제대로 보이지 않을거예요.
하지만 국내 전자책 이용자는 안드로이드 아니면 iOS를 이용합니다. 안드로이드와 iOS는 웹킷이라는 브라우저 엔진을 사용하고, 전자책 뷰어도 이 웹킷을 기반으로 하고 있어요. 그렇기 때문에 웹킷에만 맞춰도 90% 이상은 표현이 된다고 보시면 됩니다.
웹킷이니 브라우저니 복잡한 얘기는 잊으시고, 국내 유통사 전자책 뷰어는 대부분 지원된다. 이것만 기억하심 될거예요 ^^
linear-gradient는 위 예시처럼 글상자에 그라데이션 효과를 주는 속성입니다. 그런데 웹킷에 재미있는 CSS3 속성이 있었네요. 이 속성을 이용해 글자에도 그라데이션 효과를 줄 수 있습니다. 웹킷만 지원하고 파이어폭스, 오페라, 인터넷 익스플로러는 지원하지 않지만, 위에 설명한 대로 안드로이드폰과 아이폰은 웹킷을 쓰기 때문에 국내 유통사 전자책 뷰어는 대부분 지원을 합니다.
글자를 빨주노초파남보 무지개처럼 꾸미고 싶을 때, 빨주노초파남보 7개 클래스를 만들고, 글자 하나 하나에 스타일을 준적이 있어요. 시간도 많이 걸리고 자연스러운 효과를 볼 수도 없습니다. 하지만 이 속성을 이용하면 자연스럽게 글자에 무지개 효과를 넣어 줄 수 있네요^^
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.txt_gradient_01 { /*기본 - 위에서 아래로*/
font-size : 5em;
background: -webkit-linear-gradient(#FF0000, #0000FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color : #FF0000; /*속승을 지원하지 않을 때 글자색*/
margin-bottom : 1em;
}
.txt_gradient_02 { /*왼쪽에서 오른쪽으로*/
font-size : 5em;
background: -webkit-linear-gradient(left, #FF0000, #00FFFF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color : #FF0000;
margin-bottom : 1em;
}
.txt_gradient_03 { /*왼쪽 위에서 오른쪽 아래으로*/
font-size : 5em;
background: -webkit-linear-gradient(left top, #FF0000, #00FFFF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color : #FF0000;
margin-bottom : 1em;
}
</style>
</head>
<body>
<p class="txt_gradient_01">텍스트<br/>그라데이션<br/>스타일</p>
<p class="txt_gradient_02">텍스트<br/>그라데이션<br/>스타일</p>
<p class="txt_gradient_03">텍스트<br/>그라데이션<br/>스타일</p>
</body>
</html>
빨간색 스타일 부분이 핵심입니다.
그라데이션은 위에서 아래로, 아래에서 위로, 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로, 왼쪽 위에서 오른쪽 아래로 등 방향을 설정할 수 있습니다. 스타일을 잘 보면 어떻게 설정하는지 알 수 있습니다.
그 외에도 색을 2개 이상 넣을 수 있고, 원형, 사각형 등으로도 넣을 수 있어요.
자세한 내용은 여기를 참고하세요
CSS3 그라데이션 : http://www.w3schools.com/css/css3_gradients.asp
위 스타일은 안드로이드 7.0 스마트폰으로 교보eBook, 리디북스, 알라딘, 예스24 뷰어에서 확인했습니다. 조금씩 차이는 있지만 모두 적용됩니다.
* 위에서 아래로
* 왼쪽에서 오른쪽으로
* 왼쪽 위에서 오른쪽 아래로
'Tip&Tech' 카테고리의 다른 글
| [TIP] 2% 부족한 '설민석의 조선왕조 실록' (0) | 2016.11.11 |
|---|---|
| [TIP] 페러그린과 이상한 아이들의 집 FirstLetter 스타일 (2) | 2016.11.11 |
| 스크립트 쓰지 않고 이미지 앨범 만들기 (0) | 2016.10.19 |
| [실전문제]:before :after로 제목 편집 간단히 끝내기 (0) | 2016.10.10 |
| [TIP] 유통사별 테이블 표현 문제 (0) | 2016.10.05 |