posted by 내.맘.대.로 2020. 11. 10. 09:20

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

이미지른 넣다 보면 float : left, float: right로는 해결이 안되는 경우가 생깁니다.

이렇게 공간이 애매하게 남을 때가 있어요.

이미지가 하나로 연결돼 있어 중간을 잘라 float을 쓸 수도 없는 이미지.

이렇게 텍스트가 들어가면 조금 더 깔끔하게 편집을 할 수 있습니다.

ㅓ처럼 여러 각도로 꺾인 이미지

이런 대각선 이미지도 애매하지요.

종이책에서는 전체 이미지인데 float으로 넣으면 작아보이고

그렇다고 center로 넣자니 빈 공간이 너무 많아 보기 좋지 않습니다.

이런 그림도 마찬가지지요.

오른쪽 부분만 잘라 float : right을 쓰고 싶지만 그림이 붙어 있어 자르기 어렵습니다.

이럴 때 쓸 수 있는 속성이 shape-outside예요.

shape-outside는 크롬 브라우저에서 사용하려면 webkit 속성을 추가해야합니다.

-webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);

shape-outside: polygon(0 0, 100% 100%, 0 100%);

국내 전자책 뷰어는 대부분 webkit을 사용하니 두 코드를 같이 넣어줘야돼요.

shape-outside에 ploygon 속성을 적용하면 이렇게 편집할 수 있습니다.

△ 모양의 이미지

ㄱ, ㄴ 같은 이미지

shape-outside는 여러 속성이 있습니다.

삼각형, 별 등 다각형을 표현할 때 polygon

원형은 circle

타원형은 ellipse,

그리고 다각형 안쪽에 글자를 넣을 수도, 바깥 쪽에 넣을 수도 있습니다.

shape-outside에 대한 설명은 여기로

https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside

 

 

shape-outside를 적용한 스타일은 여기를 참고하세요.

https://www.epubguide.net/215

 

https://www.epubguide.net/207

 

 

반응형