내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
오랜만에 문의가 들어와 만들어봤습니다.
테두리 샘플 이미지
샘플 이미지처럼 위쪽과 왼쪽에만 이런 물결무늬 테두리를 넣을 수 있냐는 문의였어요.
border를 쓰면 실선, 이중실선, 점선 등의 테두리는 만들 수 있는데 물결무늬는 표현이 되지 않습니다. 이런 물결무늬를 표현하려면 border-image 옵션을 써야되요.
border-image 참고 : https://www.w3schools.com/cssref/css3_pr_border-image.asp
이걸 참고해서 코드를 만들면 이렇습니다.
.wave_edge {
border : 30px solid transparent;
margin : 10px;
padding: 5px;
-webkit-border-image: url("../Images/wavebox.png") round;
border-image: url("../Images/wavebox.png") round;
border-image-slice: 36%;
}
사용한 테두리 이미지는 이거예요. 설명을 위해 급조한 이미지라 매끄럽지 않지만, 보다 정교하게 만들면 결과물이 더 깔끔하겠지요?
이미지 크기는 중요하지 않습니다. 이미지 크기와 물결무늬 크기는 아무 관계가 없습니다. 다만, 너무 작으면 물결무늬가 커졌을 때 흐릿하게 깨질 수 있으니 낮은 해상도보다 높은 해상도를 권해드려요.
그런데 border-image를 쓰면 이렇게 나옵니다. 문의는 특정면에만 테두리를 치는건데 4면 모두 테두리가 나오지요.
이 문제는 응용력을 조금만 발휘하면 해결할 수 있습니다.
답을 알면 '겨우 이런거야?' 라고 생각할 정도로 아주 아주 쉽지요.
4면 테두리가 아닌 2면만 테두리를 치고 싶다.
borde-left, border-top은 알잖아요.
그럼 border-image-left, border-image-top도 당연히 있을거예요.
.wave_edge {
border-right : 0;
border-bottom : 0;
border-top: 30px solid transparent;
border-left: 30px solid transparent;
margin : 10px;
padding: 5px;
-webkit-border-image: url("../Images/wavebox.png") round;
border-image: url("../Images/wavebox.png") round;
border-image-slice: 37%;
}
border-right : 0; border-bottom : 0;은 없어도 되는데(되야 하는데) 일부 뷰어에서 점선이 생기네요.
그래서 테두리가 필요 없는 부분은 필요 없다고 선언을 해버렸습니다.
제가 사용하는 CSS 속성이나 초보 편집자가 사용하는 CSS 속성은 별 차이가 없습니다. 정말 예외적인 스타일이 아니면 책 한권에 들어가는 속성은 거의 비슷해요.
다만 초보 편집자는 응용을 잘 하지 못합니다. CSS는 제한된 속성을 얼마나 잘 응용하느냐에 따라 결과물이 엄청난 차이를 보입니다.
아래는 특정 면만 테두리를 적용한 결과물이에요. 교보와 알라딘 뷰어에서 캡쳐했습니다.
이건 알라딘 뷰어에서 본 결과
이건 교보ebook 뷰어에서 본 결과입니다.
'Tip&Tech > 실전! 전자책 제작' 카테고리의 다른 글
| EPUB2로 해결할 수 없는 문제 (0) | 2018.04.20 |
|---|---|
| [문의] 대논쟁 철학베틀 스타일 (0) | 2018.03.21 |
| 테이블(table) 안쪽 여백(padding)과 가운데 정렬하기 (0) | 2017.10.13 |
| ttf vs otf 폰트 (2) | 2017.07.18 |
| 글꼴 암호화(난독) 처리 (2) | 2017.06.22 |
