'2022/05/17'에 해당되는 글 1건

  1. 2022.05.17 [CSS 스타일 샘플] 유용한 몇가지 Tip
posted by 내.맘.대.로 2022. 5. 17. 09:09

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

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

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

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

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

전자책 편집 할 때 많이 사용하는 유용한 팁 몇개 정리해 봅니다.

 

먼저, 형광펜 스타일 밑줄입니다.

span 태그로 묶고 배경색 넣으면 형광펜 스타일을 간단히 만들 수 있지만, 

글자 중간에만, 아니면 아래나 위쪽에 형광펜을 칠하고 싶다면?

 

PDF 원본

장 제목에서 처럼 글자 아래에만 형광펜을 칠하고 싶을 때 linear-gradient를 사용할 수 있습니다.

background-image로 배경을 넣을 때 linear-gradient를 쓰는 것이지요.

EPUB 스타일

 

모든 장 제목에 똑같은 불릿이 붙는다면 어떻게 하시겠어요?

많은 분들이 이미지를 직접 넣을거예요.

제목이 10개든, 100개든....

제목이 100개고 100개에 모두 똑같은 불릿이 붙는다면 작업이 불편하겠지요? 

PDF 원본

EPUB에서 이렇게 보이지만, 여기엔 이미지가 하나도 들어가지 않았습니다.

 

  <h3><span class="title_chapNo">1장</span> 지금 ETF에 주목해야 하는 이유</h3>

 

코드가 이렇게 깔끔해요. 불릿이 붙었지만 이미지는 없습니다.

있지만 없는, 이런 편집은 psudo 클래스를 사용합니다.

before, after psudo 클래스를 사용하면, 코드를 깔끔하게 정리하면서 원하는 불릿을 넣을 수 있습니다.

EPUB 스타일

 

끝으로, 상자 위에 상자 걸치는 방법이에요.

[정리하기] 제목 상자는 보라색 상자 위에 살짝 걸쳐 있습니다.

PDF 원본

EPUB에서는 이렇게 만들었어요.

같은 방법으로 화살표도 올릴 수 있는데, 안에 넣어도 깔끔하게 표현이 되서 그대로 뒀습니다.

이렇게 하려면 margin을 이용하면 됩니다. margin은 마이너스(-) 값을 가질 수 있어 이런 스타일을 표현할 수 있습니다.

반응형