내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
리디 PC 뷰어에서 div 태그에 margin 속성이 적용되지 않는 문제가 있습니다.
.test-style {
margin-bottom : 5em;
}
<div class="test-style">내용</div>
<p>본문</p>
이렇게 하면 p 태그와 div 태그 사이에 마진이 생겨야 하는데 리디북스 PC 뷰어에사만 마진이 적용되지 않습니다.
처음엔 속성 상속이 꼬여 그런가보다 생각해 빈줄 추가로 해결했는데 같은 혆상이 반복되니 귀찮네요.
이런 스타일 만들려면 margin이 먹혀야 하는데 안먹혀서 <p><br/></p>를 넣는 귀찮은 작업을 해야돼요 ㅜ.ㅜ
오래 전에 K뷰어 만들 때 똑같은 현상을 경험한 적이 있습니다.
뷰어에도 자체적인 태그와 스타일이 있어요.
뷰어 화면 그릴 때 div 태그를 쓰는데, 이 뷰어 div 태그에 속성이 잘못 들어가면 CSS 상속이 되면서 이런 현상이 생깁니다. 쉽게 말해, 뷰어 오류예요. 구 버전에서는 이런 문제가 없다가 어느 순간부터 생긴걸 보면 개발자가 실수한거 같아요.
담당자가 이걸 발견하면 바로 고치겠지만, 누가 알려주기 전엔 발견하기 어려울테니 수정이 언제 될지 모릅니다. 그래도 전자책은 만들어야 하니, 해결 방법 알려드립니다.
.test-style {
margin-bottom : 5em !important;
}
<div class="test-style">내용</div>
<p>본문</p>
간단하지요?
스타일 상속이 문제니까, 상속받은 스타일 보다 내 스타일이 더 중요하다고 뷰어한테 알려주는 속성이에요.
두개 이상 속성이 충돌할 때 !important 속성이 우선적으로 적용됩니다.
!important는 안쓰는게 좋아요. CSS가 충돌을 할 일은 거의 없거든요.편집자가 만든 스타일이 아무 문제가 없다면 !important는 절대 쓸 일이 없습니다.
하지만 리디북스 PC 뷰어처럼 편집자의 손을 벗어났을 때 종종 도움이 됩니다.
예를 들면, 교보 뷰어나 iBooks 뷰어는 주석을 강제로 숨기지요.
팝업 주석 처리 되니 주석이 없어도 되지만, 이 책에서는 주석 목록을 모두 보여줘야 한다 싶을 때 !important로 뷰어가 주석을 숨기지 못하게 할 수 있어요.
- 사족. 제목에 !important는 중요한 글이라는 의미가 아닙니다 ^^;
'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글
| [CSS 스타일 샘플] 많이 쓰는 세로 제목 스타일 (0) | 2020.07.17 |
|---|---|
| [질문&답변] 화살표 선이 들어간 제목 스타일 (0) | 2020.06.10 |
| [CSS 스타일 샘플] 큰 괄호 사이 글자 (1) | 2020.01.29 |
| 페이지 하단에 문장 넣기 (1) | 2019.08.21 |
| 모르는 사람이 의외로 많은 CSS 문법 (2) (0) | 2017.09.06 |
