!important - 리디북스 PC 뷰어에서 div-margin 안먹는 문제

리디 PC 뷰어에서 div 태그에 margin 속성이 적용되지 않는 문제가 있습니다.

 

.test-style {

margin-bottom : 5em;

}

 

<div class="test-style">내용</div>

 

<p>본문</p>

 

이렇게 하면 p 태그와 div 태그 사이에 마진이 생겨야 하는데 리디북스 PC 뷰어에사만 마진이 적용되지 않습니다.

처음엔 속성 상속이 꼬여 그런가보다 생각해 빈줄 추가로 해결했는데 같은 혆상이 반복되니 귀찮네요.

 

이런 스타일 만들려면 margin이 먹혀야 하는데 안먹혀서 <p><br/></p>를 넣는 귀찮은 작업을 해야돼요 ㅜ.ㅜ

 



 

 

오래 전에 K뷰어 만들 때 똑같은 현상을 경험한 적이 있습니다.

뷰어에도 자체적인 태그와 스타일이 있어요.

뷰어 화면 그릴 때 div  태그를 쓰는데, 이 뷰어 div 태그에 속성이 잘못 들어가면 CSS 상속이 되면서 이런 현상이 생깁니다. 쉽게 말해, 뷰어 오류예요. 구 버전에서는 이런 문제가 없다가 어느 순간부터 생긴걸 보면 개발자가 실수한거 같아요.

 

담당자가 이걸 발견하면 바로 고치겠지만, 누가 알려주기 전엔 발견하기 어려울테니 수정이 언제 될지 모릅니다. 그래도 전자책은 만들어야 하니, 해결 방법 알려드립니다.

 

.test-style {

margin-bottom : 5em !important;

}

 

<div class="test-style">내용</div>

 

<p>본문</p>

 

간단하지요?

 

스타일 상속이 문제니까, 상속받은 스타일 보다 내 스타일이 더 중요하다고 뷰어한테 알려주는 속성이에요.

두개 이상 속성이 충돌할 때 !important 속성이 우선적으로 적용됩니다.

 

!important는 안쓰는게 좋아요. CSS가 충돌을 할 일은 거의 없거든요.편집자가 만든 스타일이 아무 문제가 없다면 !important는 절대 쓸 일이 없습니다.

 

하지만 리디북스  PC 뷰어처럼 편집자의 손을 벗어났을 때 종종 도움이 됩니다. 

예를 들면, 교보 뷰어나 iBooks 뷰어는 주석을 강제로 숨기지요.

팝업 주석 처리 되니 주석이 없어도 되지만, 이 책에서는 주석 목록을 모두 보여줘야 한다 싶을 때 !important로 뷰어가 주석을 숨기지 못하게 할 수 있어요. 

 

- 사족. 제목에 !important는 중요한 글이라는 의미가 아닙니다 ^^;

 

설정

트랙백

댓글

[CSS 스타일 샘플] 큰 괄호 사이 글자

연 초부터 재미있는 스타일(?)로 편집된 책이 많이 들어오네요.

스타일을 어떻게 잡을까 고민하는 재미는 있지만, 제작 시간(ㅜ.ㅜ)이 늘어나 납기 맞추느라 애먹고 있습니다.

책 한권을 2~3일에 끝내야 하는데 스타일 고민하며 장난(?)하다 보면 한두시간이 금방 지나가네요.

 

PDF에서 캡쳐한 이미지입니다.

이렇게 제목 좌우를 커다란 중괄호로 감싼 스타일이에요.

이미지로 넣으면 간단하겠지만, 이미지 보다는 텍스트가 깔끔하기 때문에 어떻게 넣을가 고민해 봤습니다.



고민 결과는 이렇습니다.

 

HTML 코드는 간단해요.

 

<h3 class="title_prologue"><span class="title_prologue_body">프롤로그</span></h3>

참 쉽지요^^?

이렇게 쉬운데 방법을 생각하는데까지 시간이 오래 걸리네요.

 




비슷한 스타일이 또 있습니다.

목차 페이지에서는 장 제목을 이렇게 감쌌어요.

PDF 캡쳐 이미지입니다.




이 스타일 역시 HTML 코드는 간단합니다.

 

<p class="TOC_chap_title_orange"><span class="TOC_chap_title">1장_ <br/>여기 여자들도 일하고 있습니다</span></p>

 

 

이런 스타일을 만들 때 신경써야 할 부분은 상하 중앙 정렬이에요.

중앙 정렬은 한번 설명한 적이 있으니 궁금하신 분은 참고하세요.

 

https://www.epubguide.net/290

 

HTML 코드가 단순하다는 것은 CSS가 복잡하다는 뜻입니다.

보기엔 간단해 보이지만 CSS는 좀 복잡해요.

어려운 CSS 속성이 들어가지는 않았습니다.

제가 한번 이상 설명한 속성들 뿐이지요.

그런 속성을 어떻게 조합하느냐에 따라 다양한 효과를 낼 수있어요.

 

전자책 책공장 회원님들은 이런 스타일을 어떻게 표현하시겠어요?

설정

트랙백

댓글

  • Huko 2020.02.27 14:56 ADDR 수정/삭제 답글

    css 어떻게 쓰셨는지 궁금하네요^^

페이지 하단에 문장 넣기

오랜만에 팁 하나 올립니다^^

 

전자책 편집 하면서 독자들이 신경쓰지 않을것 같은 페이지는

가독성만 보장 되면 편집은 신경을 많이 쓰지 않습니다.

그래서 이런 스타일이 나오면 그냥 상단에 가운데 정렬 정도로 편집을 했어요.

 

 

독자들이 신경쓸 것 같지 않고,

이 페이지는 1초도 안보고 넘길테니 전달하려는 내용만 확실히 전달 되면 편집 스타일은 중요하지 않다고 생각한 것이지요.

그런데 이런 부분에 신경을 쓰는 편집자가 생각보다 많더라구요.

이런건 어떻게 해야 하냐고 여러번 문의를 받았는데 그때 마다 '간단히 처리하세요' 정도로 알려드렸어요.

 

종이책과 비교하며 보지 않는 이상

페이지 위쪽에 나와도 어색하지 않아요.

페이지 위에 놓는게 싫다면 빈줄<p><br/></p> 5개 정도 추가하면 되지요.

이정도만 해도 별 문제 없다고 생각을 합니다. 

 

하지만 질문이 많이 들어온다는건 그만큼 신경쓰는 분들이 많다는 뜻이라

'간단히 처리하세요' 정도로는 부족한게 아닐까 생각이 들더라구요.

얼마 전에도 비슷한 문의가 들어와서 이번엔 제대로 스타일을 잡아봤습니다. 

 

이런 스타일은 중요한 포인트가 있어요.

 

어떤 경우라도 글자가 다음 페이지로 넘어가서는 안된다.

 

물론, 글자 크기를 엄청나게 키워서 한 페이지에 글자가 모두 담길 수 없다면 다음 페이지로 넘어갈거예요.

뷰어 높이가 아주 좁아서 한번에 2줄만 표시된다고 해도 다음페이지로 넘어가겠지요.

이런 특수한 경우가 아니라면 다음 페이지로 넘어가지 않아야 되요.

 







이런 스타일은 쉬워 보이지만 생각보다 까다롭습니다.

CSS를 잘 모르는 사람들은 vertical-align을 쓰면 된다고 생각해요.

vertical-align으로도 가능하지만, 그냥 되지는 않아요.

 

