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

전자책을 편집하다 보면 수많은 스타일을 사용하게 됩니다. 그런데 스타일을 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>태그가 진한 글씨로 보이게 되지요. 그래서 태그의 원래 기능은 그대로 살려두는게 좋아요.








설정

트랙백

댓글

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

모 출판사의 요청으로 오류가 있는 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에서는 이런 오류 자체를 허용하지 않기 때문에 문제가 생기진 않겠지만 혹시라도 이런 코드를 썼다면 꼭 수정을 해주세요.



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

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




설정

트랙백

댓글

[글머리 숫자 목록]에 사용하는 태그 : ol, li

[글머리 숫자 목록]에 사용하는 태그

<ol><li>목록1</li><li>목록2</li></ol>


<ol>태그 그룹은 글머리 숫자가 붙은 목록을 표현할 때 사용한다. <ol>태그 단독으로 사용할 수 없고 목록을 표현하는 태그인 <li>태그와 반드시 함께 사용해야 된다. <ul>태그와는 달리 HTML4와 HTML5에서 type 속성을 지원하며 start 속성도 지원한다. HTML5에서는 오름차순 정렬인 reversed 속성이 새로 추가되었으나 지원하지 않는 브라우저가 많기 때문에 신중히 사용해야 한다. 


◈ <ol><li> 태그 문법

<ol>

   <li>사과</li>

   <li>복숭아</li>

   <li>자두</li>

   <li>살구</li>

</ol>

<hr />

<ol>

   <li type="A">사과</li>

   <li type="A">복숭아</li>

   <li type="A">자두</li>

   <li type="A">살구</li>

</ol>

<hr />

<ol start="10">

   <li type="1">사과</li>

   <li type="1">복숭아</li>

   <li type="1">자두</li>

   <li type="1">살구</li>

</ol>


ol_li_tag_sample.html



□ 사용 가능한 속성

속성

설명

type

1

A

a

I

i

<ol>태그에 사용하면 목록 전체, <li>태그에 사용하면 해당 목록의 타입을 지정할 수 있음.

글머리 숫자를 숫자, 알파벳 대소문자, 로마자로 표현할 수 있음.

reverse

-

<ol reverse>로 사용하며 속성의 값이 없음.

HTML5에서 새로 추가된 속성이며 일부 브라우저(뷰어)에서만 사용 가능함


◆ 기본 제공되는 글머리 이외에 다양한 글머리 표현하기 --> 링크

<li> 태그를 쓰면 목록 앞에 글머리 기호나 숫자가 나온다. HTML의 속성으로는 이 글머리를 없애지 못하고, 글머리 모양도 한정적이다. 이를 해결하기 위해서는 CSS를 사용해야 한다. CSS를 사용하면 HTML에서 제공하는 기본 타입 외에 20여가지의 속성을 사용할 수 있고, 이미지로 자신만의 목록을 만들 수 있다.


자세한 설명은 링크를 참조하세요.

설정

트랙백

댓글

[글머리 기호 목록]에 사용하는 태그 : ul, li

[글머리 기호 목록]에 사용하는 태그 

<ul><li>목록1</li><li>목록2</li></ul>


<ul>태그 그룹은 글머리 기호가 붙은 목록을 표현할 때 사용한다. <ul>태그 단독으로 사용할 수 없고 목록을 표현하는 태그인 <li>태그와 반드시 함께 사용해야 된다. HTML4에서는 type 속성을 지원해서 disc, square, circle 등 3가지 모양의 글머리를 지원하며 <li type="square">로 사용하면 되나  HTML5에서는 compact와 type 속성을 지원하지 않기 때문에 사용가능한 속성은 설명하지 않는다.


◈ <ul>, <li> 태그 문법

<ul>

   <li>사과</li>

   <li>복숭아</li>

   <li>자두</li>

   <li>살구</dd>

</ul>



ul_li_tag_sample.html



◆ 참고 : list-style-type으로 다양한 글머리 표현하기


<li> 태그를 쓰면 목록 앞에 글머리 기호나 숫자가 나온다. HTML의 속성으로는 이 글머리를 없애지 못하고, 글머리 모양도 한정적이다. 이를 해결하기 위해서는 CSS를 사용해야 한다. CSS를 사용하면 HTML에서 제공하는 기본 타입 외에 20여가지의 속성을 사용할 수 있고, 이미지로 자신만의 목록을 만들 수 있다.


▷ 예제 : CSS로 글머리 기호 표현하기

<style>

ul.none_bullet {

list-style-type : none;

}

ul.china {

list-style-type : cjk-ideographic;

}

</style>

...

