내맘대로의 EPUB 제작 가이드

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

<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> 태그 문법◈

a_tag_sample.html

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

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

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

img_style_sample.html

□ 사용 가능한 속성

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

^윗첨자

_아랫첨자

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

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

◈ <sup> <sub> 태그 문법◈

sup_sub_style_sample.html

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

<del>지우기</del>

<ins>추가</ins>

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

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

◈ <del> <ins> 태그 문법◈

del_ins_style_sample.html

□ 사용 가능한 속성

강조할 때 사용하는 태그

<strong>진하게</strong>

<em>기울임</em>

<u>밑줄</u>

강조 태그는 텍스트를 꾸밀 때 주로 사용한다. <strong>태그는 <b>태그와 함께 글자를 진하게(bold) 표현할 때 사용하고, <em>과 <i>태그를 적용하면 기울임 글꼴이 된다. <u>는 글자에 밑줄을 그어주는데 편집 태그인 <ins>와 유사하지만 쓰임은 다르다. 

이 태그에 CSS를 적용하면 <p> 태그에 스타일 클래스를 쓰는 것보다 간결하게 책을 편집할 수 있다. CSS 클래스로 텍스트를 강조하려면 <p class="txet_bold">강조내용</p> 혹은 <span class="text_bold">강조내용</span>처럼 표현해야 하지만 <strong> 태그에 원하는 스타일을 지정해서 사용하면 <strong>강조내용</strong>으로 간단하게 표현할 수 있을 뿐 아니라 다른 편집자가 CSS나 HTML 내용을 보더라도 편집 의도를 정확히 파악할 수 있어 사후관리에도 좋다.

여기서 <b>태그는 <strong>태그와, <i>태그는 <em>태그와 쓰임이 유사해서 설명을 생략하기로 한다. 

◈ <strong> <em> <u> 태그 문법◈

strong_em_u_tag_style_sample.html

인용에 사용하는 태그 : <cite> </cite>

<cite></cite> 태그는 문단 내에 영화나 책의 제목이나, 인용, 주석이 필요할 때 사용한다. <blockquote>가 독립된 문단으로 인용할 때 주로 사용한다면 <cite>는 단독으로 쓰이는 경우는 거의 없고 <p>태그 안에서 단어 등을 꾸밀 때 주로 사용한다. <cite> 태그의 기본 스타일은 기울임 글꼴이며 CSS에서 다양한 스타일을 지정할 수 있다.

◈ <span> </span>태그 문법◈

cite_tag_style_sample.html