vertical-align로 직접 편집해 보세요.

팁을 드리자면 table 관련 스타일을 함께 적용해야 합니다.

 

저는 box-orient라는 속성을 사용했어요.

이 속성은 문제가 하나 있습니다. 표준 CSS 속성이 아니에요.

하지만, 국내 유통사 뷰어는 대부분 이 속성을 지원합니다.

 

box-orient는 수평 혹은 수직으로 레이어를 관리할 수 있도록 하는 속성이에요.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient

 

box-pack이라는 속성과 함께 사용하면 글상자 안의 도다른 글상자나 block 속성의 태그를 좌우, 혹은 상하로 정렬할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-pack

 

그런데 세로 속성을 줄 때 문제가 생겨요.

글상자에 테두리를 그리고 높이 100%(height : 100%)을 하면, 페이지가 가득 찰 것 같은데 텍스트가 있는 부분 까지만 테두리가 생기지요.

이 문제를 해결하려면 vh라는 단위를 써야되요.

vh는 현재 디스플레이 크기에 따른 비율이에요.

현재 디스플레이 해상도의 높이가 100vh지요.

 

그래서 width : 100vh;  하면 화면 가득 테두리가 그려집니다.

하지만, 이 역시 문제가 있어요.

리디북스는 100vh가 여백을 제외하고 현재 화면 높이에 맞게 그려지는데 교보뷰어는 100vh로 할 경우 여백까지 포함해 버리지요. 현재 화면 크기가 100이고, 뷰어 기본 여백이 5라면 교보 뷰어는 105가 되는거예요. 그래서 100vh로 놓으면 교보 뷰어에서는 일부 내용이 다음페이지로 넘어갑니다.

 

이 문제는 간단한 트릭으로 해결할 수 있어요.

100vh가 아닌 80vh 정도로 놓으면 되요. 80vh ~ 85vh 정도면 문제 없을거예요.

 

그래서 이런 스타일이 나옵니다.

 

<body>

<div class="box_license">

<div class="box_bottom">

<p>화면 하단에 놓일 내용</p>

</div>

</div>

</body>

 

.box_license {

height : 80vh;

 

display: box;

box-orient: vertical;

box-pack: end;

box-align: center;

 

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-box-pack: end;

-webkit-box-align: center;

 

display: -moz-box;

-moz-box-orient: vertical;

-moz-box-pack: end;

-moz-box-align: center;

}

높이의 80%만 적용되서 화면 아래가 살짝 뜨긴 해요.

그래도 빈 줄을 10개씩 넣어가며 화면 아래에 맞추는 것 보다는 깔끔하게 처리될거예요.

설정

트랙백

댓글

무료로 사용할 수 있는 전자책 글꼴(무료 폰트) Guide

이전 내용은 이곳에서 확인하시기 바랍니다.

http://epubguide.net/245


전자책에 무료로 쓸 수 있는 글꼴을 모았습니다.

글꼴의 저작권(라이선스), 제작처, 받을 수 있는 경로, 그리고 글꼴파일이 지원하는 언어(한중일, 한글 고어, 기본 특수문자 세트 등), 글자 크기별 모양 등을 한번에 확인할 수 있습니다. 


다운로드 https://goo.gl/98udBq



❖ 판올림 내용

- 태폰트 3종 추가

   * 태흘림

   * 태조각

   * 태으뜸



Set03 무료 서체 목록(일반 기업, 지자체 등)

  • 가비아 글꼴

    • 가비아 봄바람

    • 가비아 납작블럭

    • 가비아 솔미체

  • 미생체

  • 야놀자 야체

  • tvN 즐거운 이야기체

  • 아리따 글꼴

    • 아리따 부리

    • 아리따 돋움

    • 아리따 Sans(로마자)

    • 아리따 흑체(중국어)

  • 배달의민족

    • 배민 한나체

    • 배민 주아체

    • 배민 도현체

    • 배민 한나는열한살체

    • 배민 기랑해랑체

    • 배민 연성체

  • 티몬

    • 티몬 몬소리

    • 티몬 티움(영문전용)

  • 고양

    • 고양체

    • 고양덕양체

    • 고양일산체

  • 태폰트

    • 태흘림

    • 태조각

    • 태으뜸




Set02 무료 서체 목록(은글꼴)

  • 은글꼴

    • 은바탕

    • 은돋움

    • 은그래픽

    • 은궁서

    • 은필기

    • 은디나루

    • 은자모바탕

    • 은자모돋움

    • 은자모노벨

    • 은자모소라

    • 은펜

    • 은펜흘림

    • 은필기a

    • 은신문

    • 은타자

    • 은바다

    • 은옛글



Set01 무료 서체 목록(국가기관, 네이버, 구글 등)

  • 구글 노토(Google Noto)

    • Noto Sans KR

    • Noto Sans Mono KR

    • Noto Serif KR

  • 네이버 나눔 글꼴

    • 나눔명조

    • 나눔고딕

    • 나눔바른고딕

    • 나눔펜

    • 나눔바른펜

    • 나눔브러시

    • 나눔스퀘어

    • 나눔스퀘어라운드

    • 나눔바른고딕-옛한글

  • NHN 고도 글꼴

    • 고도 마음(godo Maum)

    • 고도 Rounded-L

    • 고도 Rounden-R

  • 저작권위원회 KCC 글꼴

    • KCC 김훈체

    • KCC 은영체

  • 문화체육관광부, 출판인회의 코펍(Kopub) 글꼴

    • 코펍 바탕(Kopub Batang)

    • 코펍 돋움(Kopub Dotum)

  • 만화진흥원(한국콘텐츠진흥원) 글꼴

    • 만화진흥원체

  • 서울시 서울 서체

    • 서울 남산체(정체)

    • 서울 한강체(정체)

    • 서울 남산체(장체)

    • 서울 한강체(장체)



1. 목차에서 글꼴의 모양을 확인할 수 있습니다.

글꼴 이름을 누르면 글꼴의 상세 정보로 이동합니다. 



2. 글꼴의 저작권 정보와 배포처, 다운로드 경로를 확인할 수 있습니다.



3. 글꼴의 상세한 내용을 확인할 수 있습니다.

한글, 옛한글, 영문, 일본어, 한자, 기타 언어(스페인, 독일, 프랑스, 러시아)의 지원 여부를 알 수 있고 특수문자 세트가 포함되어 있는지 확인할 수 있습니다. 



4. 한글, 영문 문단이 어떻게 보이는지 확인할 수 있으며 글자 크기에 따른 모양, 스타일(기울임, 진하게)을 적용했을 때의 모양을 알 수있습니다. 



5. 전자책 본문으로 썼을 때 글자가 어떻게 보이는지 알 수 있습니다. 본문 내에서 진하게, 기울임, 윗첨자, 괄호설명 등의 스타일이 어떻게 표현되는지 알 수 있습니다.





아직 본문 디자인은 편집중이고, 무료로 사용 가능한 글꼴 중 일부만 작업이 되었습니다. 시간 나는 대로 업데이트하고 있습니다. 글꼴에 대해 추가로 확인하고 싶은 내용이 있거나 더 추가하고 싶은 무료 글꼴이 있으면 언제든 댓글이나 이메일로 남겨 주십시오. 확인하는 대로 추가하겠습니다.

설정

트랙백

댓글

[CSS3] EPUB2에 애니메이션, 그라데이션 등 다양한 효과 주기

화려한 효과는 EPUB3만 가능한게 아닙니다.

