posted by 내.맘.대.로 2018. 3. 21. 11:57

내맘대로의 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 뷰어에서 본 결과입니다.



반응형