내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
재미있는 스타일을 문의 주신 분이 있어 만들어 봤습니다.
스타일은 이렇게 2종류예요.
프롤로그 제목은 위에처럼 화살표가 있고 제목이 들어갑니다.
장제목은 화살표 앞에 번호가 붙어야 하고요.
제목 옆에 선이 들어간 스타일은 많이 만들어봤는데,
선 끝에 화살표 처럼 포인트가 들어간 스타일은 선을 넣는 스타일과 다릅니다.
선을 넣는 것 보다 까다롭지요.
전자책이기 때문에 화면 크기가 늘었다 줄었다 할 수 있지요.
그리고 장 제목 글자 수도 일정하지 않습니다.
책에 따라 장 번호가 1, 01, 001 처럼 여러 자리일 수도 있어요.
스타일을 만드는 방법은 수백가지예요.
편집자에 따라 중요하게 생각하는 포인트가 다를거고,
그에 따라 스타일도 달라집니다.
저 제목 스타일을 봤을 때 제가 중요하게 생각한 부분은 장제목이었어요.
화살표 길이는 폭에 따라 늘었다 줄었다 해도 되지만, 제목은 가능한 한줄로 표시되야 한다고 생각했습니다.
장 제목과 장 번호는 글자 수에 따라 늘었다 줄었다 하지만, 뷰어 폭에는 영향을 받지 않아야 합니다.
뷰어 폭이 제목의 폭보다 좁다면 줄이 바뀌어야 하지만,
한 줄에 제목이 들어갈 정도의 폭이라면 제목은 한 줄로 표시하고 싶었습니다.
그리고 제목 글자 수가 바뀌더라도 화살표 길이가 알아서 조절돼야겠지요.
각 장 제목마다 폭을 하나씩 맞추기는 귀찮으니까요.
화살표도 중요합니다. 처음엔 간단히 이미지를 넣으면 되겠지 생각했는데
화살표 길이를 뷰어 폭에 자동으로 맞추려면 이미지로 넣으면 안되더라구요.
이미지 가로 길이를 100%로 하면 화살표 머리 부분이 가로로 찌그러지고, 가로, 세로를 100%로 맞추면 선의 폭이 두꺼워지면서 화살표 머리가 커집니다.
제가 생각한 해결책은, 화살표를 아주 길게 만들어 웬만한 뷰어 가로 폭에서도 잘리지 않도록 하고
배경으로 넣는 방법입니다.
이 외에도 다른 여러 방법이 있어요.
삼각형을 오른쪽 끝에 정렬하고, 삼각형 왼쪽에 이미지로 선을 넣은 후 글자 간격을 없애던가,
테이블 속성을 이용해 상자 2개를 붙여 왼쪽은 선을, 오른쪽은 삼각형을 넣던가,
border로 선을 만들고, 선 끝에 삼각형을 넣은 후 margin으로 겹치게 해도 되겠네요.
제가 만든 스타일은 이렇습니다.
<style>
div.box_title {
width : 100%;
display : flex;
}
.arrow {
background-image: url("../Images/aaa.png");
background-position : right top;
background-repeat : no-repeat;
flex-basis : 100%;
min-width : 2em;
height : 1em;
-ms-flex: 1;
flex: 1;
}
.txt_chap_title {
text-align: right;
margin-left : 1em;
}
.txt_chap_No {
font-size : 2em;
color : grey;
font-style: italic;
margin-right : 0.5em;
}
.txt_grey_small {
color: grey;
font-weight: bold;
font-size: 0.8em;
}
</style>
flex를 이용해 div 박스 3개를 가로로 놓고, 가운데 상자 크기가 자동으로 조절되도록 했습니다.
장 번호와 제목 상자는 글자 양에 따라 폭이 알아서 바뀌고요.
스타일을 적용하면 이렇게 보입니다.
가로 폭이 넓으면 화살표만 길어져요.
그리고 화살표 상자에 min-width를 둬서가로 폭이 아주 좁아져도 화살표가 사라지지 않게 했습니다.
화살표가 남으면 제목이 줄바꿈 되지요.
'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글
| [CSS 스타일 샘플] 이미지로 테두리 만들기 (0) | 2020.07.23 |
|---|---|
| [CSS 스타일 샘플] 많이 쓰는 세로 제목 스타일 (0) | 2020.07.17 |
| !important - 리디북스 PC 뷰어에서 div-margin 안먹는 문제 (0) | 2020.03.18 |
| [CSS 스타일 샘플] 큰 괄호 사이 글자 (1) | 2020.01.29 |
| 페이지 하단에 문장 넣기 (1) | 2019.08.21 |