EPUB2에도 표준을 지키며 간단한 애니메이션을 넣을 수 있습니다. 

스크립트를 쓰지 않고 CSS만 사용해 효과를 낼 수 있지요.


많은 분들이 이런 '화려한' 효과에 관심을 보입니다.

그런데 '화려한' 효과를 왜 쓰는지 잘 생각해 보셔야되요.

화려한 효과는 책을 보지 않는 사람에게는 '와~' 하는 감탄을 불러내겠지만


글자가 왔다 갔다 하고, 번쩍이고, 네온사인처럼 색이 바뀌면

독자들이 책에 집중할 수 있을까요?


'화려한' 효과는 얼마든지 넣을 수 있습니다. 어렵지 않아요.

EPUB2와 CSS3만 이용해도 본문 위에 벗꽃이 흩날리게 만들 수 있어요.

뷰어에 따라 제한이 있지만 교보, 알라딘, 리디, iBooks등의 뷰어에서 돌아갑니다.


애니메이션 등의 화려한 효과를 찾는 분들이 많아 샘플을 올리는데

이런 화려한 효과가 정말 책에 필요한건지 진지하게 고민을 해 보세요.

제대로 기획을 해서 꼭 필요한 곳에 이런 효과를 넣어야지 기획 없이 '화려함'만 찾는건 독서에 방해가 될 수 있어요.



첨부한 파일은 독특한 효과를 주는 CSS3 속성 샘플입니다.






설정

트랙백

댓글

무료로 사용할 수 있는 전자책 글꼴 Guide v0.4


전자책에 무료로 쓸 수 있는 글꼴을 모았습니다.

글꼴의 저작권(라이선스), 제작처, 받을 수 있는 경로, 그리고 글꼴파일이 지원하는 언어(한중일, 한글 고어, 기본 특수문자 세트 등), 글자 크기별 모양 등을 한번에 확인할 수 있습니다. 




판올림 내용


- 본문 스타일을 적용했습니다.

- 저작권, 무료폰트, 이 책을 보는 방법 등 설명이 수정/추가 됐습니다.

- 코펍 폰트가 추가됐습니다.

- 목차 업데이트를 했습니다. 뷰어의 목차 기능을 이용해 원하는 글꼴을 찾을 수 있습니다.

- 본문 예제에 기울임, 진하게 스타일을 추가했습니다.

- 포함된 글꼴

   * 구글 노토  Sans, Serif 한글(KR)

   * 네이버 나눔 글꼴

   * NHN고도 글꼴

   * KCC 김훈체, 은영체

   * 코펍 서체

   * 서체는 계속 추가됩니다.


아직 본문 디자인은 하나도 하지 않은 상태고, 무료로 사용 가능한 글꼴 중 일부만 작업이 되었습니다. 시간 나는 대로 업데이트하고 있습니다. 글꼴에 대해 추가로 확인하고 싶은 내용이 있거나 더 추가하고 싶은 무료 글꼴이 있으면 언제든 댓글이나 이메일로 남겨주십시요. 확인하는 대로 추가하겠습니다.



* 글꼴파일 그룹 제작처의 라이선스 전문과 라이선스를 확인할 수 있는 경로, 글꼴 파일을 받을 수 있는 경로를 표시합니다.


* 글꼴 파일이 지원하는 언어 및 특수문자를 글꼴 디자인으로 확인할 수 있습니다. 만약 글꼴파일이 지원하지 않는 언어가 있다면 아래 [나눔명조]의 '한글 고어'처럼 글자가 깨지거나 [나눔 펜]의 한자 처럼 아무것도 나타나지 않을 수 있습니다. 이는 내용이 없는 것이 아니고 글꼴파일이 지원하지 않아 표시되지 않는 것입니다. 





* 글꼴의 글자 크기별, 꾸밈별 모양을 확인할 수 있습니다. 글자 크기는 스타일을 적용하지 않은 1em을 기준으로 합니다. 글꼴에 따라 1em의 글자 크기가 커보이거나 작아보일 수 있지만 이는 모두 1em입니다. 글자의 특성에 따라 같은 1em이라도 글자 크기가 달라보일 수 있습니다. 



(캘리버에서 캡쳐한 화면)



* 글꼴은 가장 많이 사용되는 Regular, Medium 등의 대표 글꼴 하나만 사용했습니다. 아래 글꼴 스타일은 기본 글꼴에 글자 꾸밈 태그를 적용한 것입니다. 위 이미지처럼 캘리버 같은 일부 뷰어에서 이런 스타일이 제대로 표현되지 않을 수 있습니다.

국내 유통사의 표현성에 대한 내용은 이곳을 참고하시기 바랍니다 : http://epubguide.net/241

(iBooks에서 캡쳐한 화면)



* 본문에서 글꼴이 어떻게 보이는지를 확인할 수 있습니다. 본문 편집시 많이 사용하는 윗첨자 형태의 설명이나 괄호 설명을 참고할 수 있게 스타일을 추가했습니다. 글꼴에 따라 본문 느낌이 달라져 본문 편집을 위한 원하는 글꼴을 찾을 때 참고할 수 있습니다. 



설정

트랙백

댓글

모르는 사람이 의외로 많은 CSS 문법 (2)

앞의 글에서 선택자 만드는 규칙을 알려드렸습니다.


1. 태그 선택자 : HTML 태그를 스타일 선택자로 사용

2. 클래스 선택자 : .classname 으로 사용자가 필요한 스타일 선택자 생성

3. ID 선택자 : HTML요소에 고유한 성격을 부여하는 ID를 선택자로 활용


여기에 추가로, 


1. 활용할 수 있는 HTML 태그가 있으면 적극 활용하고

2. 예약어(태그, 속성 등에 쓰이는 단어)는 가급적 선택자로 사용하지 말아야 한다.


는 주의사항까지 정리해 드렸습니다.

긴 글을 쓴 것 같은데 이 몇줄로 간단히 요약이 되네요 ㅜ.ㅜ


이번 글에서는 특수 선택자를 간단히 정리해 보겠습니다.

특수 선택자란 태그, 클래스, ID 선택자와는 달리 특수한 목적을 위해 사용하는 선택자를 의미합니다. 특수 선택자라는 용어는 뜻이 명확히 규정되어 있지 않아 제가 설명드리는 범위와 다른 설명에서 사용하는 범위가 다를 수 있습니다. 여기에서 얘기하는 '특수 선택자'는 태그, 클래스, ID를 제외한 특수한 목적으로 지정된 선택자를 의미합니다.


1. @page Rule


전자책 스타일에서 간혹 보이는 선택자입니다. 참고로 @가 붙으면 선택자라고 하지 않고 Rule이라고 합니다. @font-family Rule, @page Rule 하는 식으로요.


@page는 인쇄를 위한 규칙입니다. HTML은 '가변형 화면' 즉 폭과 높이가 바뀌는 화면에 내용을 표현하기 위한 언어입니다. 그런데 화면을 인쇄하려면 A4, B5처럼 정해진 크기에 맞춰야하지요. 지금 보고 계신 이 내용을 A4용지 프린터로 인쇄하면 어떻게 나올가요? 보이는 그대로 나올까요?(궁금하면 해보세요 ^^)


@page는 인쇄를 할 때 여백을 지정하기 위한 규칙입니다. 그래서 인쇄에 필요한 페이지 사이즈(size), 상하좌우 여백(margin) 등 제한적인 속성만 사용할 수 있어요. 