<p>● CSS로 글머리 없애기</p>

<ul class="none_bullet">

   <li>사과</li>

   <li>복숭아</li>

   <li>자두</li>

   <li>살구</dd>

</ul>

<p>● 한자 숫자로 글머리 표시하기</p>

<ul class="china">

   <li>사과</li>

   <li>복숭아</li>

   <li>자두</li>

   <li>살구</dd>

</ul>


▷ 결과


● CSS로 글머리 없애기

  • 사과
  • 복숭아
  • 자두
  • 살구

● 한자 숫자로 글머리 표시하기

  • 사과
  • 복숭아
  • 자두
  • 살구


표현 가능한 글머리 기호는 http://www.w3schools.com/cssref/pr_list-style-type.asp 여기를 참고하세에요.

설정

트랙백

댓글

[사전형 목록]에 사용하는 태그 : dl, dt, dd

[목록]에 사용하는 태그 

<dl>...</dl>

<dt> ... </dt>

<dd> ... </dd>


<dl>태그 그룹은 사전처럼 용어를 설명할때 사용하는 태그이다. <dl>태그만 독립적으로 사용할 수 없고 용어(definition term)를 표현하는 <dt> 태그와 용어에 대한 설명(definition descriptxion)을 표현하는 <dd>가 한 쌍으로 사용된다. 

사전을 예로 들면 <dt>태그는 사전의 단어에 해당하는 부분이고, <dd>태그는 사전의 뜻풀이에 해당하는 부분이다.  <dd>태그는 <dl>태그보다 한 탭정도 들여쓰기가 된고  글머리 기호나 번호가 붙지 않는다.다.


◈ <dl>, <dt>, <dd> 태그 문법

<dl>

   <dt>dt 태그</dt>

   <dd>dt 태그(Definition Term)는 사전에서 설명이 필요한 단어에 해당한다.</dd>


   <dt>dd 태그</dt>

   <dd>dd 태그(Definition Description)는 사전에서 단어의 설명에 해당한다.</dd>

</dl>


dl_dt_dd_tag_sample.html

설정

트랙백

댓글

[테이블/표]에 사용하는 태그 : table, tr, td

테이블/표에 사용하는 태그 

<table>...</table>

<tr> ... </tr>

<td> ... </td>


<table>태그 그룹은 표를 만들 때 사용한다. <table>태그는 단독으로 사용할 수 없고 <tr>과 <td>태그가 함께 사용한다. 하나의 <table></table>태그 사이에는 반드시 하나 이상의 <tr></tr>태그가 들어가야하며 <tr>태그 안에는 다시 <td></td>태그가 들어가야 한다. 


<tr></tr>은 행을 추가할 때 사용한다. 5행짜리 테이블을 만들기 위해서는 <table></table> 사이에<tr></tr>이 5개 있어야 한다.


<td>는 한 행을 몇개의 칸(열)으로 나눌지 결정한다.  열이 5개인 표를 만들고 싶으면 <tr></tr>안에 <td></td>가 5개 있어야 한다.



위의 예제처럼 2행, 2열, 총 4칸짜리 테이블을 만들기 위해서는 행을 그려주는 <tr>이 2번, 칸을 그려주는 <td>가 <tr>안에 각각 2번씩 4번 나와야 한다. 

테이블은 가로 2칸을 병합하거나 세로 2칸을 병합하는 등 좀 더 복잡한 구조를 가질 수 있다. 



테이블의 속성인 rowsapn과 colspan은  <td>태그에 사용하는 속성으로 행과 열을 병합할 때 쓴다. 행과 열을 병합할 때는 표의 정확한 구조를 파악하지 않으면 표가 제대로 그려지지 않을 수 있으니 주의해야 한다.



◈ <a href="URL"> </a> 태그 문법


<table border="1">

   <tr>

       <td>1행 1열</td>

       <td>1행 2열</td>

       <td>1행 3열</td>

   </tr>

   <tr>

       <td>2행 1열</td>

       <td>2행 2열</td>

       <td>2행 3열</td>

   </tr>

</table>

<p><br /></p>


<p>□ 변형 테이블 </p>


<table border="1">

   <tr>

       <td rowspan="2">2행 병합</td>

       <td>1행 2열</td>

   </tr>

   <tr>

       <td>2행 2열</td>

   </tr>

   <tr>

       <td colspan="2">1열 병합</td>

   </tr>

</table>


<p><br /></p>


<p>□ colspan, rowspan을 잘못 사용할 경우 </p>

<p>colspan, rowspan을 잘못 사용하면 행과 열의 위치가 제대로 배열되지 않고, 칸이 없는 영역이 생길 수도 있다. </p>

  

