[TIP] 전자책 제작을 할 때 가장 먼저 적용해야 하는 스타일

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.

전자책 제작을 할 때 가장 먼저 적용해야 하는 스타일을 소개합니다. 가장 기본적인 내용인데 정말 많은 분들이 질문을 하시더라구요.

1번 이미지를 보세요. 문단과 문단 사이 간격이 줄간격보다 넓습니다. 아무 스타일도 적용하지 않고 텍스트를 본문에 넣으면 이런 모양이 됩니다. 

문단 사이의 간격을 줄이는 방법은?

스타일시트에 아래 스타일을 추가해 보세요.

* {

margin : 0;

padding : 0;

}

그러면 아래 이미지처럼 문단 간격이 사라집니다. 

그런데 줄 간격이 너무 좁지요? 책을 보기 답답합니다. 줄 간격을 넓히고 싶을 때 아래 스타일을 추가하세요.

p {

line-height : 1.8em;

}

이렇게 해주면 줄 간격이 넓어져 가독성이 좋아집니다. 줄 간격을 1.8em으로 해줬는데 제가 좋아하는 간격이에요. 이 부분은 편집하는 책에 맞게 조정을 해 주면 됩니다.

여백을 0으로 주면 상하좌우 여백이 사라져 Sigil의 미리보기에서는 답답해 보일 수 있습니다. 이미지 보시면 뷰어의 상하좌우 여백이 너무 좁지요? 하지만 걱정하지 않으셔도 되요. 뷰어들은 기본적으로 상하좌우 여백을 갖기 때문에 유통사의 뷰어로 보면 적당한 여백이 생깁니다.

그리고 여백이 0이 되면 다른 스타일을 적용할 때 편합니다. 독자들은 책에 적용된 여백 + 전자책 뷰어에서 기본으로 설정한 여백으로 책을 보게 되거든요. 이 계산을 잘못해서 전자책에 여백을 주면 독자이 볼 때 좌우 여백이 너무 넓어질 수 있습니다. 여기에 글상자 같은 편집을 적용해 여백을 추가하면 좌우 폭이 아주 좁아줄 수 있어요. 기준 여백을 0으로 두고 편집을 하면 이런 문제를 줄일 수 있습니다. 

이 스타일은 모든 전자책에 적용을 할 수 있습니다. 전자책 제작할 때 반드시 추가해 주는 스타일이에요.

참고 : margin, padding, line-height 에 대한 자세한 내용은 EPUB을 위한 CSS를 참고하세요~