전자책 전체 페이지의 마진을 줄 때 사용할 수 있지만, 그리 권해드리고 싶은 속성은 아닙니다. page-break처럼 인쇄를 목적으로 만든 규칙이라 다양한 화면에서 보는 전자책에 어울리지는 않습니다. 그래도 마진은 문제 없이 지정되니 '쓰면 안된다' 정도는 아니에요.


@page에 대한 자세한 설명은 이 글을 참고하세요.

https://developer.mozilla.org/ko/docs/Web/CSS/@page


2. * 전체 선택자


앞에 곱하기(*) 기호는 오타가 아닙니다. 이 선택자가 * 예요.


* {

margin : 0;

padding : 0;

font-family : '명조';

font-size : 1.2em;

...

}


전체 선택자로 문서 전체에 영향을 주는 스타일을 지정할 수 있습니다.

만약 책의 모든 글씨체를 '명조'로, 글자 크기를 1.2em으로 지정하고 싶다면 위 스타일을 넣어보세요.

모든 CSS 선택자에 '명조'를 지정하지 않아도 알아서 명조가 지정이 될거예요.


책 전체에 적용해야 하는 기본 설정이 있다면 전체 선택자를 사용할 수 있습니다. @page 속성 대신 여백을 줄 때 주로 사용해요. 그리고 줄간격, 문단간격을 없애려고 모든 선택자에 margin : 0; padding : 0;을 추가하는 수고도 덜 수 있습니다.


3. Pseudo-class 선택자(가상 클래스 선택자)


가상 클래스 선택자는 특정 항목이 특수한 상태일 때만 속성을 부여하는 선택자입니다.

예를 들어, 링크를 생각해 보세요.


링크 텍스트 : 파란색 밑줄

링크 클릭상태 : 빨간색 밑줄

클릭했던 링크 : 갈색 밑줄


링크 속성에는 이렇게 3가지 스타일이 있습니다.

이 스타일을 변경하려면 a 태그 스타일을 수정해 주면 되요.

a {

color : #000000;

text-decoration : none;

}


이러면 밑줄이 사라지고 글자 색은 검정색이 됩니다. 


문제는, 링크를 클릭한 상태에서도, 링크를 다녀와도 항상 밑줄 없는 검정색이라는거예요.

각 상태별로 다른 스타일(예를 들어 링크를 클릭하고 있을 때 노란 바탕색)을 주고 싶으면?


이럴 때 가상 클래스 선택자를 사용할 수 있습니다.


a:link {

/*링크가 걸린 텍스트의 스타일*/

}


a:visited {

/*방문했던 링크 텍스트의 스타일*/

}


a:hover {

/*링크 위에 마우스를 올렸을 때 스타일. 터치 모니터에서는 효과를 나타내기 어려움*/

}


a:active {

/*링크를 누르고 있는 상태에서 텍스트의 스타일*/

}


이 외에도 다양한 가상 클래스 선택자가 있습니다.


p::first-letter {

color : red; /*문단의 첫 글자만 빨간색으로*/

}


p::first-line {

color : red; /*문단의 첫번째 줄만 빨간색*/

}


p::before, p::after {

content :("!!경고!!");/*문단의 앞뒤에 !!경고!! 문구 자동 삽입*/

}


가상 클래스는 종류가 다양해서 제가 자주 쓰는 몇가지만 여기에 소개합니다. 

이 중에 ::before, ::after는 정말 활용도가 높습니다.

더 자세히 알고싶다면 이곳을 참고하세요.

https://www.w3schools.com/css/css_pseudo_classes.asp


오늘은 여기까지.

다음 글에는 복합선택자(Combinator)를 설명할게요. 이전 글에서도 몇번 설명한 적이 있는데 전체적으로 다시 정리하겠습니다. 

설정

트랙백

댓글

모르는 사람이 의외로 많은 CSS 문법 (1)

최근에 전자책 제작 강의를 많이 하고 있습니다.


완전 초보부터 윙크나 시길로 전자책을 만들다 한계에 부딪힌 분들까지 대상이 다양한데요, 전자책을 많이 만들어 봤다는 분들조차 아주 기본적인 CSS 문법을 모르는 경우가 많았습니다. 


그래서 기본적인 CSS 문법을 정리해 봅니다.


1. 선택자 만들기


선택자는 스타일의 그룹입니다. 여러개의 스타일을 하나로 묶어놓고 이 스타일의 이름을 붙이잖아요. 이걸 선택자(selector)라고 합니다. 


.my_background_color {   /* <--my_background_color가 선택자예요 */

background-color : #FF0000;

margin : 1em;

font-family : "굴림";

}


선택자를 만드는 규칙은 단순하지 않습니다. 복잡한 규칙이지만 잘 활용하면 아주 편해요. 서로 다른 스타일이지만 쓰임이 같다면 같은 이름을 줄 수 도 있지요.


예를 들어, 제목의 고딕체는 빨간색, 문단의 고딕체는 노란색으로 스타일을 적용한다면 선택자 이름을 2개 만들어야 합니다.


.title_gothic {

color : red;

}


.para_gothic {

color : yellow;

}


그런데 이렇게 만들 수도 있어요.


h1.gothic {

color : red;

}


p.gothic {

color : yellow;

}


이렇게 하면 같은 이름의 선택자라도 태그에 따라 다른 스타일이 적용됩니다.

선택자 만드는 규칙은 CSS의 가장 기본입니다. 선택자는 Cascade의 기본이기 때문에 선택자 규칙을 모르면 CSS를 제대로 만들 수 없습니다. 



선택자 만드는 규칙


1.1 태그 자체


p, h1, h2, strong, bold 등의 태그에 스타일을 직접 적용할 수 있습니다. 태그 자체에 스타일을 적용하면 태그에 클래스를 붙일 필요가 없어 편해요.


p { text-indent : 1em; }


이렇게 하면 모든 p 태그에 들여쓰기가 됩니다. 


1.2 class 선택자


사용자가 임의로 이름을 지정해서 선택자를 만들 수 있습니다. 선택자 앞에 점(.)을 붙여 사용합니다.


.my_style {


}


영문, 숫자, 언더바(_) 하이픈(-)을 조합해 어떤 이름이라도 지정할 수 있습니다. 언더바와 하이픈 이외에도 몇가지 기호를 더 사용할 수 있지만 사용할 수 없는 기호가 더 많으니 언더바와 하이픈만 이용하는게 좋아요.


선택자를 특정 태그에 종속시킬 수 있습니다. 이렇게 하면 같은 이름이라도 태그에 따라 다른 스타일을 사용할 수 있어요.


h2.title {

font-size : 1.5em;

text-align : center;

}


h3.title {

font-size : 1.2em;

text-align : right;

}


선택자를 만들다 보면 이런 저런 이름을 붙이고 더 붙일 단어가 생각 안나 스타일 이름은 뭐로 하지 고민하게 되는데 태그에 따라 같은 내용, 다른 모양이라면 이렇게 똑같은 이름을 쓸 수 있습니다.


클래스 선택자는 속성을 지정할 때 class="class_selector"라는 형식으로 태그에 값을 넣습니다.


<h2 class="title">부 제목</p>




1.3 ID 선택자


ID는 말 그대로 고유한 이름입니다. 그래서 ID는 한 챕터 안에 딱 한번 사용을 합니다. 절대로 한번 이상 나와서는 안되지요.


ID 는 속성을 지정하기 위한 목적보다 문서 내에 있는 특정 값이나 위치를 표시하기 위해 사용합니다. 예를 들어 주석을 링크로 연결한다면 이렇게 되요.


