내맘대로의 EPUB 제작 가이드

이미지를 넣을 때 사용하는 태그 <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