내맘대로의 EPUB 제작 가이드

본문 혹은 본문의 특정 단어에 밑줄을 긋고 싶을 때 <u> 태그를 쓸 수 있습니다. 그런데 <u>태그를 쓰면 밑줄이 예쁘지 않아요. 두께나 스타일을 줄 수도 없습니다. 텍스트에 딱 달라붙은 밑줄이 그어져요. 

이럴 때 <u> 태그 스타일을 바꿔보세요. HTML 태그의 스타일은 편집자가 원하는 대로 바꿔 사용할 수 있습니다. 글자와 밑줄 간격을 조절할 수 있고, 밑줄 종류도 점선, 실선, 이중실선 등 다양하게 바꿀 수 있습니다. 색깔, 선의 두께도 편집자가 원하는 대로 지정할 수 있지요. 

선택자를 만들어 처리해도 되지만 태그에 스타일을 적용하면 코드가 깔끔해져요.

이렇게 코드도 깔끔해 지고, 편집 시간도 줄일 수 있습니다. 물론 <u>태그의 기본 스타일로 다른 곳에 사용했다면 쓸 수 없지요.

아래처럼 <u>태그에 스타일을 적용해 보세요. <u>태그를 쓸 수 없다면 선택자에 스타일을 적용하고 span 태그를 사용해도 되요.

text-decoration : none;을 해 준건 u 태그의 기본 스타일인 밑줄을 없애기 위함입니다. 이걸 해주지 않으면 border로 그어준 밑줄에 u태그의 밑줄이 겹쳐 그려지거든요.

border-bottom(border)는 다양한 속성이 있습니다. 1px는 밑줄의 두께예요.

border 밑줄 기본 두께

1px 밑줄 두께

2px 밑줄 두께

5px 밑줄 두께

solid는 1줄 실선을 뜻합니다. double(2줄 실선), dotted(1줄 점선), dashed(긴 점선), groove, ridge, inset, outset 등의 밑줄 종류를 선택할 수 있어요. 마지막에 붙은 #FF0000은 색입니다. 원하는 밑줄 색을 지정하면 됩니다.

padding-bottom으로 글자와 밑줄의 간격을 조절할 수 있습니다. padding을 주지 않아도 적당한 간격이 벌어지지만 섬세한 편집이 필요할 때 유용하게 사용할 수 있어요. 단, padding 값을 너무 크게 주면 아래쪽 줄에 영향을 줄 수 있으니 주의해야 합니다. 

padding-bottom을 주지 않았을 때

padding-bottom : 2px

padding-bottom : 10px(밑줄이 아래 문장에 그어짐)

padding-bottom 값이 너무 크면 윗쪽 단어에 그은 밑줄이 아래 문장과 겹칠 수 있어요.

링크 태그 <a...>는 3가지 스타일을 갖고 있습니다.

링크가 걸려있는 텍스트는 파란색에 밑줄, 방문한 링크는 갈색에 밑줄이 기본 스타일이고 마우스가 위로 올라가도 스타일이 변하지 않습니다. 

전자책을 만들 때 주석을 링크로 연결하는 경우가 있는데 별도의 스타일을 지정하지 않으면 링크 기본 스타일이 적용되지요.

링크 스타일을 변경하는 방법은 2가지가 있습니다.

1번은 링크의 상태(링크, 방문, 마우스오버)와 상관 없이 동일한 스타일이 적용됩니다.

이렇게 스타일을 적용하면 링크가 걸린 텍스트가 본문과 똑같이 보입니다.

링크의 상태에 따라 서로 다른 스타일을 지정하고 싶다면 선택자(selector)를 구분해서 스타일을 지정해 주면 됩니다.

이렇게 스타일을 지정하면 링크 텍스트는 빨간 글씨에 밑줄, 방문한 링크는 밑줄 없는 회색, 마우스가 올라가 있으면 노란색 배경이 적용됩니다.

링크가 걸려있는데 본문과 똑같아 구분이 가지 않는다면 독자들이 불편하겠지요? 하지만 주석은 ¹⁾처럼 본문과 구분이 되기 때문에 독자들이 주석이라는 것을 알 수 있습니다. 이럴 때는 파란색에 밑줄을 그을 필요는 없을거예요. 

상황에 맞게 a 태그나 3가지 선택자에 스타일을 적용할 수 있으니 편집할 때 활용하세요~

전자책 관련해서 대표적인 탁상행정 중 하나가 '전자책 제작 지원 사업'입니다. 신경도 쓰지 않는, 아니 신경 써봐야 도움이 전혀 되지 않는 사업인데 최근에 메일과 SNS 포스트로 자주 보게 되어 글을 남깁니다.

탁상행정 : 탁상 위에서만 하는 행정이라는 뜻으로, 현실적이지 못한 행정을 비유적으로 이르는 말.

전자책 제작비를 지원해 주는데 왜 탁상행정이라고 할까 생각하는 분들도 계실거예요. 이 사업은 전자책 시장의 생태를 전혀 고려하지 않습니다.

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

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

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

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

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

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

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

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

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

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

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