<p> ID<a href="#foot_note01">1)</a>는 문서 내에 딱 한번 사용할 수 있습니다</p>


<p id="foot_note01"> ID : Identification의 약자</p>



여기서 ID는 <p id="foot_note01"> 입니다. a 태그에 있는 foot_note01은 ID를 지시하는 값이지 ID가 아닙니다. 만약 ID가 1번 이상 나온다면  a 링크는 어디로 가야할지 알 수 없게 되지요. 그래서 ID는 문서 내에 반드시 한번만 나와야 합니다. 


<p> ID<a href="#foot_note01">1)</a>는 문서 내에 딱 한번 사용할 수 있습니다</p>


<p id="foot_note01"> ID : Identification의 약자</p>


<p id="foot_note01"> ID : I Do의 약자</p>


그런데 이렇게 ID를 지정하고, 스타일을 바꾸고 싶을 때 어떻게 할까요? 

ID에 스타일을 적용할 수 있습니다.


#foot_note01 {

font-color : blue;

}


ID 스타일은 페이지 내에서 딱 한번만 사용할 수 있습니다. ID가 한번밖에 나올 수 없으니까요. 그리고 위 예에서 설명드린 주석 스타일을 ID로 적용하는건 권해드리지 않습니다. 주석이 10번 나온다면 각 ID마다 스타일을 지정해 줘야 하거든요.


EPUB2에서는 ID 스타일을 쓸 일이 많지 않습니다. 하지만 EPUB3로 사진 앨범을 만든다면 ID 스타일을 쓰게 됩니다. 


여기까지가 선택자를 만드는 가장 기본적인 방법입니다.


선택자를 만들 때 주의해야 할 점이 있어요.


a. HTML 태그가 있다면 태그를 써라.


어떤 분들은 모든 태그에 클래스 선택자를 붙입니다. 예를 들어 본문에 장제목 스타일이 딱 하나(수십번 반복될 수 있지만) 있다고 생각해 보세요.


.chap_title {

/*장제목 스타일*/

}


<h3 class="chap_title">장제목 1</h3>

<h3 class="chap_title">장제목 2</h3>

<h3 class="chap_title">장제목 3</h3>


이건 자원 낭비예요. 편집 시간도 늘어나고, 파일 용량도 늘고 코드도 복잡해집니다.

사용할 수 있는 태그가 있다면 태그를 쓰면 됩니다.


h3 {

/*장 제목 스타일*/

}


<h3>장 제목 1</h3>

<h3>장 제목 2</h3>

<h3>장 제목 3</h3>


만약 프롤로그 처럼 장 제목과 같은 레벨인데 스타일이 다르다면, 본문에 가장 많이 나오는 스타일을 h3에 지정하고, 앞과 끝에만 나오는 프롤로그 에필로그 스타일을 클래스로 지정하면 됩니다. 


b. HTML 태그와 기타 예약어는 클래스나 ID 선택자명으로 사용하지 말아라.


.strong {color : red;}


.address {font-family : "고딕"}


.button {  }


.small {   }


.img {   }


.color { }


.line-height {   }


.word-wrap {   }


보기엔 아무 문제 없어 보입니다. 그리고 이렇게 해도 문제가 생기지 않습니다. 하지만 이 선택자 이름은 전부 예약어입니다. HTML과 CSS에서 태그나 속성으로 사용하는 단어들입니다.


예약어를 써도 정상적으로 스타일이 적용되고 epubcheck에 오류가 발생하지 않습니다. 하지만 이건 가장 기본적인 규칙이에요. 너무 당연한거라 설명이 필요 없을 정도인데 생각보다 예약어를 선택자로 쓰는 분들이 많더라구요. 


한번에 정리하려 했는데 생각보다 내용이 길어졌네요.

다음 글에는 복합적인 선택자에 대해 설명하겠습니다. 언제가 될지는 모르겠지만... ^^;

설정

트랙백

댓글

복잡한 코드를 정리해 주는 유용한 텍스트 편집 태그

전자책을 편집하다 보면 수많은 스타일을 사용하게 됩니다. 그런데 스타일을 span 태그로 적용을 하면 코드가 복잡해지고, 스타일 선택자를 기억하기도 어렵고, 코드도 길어지고.... 불편한 점이 많아요.


영문 표기를 예로 들어 볼까요?


EPUB(electronic publication)은 국제 디지털 출판 포럼(IDPF, International Digital Publishing Forum)에서 제정한 개방형 자유 전자서적 표준이다. EPUB은 자동공간조정(reflowable)이 가능하게 끔 디자인 되었다.


책에서 흔히 보는 편집입니다. 이런 편집을 span 태그로 스타일을 적용하면 이렇게 되요.


<p>EPUB<span class="txt_small">(electronic publication)</span>은 국제 디지털 출판 포럼<span class="txt_small">(IDPF, <span class="txt_italic">italicInternational Digital Publishing Forum</span>)</span>에서 제정한 개방형 자유 전자서적 표준이다. EPUB은 자동공간조정<span class="txt_small">(reflowable)</span>이 가능하게 끔 디자인 되었다.</p>


깔끔함을 떠나서 입력해야 하는 태그와 속성이 너무 많습니다. 당연히 입력 시간이 오래 걸릴 수 밖에 없어요. 그리고 태그와 스타일 속성 역시 파일 크기에 영향을 줍니다. 본문 텍스트 파일은 100kb밖에 안되는데 HTML로 편집하면 200kb가 될 수도 있어요. 파일 용량이 커지면 뷰어 로딩 시간이 길어집니다. 챕터 넘어갈 때 보이는 로딩 표시를 짧게 하려면 파일 용량을 줄이는게 가장 효과적이에요.


어떤 분들은 선택자 이름이 길다고 t1, t2 이렇게 선택자 이름을 짧게 만들어요. 이것도 방법은 되겠지만 추천하고 싶지는 않습니다. 개념 잡힌 편집자(프로그래밍 개발자도 마찬가지고)라면 선택자(개발에서는 변수) 이름은 누가 봐도 쉽게 이해할 수 있는 이름을 사용합니다. 


그럼 선택자 이름을 고치지 않고 위 코드를 어떻게 정리할 수 있을까요?


<p>EPUB<sub>(electronic publication)</sub>은 국제 디지털 출판 포럼<sub>(IDPF, <i>International Digital Publishing Forum</i>)</sub>에서 제정한 개방형 자유 전자서적 표준이다. EPUB은 자동공간조정<sub>(reflowable)</sub>이 가능하게 끔 디자인 되었다.


이 코드는 어때요? 훨씬 깔끔해 졌지요?

span 태그를 쓸 때보다 파일 용량도 훨씬 줄일 수 있고, 보기에도 더 깔끔해 보입니다. 그런데 '누가 봐도 쉽게 이해할 수 있는 이름'인가요?

HTML을 조금만 안다면 <sub>와 <i>태그가 의미하는 바를 정확히 알 수 있을거예요. 


그런데 <sub>는 아래첨자낳아요. 그럼 EPUB(electronic publication) 이렇게 보이지 않나요?


<sub>를 그대로 쓰면 아래첨자로 보이겠지요. 그래서 CSS로 <sub>태그의 기본 스타일을 수정해 줍니다.


 sub { font-size : 0.8em; vertical-align : baseline; }


이렇게 스타일을 수정하면 아래첨자가 아니라 본문 텍스트에 맞춰 작은 글씨로 보이게 되지요.


