내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
이런 스타일입니다.
chapter 1 ──────
이렇게 제목 번호 뒤에 선이 있습니다.
이 선을 그릴 때 예전에 쓰던 스타일은
<div class="chapNo">chapter 1</div>
이렇게 하고
chapNo의 중간에 선으로 된 배경 이미지를 넣고
안쪽 span을 흰색 배경을 채워 chapter 1쪽우로 넘어온 배경선을 숨겼지요.
그런데 이렇게 하면 배경색을 바꿨을 때 chapter 1 부분이 하얗게 보이는 문제가 있었습니다.
이를 해결하려고
<div class="chapNo"><span>chapter 1<span><span></span></div>
이렇게 한 후 chapNo에
display : flex;
앞쪽 span에 적당한 width, 뒤쪽 span에 선배경
이렇게 처리를 했습니다.
그런데 태그가 너무 복잡해졌지요.
그러다 문득, calc가 생각이 났네요.
그래서
<div class="chapNo">chapter 1</div>
이렇게 한 후
chapNo에
배경선을 집어 넣는 것 까지는 똑같이 하지만
background-size를 (100% - 적당한 글자 길이),
background-position 을 가운데 오른쪽
해서 넣으니 간단히 해결이 됐습니다.
뭔 소리인지 모두 이해 하셔지요 ^^b
잘 안되시면 본인이 직접 장성한 스타일과 태그를 올려주세요.
그러면 어떤 부분이 문제인지 답변드리겠습니다.
'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글
| [CSS 스타일 샘플] 일러두기, 페이지 아래에 글자 배치 (0) | 2022.10.20 |
|---|---|
| [CSS 스타일 샘플] 복잡한 모양의 테두리 (0) | 2022.07.27 |
| 알아 두면 좋은 CSS 속성 3가지 (0) | 2022.06.02 |
| [CSS 스타일 샘플] 난외 편집 (0) | 2022.05.12 |
| [CSS 스타일 샘플] 한시의 번역과 한자 원문 스타일 (0) | 2022.03.18 |