내맘대로의 EPUB 제작 가이드

CSS 스타일을 적용하려면 인라인, 내부, 외부 3가지 방법 중 하나를 선택해야 합니다.

수업을 하다 보면 수강생들이 만든 EPUB에 인라인 스타일이 잔뜩 포함된걸 자주 보는데, 이런 '짓'은 하지 않아야 합니다.

제대로 모르는 사람들은 인라인 스타일을 '써도 되지만 안쓰는게 좋다' 정도로 얘기하는데, '안써야 하지만 특별한 예외 상황에서는 써도 된다'가 맞습니다.

이건 누구의 개인적인 의견이 아닌, W3C, Mozilla의 권고.

CSS에 대한 가장 정확한 정보를 전달하는 사이트에 뭐라고 나와있는지 볼까요?

https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured

Inline Style

Avoid using CSS in this way, when possible. It is the opposite of a best practice. First, it is the least efficient implementation of CSS for maintenance. One styling change might require multiple edits within a single web page. Second, inline CSS also mixes (CSS) presentational code with HTML and content, making everything more difficult to read and understand. Separating code and content makes maintenance easier for all who work on the website.

가능하면 CSS를 이런 식으로 사용하지 마세요. 모범 사례의 반대입니다. 첫째, 유지보수를 위한 CSS 구현이 가장 비효율적입니다. 하나의 스타일 변경은 단일 웹 페이지 내에서 여러 번 수정해야 할 수 있습니다. 둘째, 인라인 CSS는 (CSS) 프리젠테이션 코드를 HTML 및 콘텐츠와 혼합하여 모든 것을 읽고 이해하기 어렵게 만듭니다. 코드와 콘텐츠를 분리하면 웹사이트에서 작업하는 모든 사람들이 유지 관리를 더 쉽게 할 수 있습니다.

내부 스타일은 조금 덜 엄격하지만, 그래도 사용하지 않는게 좋다고 설명합니다.

Internal stylesheet

But for sites with more than one page, an internal stylesheet becomes a less efficient way of working. To apply uniform CSS styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every web page that will use the styling. The efficiency penalty carries over to site maintenance too. With CSS in internal stylesheets, there is the risk that even one simple styling change may require edits to multiple web pages.

하지만 페이지가 두 개 이상인 사이트의 경우 내부 스타일시트는 작업의 효율성이 떨어집니다. 내부 스타일시트를 사용하여 여러 페이지에 균일한 CSS 스타일을 적용하려면 해당 스타일을 사용할 모든 웹 페이지에 내부 스타일시트가 있어야 합니다. 효율성 패널티는 사이트 유지 관리에도 적용됩니다. 내부 스타일시트의 CSS를 사용하면 한 번의 간단한 스타일 변경에도 여러 웹 페이지를 편집해야 할 위험이 있습니다.

웹에서 '페이지 두 개'는 EPUB에서 본문 xhtml 파일 두개와 같습니다.

xhtml 파일 하나만 넣어 만들 수 있는 전자책은 없을거예요.(뭐... 누군가는 그렇게 만들지도 모르지만요)

그럼 내부(Internal) 스타일시트 사용도 권하지 않습니다.

다시 말해,

전자책 만들 때는 무조건 외부(External) 스타일시트를 사용하고,

꼭 필요하면 내부(Internal) 스타일시트를 쓰고,

정말 예외적인 경우에 한하여 인라인(Inline) 스타일 시트를 쓰세요.

정말 예외적인 경우가 무엇인지 모르겠다, 그럼 인라인 스타일은 안쓰면 됩니다.

일러두기는 글자를 아래로 배치해야 하는데,

이게 많이 까다롭습니다.

height : 100%;는 먹히지 않습니다.

뷰어의 높이를 height는 감지할 수 없기 때문이지요.

그래서 뷰오 높이를 기준으로 height를 잡을 수 있는 vh를 사용합니다.

하지만 vh는 디스플레이의 크기이기 때문에

뷰어의 설정에 따라 100vh가 다음페이지로 넘어갈 수 있습니다.

그래서 대략 80vh를 사용했어요.

그런데 이보다 간단한 코드가 있습니다.

.box_note {

  position : fixed;

  bottom : 5em;

  margin : 1em;

}

이렇게 상자를 만든 후 텍스트를 넣으면 화면 하단에 배치됩니다.

이 코드도 완벽하지는 않습니다.

몇가지 문제가 있어요.

그래도 지금까지 찾은 코드 중 가장 간단한 스타일 코드입니다.

CSS는 계속 바뀝니다.

새로 추가되고, 없어지기도 합니다.

그래서 늘 공부를 해야하지요.

​

새로 추가된 CSS라고 해도, 이미 몇년 전 부터 사용을 한 분들도 많을거예요.

CSS는 표준이 되기 전에 아주 오랜 시간 테스트를 합니다.

브라우저에 적용이 된 후에도 최소 3~4년 이상 검증을 거치지요.

그래서 '난 오래 전부터 썼는데' 싶은 속성도 '새로운' 표준 CSS라고 할 때가 있습니다.

​

정확한 구분은 아니지만, css 속성이나 값 앞에

-moz-, -webkit- 같은 브라우저 표시를 해야 한다면 표준 검토 단계의 속성이라고 보시면 됩니다.

​

최근(이라 해도 2~3년 사이)에 부라우저에서 통합해 사용할 수 있게 된 속성을 3개 소개합니다.

국내 주요 유통사 전자책 뷰어에서 사용 가능한,

전자책 만들 때 아주 유용한 속성들입니다.

* 단, 구형 기기에서는 작동을 하지 않을 수 있습니다.

​

break-inside

​

이 속성은 page-break 라는 속성에서 파생된 속성입니다.

표준으로 확정되기 전에는 page-break-inside 라고 표기를 했는데,

표준으로 확정이 되면서 break-inside로 대체되었습니다.

모든 브라우저에서 break-inside를 적용할 수 있습니다.

​

calc

이건 속성의 값입니다.

width나 height 같이 단위를 값으로 갖는 속성에 사용할 수 있습니다.

아직 최종 확정 상태는 아니지만, 국내 주요 유통사는 모두 지원을 합니다.

이 속성은 1년 전에는 제대로 안먹혔는데, 최근에 다시 테스트를 해 보니 잘 먹히네요.

​

​

Attribute Selectors

이건 좀 오래 된 속성이에요.

아직 최종 확정 상태는 아니지만, 국내 주요 유통사 모두 지원을 합니다.

이미지나 글상자 처럼 비슷한 속성이 여려개 필요할 때 사용하면 아주 좋습니다.

똑같은 속성을 서로 다른 클래스에 무한 반복 시킬 때가 종종 있었는데,

이걸로 한방에 해결했지요.

​

이 3가지 속성을 사용할 때는 다음을 주의하세요.

1. 국내 주요 유통사(교보, 리디, 알라딘, 예스)의 전자책 뷰어에서 확인했습니다.

2. 안드로이드 8 이후 버전에서 테스트 했습니다. 이전 버전에서는 문제가 생길 수 있습니다.