HTML에는 이렇게 활용할 수 있는 기본 태그가 많이 있습니다.

IDPF의 '공개 출판 구조(OPS) 2.0' '2.2.1 필수모듈'을 보면 xhtml에서 사용 가능한 태그 목록이 나와 있습니다(http://www.odpf.or.kr:8080/wp/?page_id=192#221) 이것만 써야 한다는건 아니고, 최소한 이 태그들을 뷰어가 표현해야 한다는 거예요.


이 태그들 중 텍스트 편집에 활용할 만한 것들을 몇가지 소개합니다. 여기 소개한 태그보다 훨씬 많지만 책 한권 편집하는데 이정도만 사용해도 span 태그를 거의 쓸 일이 없습니다. 본문 안에 다른 종류의 글자가 얼마나 많이 들어가는지 생각해 보세요. 본문, 외국어 표기, 인용구, 이미지 설명(캡션) 등등. 이런 요소가 20개씩 들어가는 책은 찾아보기 힘들잖아요. 아주 복잡한 책이 아니라면 10개 정도 스타일로 본문에 쓰인 텍스트를 대부분 표현할 수 있습니다. 


태그 

기능 및 활용

스타일 예

 <sub>

- 본래 기능은 아래첨자

- 스타일을 주면 외국어 병용 표기[영어English]나 괄호 설명[IDPF(국제 디지털 출판 포럼)] 처럼 본문 글자 아래쪽으로 정렬된 작은 글씨를 표현 가능

 sub {

 font-size : 0.8em;

 vertical-align : baseline;

}

 <sup>

- 본래 기능은 윗첨자

- sub와 비슷하나 위로 정렬된 작은 글씨를 표현 가능 IDPF(국제 디지털 출판 포럼)

 sup {

 font-size : 0.8em;

 vertical-align : 30%;

}

 <cite>

- 문장 내 짧은 인용구(HTML5에서는 작품의 제목)를 표현할 때 사용

- 기본 스타일은 이탤릭이나 CSS 수정 가능

예) 빈 센트 반 고흐 해바라기

예) IDPF(EPUB 전자책 표준을 제안했다)

cite {

 font-style : normal;

 font-size : 0.9em;

}

 <i>

- 기울임

- 기울임 스타일에 사용

- 기울임 글꼴에 다른 속성(색, 글자크기)을 지정해 사용할 수 있음

- 기울임 속성은 유지하기를 권함

i {

 font-style : italic;

 font-size : 1.2em;

 color : blue;

}

 <em>

- 강조(기울임으로 표현)

- 기본 스타일은 <i>처럼 기울임으로 표현되는데 '강조'를 위한 태그임

- 기울임 속성을 지우고 스타일을 지정해 '강조'가 필요한 글자에 사용 가능