<table border="1">

   <tr>

       <td rowspan="2">2행 병합</td>

       <td>1행 2열</td>

       <td>1행 3열</td>

   </tr>

   <tr>

       <td>2행 1열</td>

  <td>2행 2열</td>

       <td>2행 3열</td>

   </tr>

   <tr>

       <td colspan="2">1열 병합</td>

       <td>3행 2열</td>

  <td>3행 3열</td>

   </tr>

</table>


table_tag_sample.html




□ 사용 가능한 속성

속성

설명

boder

숫자

표에 테두리를 그려준다. 0은 테두리 없는 표가 그려지고, 1부터 테두리 두께가 정해진다.

rowspan

숫자

세로 행을 숫자만큼 병합. td 태그에 사용

colspan

숫자

가로 열을 숫자만큼 병합. td 태그에 사용


설정

트랙백

댓글

[링크]에 사용하는 태그 : a

다른 문서나 위치에 링크를 걸때 사용하는 태그 

<a href="URL"> 외부 문서로 이동 </a>

<a href="(URL)#ID"> 문서의 특정 위치로 이동 </a>


링크는 다른 페이지로 이동이 필요할 때 사용한다. 책 내에서 이동을 하는 경우를 내부링크, 문서를 벗어나 새로운 문서나 웹사이트로 이동하는 경우를 외부링크라고 한다. ePub2.0에서는 링크를 주로 주석으로 연결하는데 많이 사용하고 있다. ePub 3.0에서는 aside 태그로 주석을 지원하지만, ePub 2.0에서는 주석을 표현하기 어려워 단어 옆에 괄호()로 주석을 넣거나, 주석이 긴 경우 주석 페이지를 따로 만들어 링크로 연결한다. 

외부링크는 책에서 다른 웹페이지로 이동할 때 사용한다. 외부링크를 사용하면 대부분의 뷰어에서 웹브라우저를 실행시켜 링크 주소로 이동을 한다. 일부 뷰어는 웹브라우저를 실행시키지 않고 뷰어 내에서 사이트를 보여주기도 하는데 이는 뷰어에 따라 다를 수 있다. 

내부링크는 책에 있는 특정 위치로 이동을 할 때 사용한다. 같은 문서가 아닌 다른 문서의 특정 위치로도 이동이 가능해서 주석이나 다른 페이지의 특정 내용을 참고해야 할 때 해당 위치로 이동이 가능하다. 

내부 링크로 주석처럼 특정 위치로 이동하기 위해서는 해당 위치를 알 수 있도록 ID를 태그에 포함시켜야 한다. <span id="LINK_TAG"></span>이나 <a id="LINK_TAG"></a>  처럼 본문에 아무 영향을 주지 않는 태그로 특정 위치에 ID를 넣을 수 있고 <p id="LINK_ID">처럼 문단 태그에 추가하는 것도 가능하다. 

하지만 링크를 사용할 때에는 이용하려는 뷰어에서 링크를 지원하는지 확인이 필요하다. 최근에는 링크를 허용하는 경우가 많지만, 태블릿이나 전자책 전용 디바이스처럼 항상 네트워크에 연결되어 있지 않은 디바이스가 많기 때문에 링크를 지원하지 않는 뷰어도 많이 있다. 또 뷰어에 따라 내부링크만 지원하고 외부링크를 지원하지 않는 경우도 있다. 


◈ <a href="URL"> </a> 태그 문법


<p><a href="http://www.idpf.org/epub/20/spec/OPS_2.0.1_draft.htm">

      IDPF의 EPUB2.0 OPS 문서로 이동

</a></p>


<p><a href="http://www.idpf.org/epub/20/spec/OPS_2.0.1_draft.htm#Section2.2.1"> 

      IDPF의 EPUB2.0 OPS 문서의 2.2.1. Required Modules로 이동

</a></p>


a_tag_sample.html



설정

트랙백

댓글

[이미지] 태그 : img

이미지를 넣을 때 사용하는 태그 <img src="image.png" />


<img /> 태그는 문서에 이미지를 삽입할 때 사용한다. <br />이나 <hr />처럼 닫는 태그 없이 단독으로 사용된다. <img> 태그는 반드시 src="url" 속성과 함께 사용해야 하며 이미지를 표현할 수 없을 때 나타나는 대체 설명인 alt 속성을 함께 사용하는 것이 좋다.  alt는 이미지가 없거나 이미지를 표현할 수 없는 뷰어(브라우저)에서 이미지 대신 보여지기 때문에 이미지에 대한 간단한 설명을 넣는 것이 좋다.


◈ <img ... /> 태그 문법