em {

  font-style : normal;

  font-size : 1.1em;

  color : red;

 <strong>, <b>

- 강조, 진한 글씨체

- 진한 글씨체로 강조를 해야할 때 사용(진한 글씨체(bold) 속성은 유지하기를 권함. 다른 속성 부여할 수 있음)

 strong, b {

  font-size : 0.8em;

  font-family : '굴림';

}

 <small>

- 본문 보다 작은 글씨체

- 작은 글씨체 속성은 그대로 유지하고 다른 스타일을 적용할 수 있음

 
 <big>

- 본문 보다 큰 글씨체

- 큰 글씨체 속성은 그대로 유지하고 다른 스타일을 적용할 수 있음

 


이정도만 사용해도 웬만한 책은 편집할 수 있을거예요. 

본문보다 작은 글씨체로 외국어 동시 표기가 필요하고, 다른 스타일로 괄호 설명을 넣어야 한다면 <sub>와 <cite>를 쓰는 식으로요.


이렇게 기본 태그를 사용해도 다른 스타일이 필요하다면 그때 <span> 태그를 활용하면 되요. 


중요!!!

태그는 편집자가 CSS에서 어떤 스타일이든 적용할 수 있습니다. 예를 들어 이탤릭 태그인 <i>에 font-style : normal;을 적용하면 기울임이 사라져요. 


하지만 태그 고유의 속성은 그대로 살려두는게 좋습니다. <sub>를 아래첨자 대신 본문글씨 아래쪽에 배치된 작은 글씨체로 사용해도 되지만 본문 위쪽에 배치된 작은 글씨로 사용하는건 피해야 한다는 소리예요. 본문글씨 위쪽에 배치하려면 <sup> 태그가 있습니다. <sub> 태그에 스타일을 적용하면 윗첨자로 사용할 수 있다고 해서 윗첨자로 사용을 하면 '누가 봐도 쉽게 이해할 수 있는' 코드가 아니거든요.


<b> 태그는 진한 글씨체bold 태그인데 bold 속성을 둔 채로 기울임을 적용하는건 괜찮지만 bold 속성을 없애고 기울임 속성만 남기는건 피해야 되요. 기울임 태그<i>가 있는데 <b> 태그로 진한 글씨체 없이 기울임만 적용하면 오류가 나지는 않지만 다른 편집자가 수정할 때 당황할 수 있습니다.


오류가 나지 않는다는 보장도 없어요. 예를 들어 뷰어에서 EPUB 내부의 CSS를 무시하고 뷰어 스타일을 강제 적용 시킬 경우 태그의 원래 속성이 반영될 수 있어요. 뷰어에서 '사용자 설정'을 사용하면 전자책 자체의 스타일을 무시하기도 합니다. 그럼 이탤릭만 설정한 <b>태그가 진한 글씨로 보이게 되지요. 그래서 태그의 원래 기능은 그대로 살려두는게 좋아요.








설정

트랙백

댓글

  • 2017.06.14 22:14 ADDR 수정/삭제 답글

    비밀댓글입니다

  • 김재홍 2017.06.18 07:26 ADDR 수정/삭제 답글

    오늘도 한 수 배우고 갑니다.
    감사합니다, 선생님.

전자책 제작을 하며 많은 사람들이 하는 실수들

모 출판사의 요청으로 오류가 있는 EPUB을 수정을 했습니다.

유통사에 등록을 하는데 오류가 생긴 콘텐츠 20여종을 봐달라고 하더라고요.

대부분 구글 플레이북 등록시 오류가 나는 콘텐츠였고, 일부는 리디북스 같은 국내 유통사에서도 문제가 됐다고 합니다. 


구글은 EPUB2, EPUB3 모두 등록 가능한데 IDPF에서 제공하는 EPUBCheck에 오류(Error, Warning)가 없어야합니다. 오류가 하나라도 있으면 등록이 되지 않습니다. 반면 국내 유통사는 오류가 나도 뷰어에서 보는데 문제가 없다면 받아주기 때문에 EPUBCheck에서 오류가 있어도 정상등록되는 파일이 많습니다. 그래서 국내 유통사에 정상 등록 됐는데 구글에 등록하면서 오류가 발생한 파일들이 대부분 수정 대상이었습니다.


구글과 국내 유통사의 정책 중 어느게 옳다고 단정지을 수는 없어요. 까다롭게 표준을 지키느냐(구글), 표준에 벗어나더라도 일정 부분은 허용을 하느냐(국내 유통사)의 문제인데 양쪽 모두 수긍할 만한 이유가 있습니다.


구글은 표준에 위배되면 등록 자체를 막습니다. 구글 뷰어에서 아무 이상이 없어도 등록을 할 수 없습니다. 표준을 우선으로 하는 건데, 필요에 의해 표준에서 벗어난 편집을 하면 구글에는 등록할 수 없습니다. 예를 들어 국내 유통사 중 EPUB3 파일을 받아주지 않는 유통사가 많습니다. 그래서 ruby, mark, epub:type 같은 EPUB2에서 허용하지 않는 태그나 속성을 EPUB2에 쓰는 경우가 있습니다. 이렇게 만든 EPUB2 파일은 구글에 등록할 수 없는 것이지요. 국내 뷰어가 EPUB3를 지원하면 문제가 해결된다고 볼 수 있지만, 그리 쉬운 얘기가 아닙니다. 구글도 EPUB3를 제대로 지원하지 않는 반쪽짜리인데 EPUB3 파일을 받아주고 있어요. 복잡한 스크립트, mathML, SVG 등을 포함한 EPUB3 파일을 구글 플레이북 뷰어에서 열면 제대로 구현되지 않는 경우가 많습니다. EPUB3를 제대로 지원하지 못하면서 EPUB3 파일을 받아들이는 것도 EPUB2 표준에서 허용하지 않지만 필요에 의해 뷰어에서 허용하는 것과 별 차이가 없습니다. 

양쪽 모두 필요에 의해 양쪽 모두 필요에 의해 기능을 제한한 EPUB3를 받거나, EPUB2의 기능에 일부 EPUB3를 허용하는 등의 반쪽짜리 뷰어입니다.


얘기가 딴 방향으로 벗어났는데, 구글은 받아주지 않는데 국내 뷰어는 받아준다고 해서 어느쪽이 더 좋다고 말할 수 없다는 거예요.


어째든, 오류가 나는 콘텐츠는 수정을 해야합니다. 

빈번하게 발견되면서 간단히 수정 가능한 오류를 몇가지 알려드릴게요.


1. <br/> <img...>


이 두 태그는 단독으로 사용할 수 없습니다. 반드시 다른 태그 안에 포함이 되야하는 태그예요. 그런데 많은 편집자들이 이 태그를 단독으로 사용합니다. 


<p>본문 내용</p>

<br/>

<p>본문 내용</p>

<img src="sample.jpg" alt="sample" />


위 코드는 문법에 어긋나있습니다. 이 코드가 아무 문제 없다고 생각하는 분들이 생각 외로 많아요. 심지어 HTML 을 공부했다는 분들조차 저게 문제가 아니라고 얘기하는 경우가 있습니다. 뷰어에서 보면 아무 문제 없는 코드예요. 



*** Col: 57: ERROR(RSC-005): Error while parsing file 'element "img" not allowed here; expected element "address", "blockquote", "del", "div", "dl", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "ins", "noscript", "ns:svg", "ol", "p", "pre", "script", "table" or "ul" (with xmlns:ns="http://www.w3.org/2000/svg")'.


*** Col: 6: ERROR(RSC-005): Error while parsing file 'element "br" not allowed here; expected the element end-tag or element "address", "blockquote", "del", "div", "dl", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "ins", "noscript", "ns:svg", "ol", "p", "pre", "script", "table" or "ul" (with xmlns:ns="http://www.w3.org/2000/svg")'.


EPUBCheck로 오류 검사를 하면 이런 오류가 나옵니다.

오류 메시지 내용은 '여기에는 허용되지 않는 태그'라는 것인데, p, h1~h6, blockquote, address, div 등의 태그 사이에만 허용되기 때문이에요. 저 코드는 이렇게 고칠 수 있습니다.



<p>본문 내용</p>

<p><br/></p>

<p>본문 내용</p>

<p><img src="sample.jpg" alt="sample" /></p>

<div><img src="sample.jpg" alt="sample" /></div>


img 태그는 p나 div로 묶어줄 수 있고, br 태그도 div를 사용해도 오류는 나지 않지만 div를 사용해야 하는 이유가 없다면 문단 태그인 p 태그로 묶어주는걸 권합니다.


이 외에도 비슷한 오류가 나는 태그가 있어요. 단독으로 사용할 수 없고 다른 태그 안에 반드시 포함되야 하는 태그입니다.


* 짝이 있는 태그

<li> - 반드시 <ol> 태그 안에 붂여야 함

<tr> <td> - 반드시 <table> 태그 안에 묶여야 함


* 잘못된 코드

<div>

<li>리스트1</li>

<li>리스트2</li>

</div>


* 수정된 코드

<ol>

<li>리스트1</li>

<li>리스트2</li>

</ol>



* 텍스트 편집 태그

<i>, <em>, <strong> 등 - 반드시 p, div, blockquote 등 단독으로 사용 가능한 태그 안에 포함되야 함.


*잘못된 코드

<em>제목1</em>

<p>본문 내용</p>


*수정된 코드

<p><em>제목1</em></p>

<p>본문 내용</p>



2. 필수 메타데이터


국내 유통사 뷰어는 메타데이터를 필수로 요구하지 않습니다. 그래서 EPUB2 표준에서 '필수(must, should)'로 추가하라고 나와있는 메타데이터가 없어도 받아줍니다. 편집자들이 메타데이터를 입력하지 않아서이기도 하고, 책을 등록할 때 서지정보를 별도로 받아서이기도 합니다. 메타데이터만 제대로 입력되어 있어도 책을 등록할 때 책 제목, 저자명, 출간일, ISBN 등의 정보는 자동으로 서지에 입력할 수 있을텐데, 유통사가 요구를 하지 않으니 출판사는 메타정보를 신경쓰지 않고, 유통사도 메타정보에 대해 까다롭게 굴면 출판사에서 귀찮아 하고 서지정보를 별도로 받으니 필요를 느끼지 못해 제대로 관리를 안하는 것 같아요.


필수 메타데이터를 제대로 입력하지 않으면 이런 오류가 나옵니다. 이 정보 없어도 책 보는데 아무 문제 없습니다. 하지만 이 정보는 책의 '판권면' 같은 역할을 합니다. 판권면 관심 갖는 독자가 없어도 판권면을 넣는 것처럼 책 보는데 아무 지장 없어도 메타데이터는 꼭 입력을 해야되요.


*** Col: 14: ERROR(RSC-005): Error while parsing file 'element "metadata" incomplete; missing required elements "dc:language" and "dc:title"'.


메타데이터 오류는 입력을 하지 않아 생기는 문제, 잘못 입력해 생기는 문제 두가지로 나옵니다. Sigil 같은 편집 프로그램은 오류를 막기 위해 언어 설정과 제목을 무조건 추가합니다. 그런데 '설정'에서 한국어(ko)가 아닌 영어(en)로 두는 경우가 있어요. 


전자책 만든 후 테스트를 하려고 iBooks에 넣었는데 책 제목이 [No data]로 보였다면 책 제목을 수정하지 않은거예요.

그리고 일부 뷰어(외국에서 만든)에서 한글이 깨진다면 언어설정 문제일 수 있습니다. 


언어, 책 제목에 추가로 ISBN이 들어가야 합니다. 대부분의 편집 프로그램에서 UUID라는 identifier를 강제로 추가하기 때문에 오류는 나지 않지만, ISBN도 반드시 들어가야 하는 정보입니다.


3. img 태그에 alt는 필수 항목


img 태그는 2가지 속성이 반드시 포함되야 합니다. src는 이미지의 위치를 지정하는 속성이기 때문에 이 속성이 없으면 이미지가 보이지 않습니다. 그래서 이 속성을 빼먹을 일은 없지요. 하지만 alt 속성은 빼먹는 분들이 많더라구요. alt 속성이 없어도 문제는 없지만 표준에 어긋나기 때문에 반드시 포함시켜야 합니다.



*** Col: 79: ERROR(RSC-005): Error while parsing file 'element "img" missing required attribute "alt"'.


alt 속성이 없다면 이런 오류가 납니다. alt의 값은 이미지에 대한 설명입니다. 이 이미지가 어떤 내용을 담고 있는지를 구체적으로 적어야 합니다. alt는 첫째, 이미지에 문제가 생겨 표시되지 않았을 때 alt의 설명이 이미지 위치에 표시돼 이미지가 없더라도 어떤 내용인지 알 수 있게 해주고, 두번째는 장애인 등 이미지를 볼 수 없는 사람이 TTS등을 통해 이미지 내용을 확인할 수 있게 해주는 역할을 합니다. 하지만 열악한 제작비용(?)으로 이미지에 대한 설명을 담기는 힘들지요. 그래서 Sigil은 이미지를 삽입할 때 이미지 파일명을 alt 값으로 추가합니다. 장애인 접근성을 고려한다면 이 값을 이미지가 담고 있는 의미를 풀어 수정해 주는게 좋습니다....만 저도 현실과 타협을 하게 되네요 ㅜ.ㅜ


* 잘못된 코드

<p><img src="../Images/img5.jpg"/></p>


* 수정된 코드

<p><img src="../Images/img5.jpg"/ alt="광화문 사거리에서 경복궁 방향으로 찍은 세종대왕 동상 사진"></p>



4. p 태그 대신 div 태그 사용


이건 엄밀히 말해 오류라고 할 수 없고, 오류로 표시되지도 않습니다. 하지만 문단 태그<p>대신 그룹 태그<div>를 쓰는건 웹 표준에 위배됩니다. Sigil에서 이런 오류를 종종 볼 수 있어요. 아래 이미지처럼 Sigil에서 body 태그 사이에 아무 것도 넣지 않은 상태에서 '책보기' 창에 텍스트를 입력하면 <p>태그 대신 <div>태그로 내용이 들어갑니다.



1. body 태그 사이를 공백으로 둔다.


2. 책보기 화면에서 내용을 입력한다.


3. 코드보기 화면을 보면 p태그 대신 div 태그로 문단이 추가된 것을 볼 수 있다.


이런 책이 생각보다 많습니다. 텍스트 중심의 로맨스, 판타지, 무협 같은 편집이 간단한 책에서 이런 오류를 자주 보게 됩니다. 텍스트 원고를 복사 > 붙여넣기하고 코드를 확인하지 않고 저장해서 이런 문제가 생긴다고 짐작이 되요. 이게 왜 문제가 되냐고 되묻는 분들도 계시더라구요. 뷰어에서 아무 문제 없이 보이고 EPUBCheck로도 오류가 없습니다. 독자들이 책을 보는데 아무 지장이 없습니다. 그러면 문제 없는거 아니냐... 하면 할 말은 없는데, HTML의 규칙이 그렇습니다. 문단 태그는 <p> <div>태그는 그룹이나. 특정 영역을 분할(division)할 때 사용하도록 되어 있습니다. 

Sigil에서 복사 > 붙여넣기로 작업을 하는 분들은 p태그 대신 div태그가 사용되지 않았는지 꼭 확인을 해보세요.


5. <p>본문 <p>본문 </p>본문 </p>

모 유통사 뷰어에서 주석을 처리하는데 p태그 안에 다시 p태그를 쓰는 변형된 규칙을 사용하도록 했습니다. 개발자가 HTML을 모르지는 않았을 테고, IDPF에서 제안하는 <aside epub:type="footnote">를 쓰자니 EPUB2에서는 오류가 나서 그러지 않았을까 하는 생각이 들더라구요. 


똑같이 표준을 위반하지만 허용 가능한게 있고 허용하면 안되는게 있습니다. 


예를 들어 EPUB2에서 ruby 태그를 썼다면 이건 EPUBCheck에서 오류가 나도 이해할 수 있습니다. 웹 표준은 지켰지만 EPUB2에서 허용하지 않기 때문에 발생한 오류, 그리고 ruby가 아니면 표현할 수 없는 편집의 충돌이니까요. 


EPUB2는 네트워크에 연결되지 않은 흑백 화면에서 텍스트 콘텐츠를 보는데 아무 문제 없도록 표준을 만들었기 때문에 항상 네트워크에 연결된 스마트폰에서 볼 수 있는 콘텐츠를 만드는데 제약이 아주 심합니다. 그래서 저도 상위 표준을 지키면서 일부 EPUB2의 표준을 어길 때가 있어요. ruby 태그나 주석 처리를 위한 epub:type 속성이 그렇습니다. 


EPUB2의 제한으로 생긴 오류는 EPUB3에서는 허용하기 때문에 파일 형식만 EPUB3로 바꾸면 아무 문제가 생기지 않아요. 


하지만 <p>태그 안에 다시 <p>태그를 쓰는건 웹 표준 자체를 위반합니다. p태그 안에 p태그를 쓰면 EPUB2 뿐 아니라 EPUB3에서도 오류가 발생해요. 그래서 이런 위반은 반드시 피해야 합니다. 


*** Col: 7: ERROR(RSC-005): Error while parsing file 'element "p" not allowed here; expected the element end-tag, text or element "a", "abbr", "acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" or "var" (with xmlns:ns="http://www.w3.org/2000/svg")'.


* 잘못된 코드

<p>본문 내용<p>본문 내용</p>본문 내용</p>

<p>본문 내용<div>본문 내용</div>본문 내용</p>


p태그 안에 P태그를 사용하면 이런 오류가 발생해요. 위에 예로 들었던 주석 처리가 아니더라도 이런 오류가 있는 콘텐츠가 종종 보입니다. <p>태그 얘기를 했는데 div태그 역시 p태그 안에 들어갈 수 없습니다. div 안에 p가 들어갈 수 있어도 p 안에 div는 들어갈 수 없습니다. 업데이트 된 Sigil에서는 이런 오류 자체를 허용하지 않기 때문에 문제가 생기진 않겠지만 혹시라도 이런 코드를 썼다면 꼭 수정을 해주세요.



편집하면서 종종 봤던 오류를 몇개 정리해 봤습니다. 

전자책 편집하면서 오류가 생겼는데 해결이 안되신다면 오류 메시지와 함께 코드를 알려주세요. 오류 원인과 해결 방법을 알려드릴게요 ^^




설정

트랙백

댓글

  • 2017.05.18 11:44 ADDR 수정/삭제 답글

    비밀댓글입니다

    • 전자책 제작과 편집에 관한 모든 정보 내.맘.대.로 2017.05.24 11:34 신고 수정/삭제

      셋 다 opf 파일의 메타데이터에서 발생한 오류예요.
      인디자인에서 EPUB으로 변환할 때 opf파일을 자동으로 생성하는데 시길에서 불러오며 문제가 생긴 것 같네요.

      메타데이터 문제일 가능성이 높습니다.
      Sigil에서 [도구 > 메타데이터 편집기] 들어간 후 메타데이터를 전부 삭제하고, 다시 추가해보세요. 메타데이터 삭제한 후 [제목], [언어], [identifier] 3개는 꼭 새로 추가해야합니다.

      이렇게 해도 해결 안되면 opf파일 내용을 복사해서 보내주세요.내용을 봐야 정확한 이유를 알 수 있습니다.