<img alt="Sample Image" src="http://idpf.org/sites/default/files/epub-logo.gif" />

<p>img 태그는 반드시 src 속성과 함께 사용해야 하며 alt 속성도 적용해야 한다.</p> 


img_style_sample.html


□ 사용 가능한 속성

속성

설명

src

url(필수)

반드시 저정되야 하는 속성으로, 삽입할 이미지의 url을 넣는다.

alt

이미지 설명

이미지를 표시할 수 없을 때 이미지를 대신해서 표시되는 설명

hight

px, %

이미지의 세로 길이

width

px, %

이미지의 가로 길이

border

px

이미지 테두리 두께


설정

트랙백

댓글

[첨자] 태그 : sup, sub

첨자를 표현할 때 사용하는 태그

<sup>윗첨자</sup>

<sub>아랫첨자</sub>


책에서 각주나 미주 번호를 넣을 때 윗첨자나 아랫첨자를 사용하는 경우가 있다. 또는 주석 자체를 첨자 형태로 보여주는 경우도 있다. HTML에서는 윗첨자를 표현해 주는 <sup>태그와 아랫첨자를 표현해 주는 <sub>태그를 제공한다. 

<sub>나<sup>는 주석 뿐 아니라 다양한 형태로 사용할 수 있다. E=mc2나 H2O처럼 다양한 표현을 위해 사용할 수 있다.. 


◈ <sup> <sub> 태그 문법

<p>각주<sup>(1)</sup>나 미주<sub>모두 모아서 문서의 맨 끝에다 전부 기재하는 것</sub> 같은 주석은 주로 윗첨자나 아랫첨자를 사용한다.  </p>

<p> (1)각주(脚註, 영어: footnote)는 너무 길어 본문에 기입하기 부적당할 때 사용되며, 대개 기술하는 내용의 출처를 밝히는 데 사용된다.</p>


sup_sub_style_sample.html


'EPUB 편집 가이드 > EPUB을 위한 HTML' 카테고리의 다른 글

[링크]에 사용하는 태그 : a  (3) 2014.02.14
[이미지] 태그 : img  (0) 2013.12.03
[첨자] 태그 : sup, sub  (0) 2013.12.03
[편집] 태그 : del, ins  (0) 2013.12.03
[강조] 태그 : strong(b), em(i), u  (0) 2013.12.03
[인용] 태그 : cite  (0) 2013.11.28

설정

트랙백

댓글

[편집] 태그 : del, ins

편집을 표현할 때 사용하는 태그

<del>지우기</del>

<ins>추가</ins>


책을 교정하다 보면 교정부호로 단어를 삭제하거나 추가할 때가 있다. 완성된 책에서는 삭제나 추가  내용을 보여줄 필요가 없지만 때에 따라서는 삭제/추가됐다는 것을 보여줘야 하는 경우가 있다. 이때 <del>과 <ins> 태그를 사용한다. <del> 태그는 단어 중간에 줄이 그어지고, <ins>태그는 단어 아래에 밑줄이 쳐진다. 

이 두 태그를 반드시 편집용으로 사용할 필요는 없다. 단어 중간에 줄을 그어야 할 필요가 있다면 언제든 <del>태그를 사용해도 된다. 


◈ <del> <ins> 태그 문법

<p>del 태그는 <del>문서의 수정이 필요할 때</del> <ins>수정했지만 수정한 내용을 보여주고 싶을 때</ins> 사용한다. del 태그는 문서의 일부를 삭제했음을 표현하고, ins는 del로 삭제한 내용 대신 새로운 내용을 추가했음을 보여주고 싶을 때 사용할 수 있다.</p>


del_ins_style_sample.html


□ 사용 가능한 속성

속성

설명

cite

url

cite="reason.htm"

왜 삭제 혹은 추가가 되었는지를 설명하는 페이지 링크를 넣을 수 있다. 문서에는 표시되지 않는다.

datetime

YYYY-MM-DDThh:mm:ssTZD

삭제 혹은 추가한 날짜를 넣을 수 있다. 문서에는 표시되지 않는다. 


'EPUB 편집 가이드 > EPUB을 위한 HTML' 카테고리의 다른 글

[이미지] 태그 : img  (0) 2013.12.03
[첨자] 태그 : sup, sub  (0) 2013.12.03
[편집] 태그 : del, ins  (0) 2013.12.03
[강조] 태그 : strong(b), em(i), u  (0) 2013.12.03
[인용] 태그 : cite  (0) 2013.11.28
[인용] 태그 : blockquote  (0) 2013.11.28

설정

트랙백

댓글


티스토리 툴바