posted by 내.맘.대.로 2013. 10. 24. 08:22

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

문단 내 줄바꿈 태그 : <br />

밑줄 태그 : <hr />


문단과 문단은 <p></p> 태그로 구분이 된다. <p> 태그로 묶인 내용은 하나의 문단을 이루며 문단끼리는 줄바꿈이 된다. 워드에서 엔터를 쳐서 다음 줄로 내려가는 것과 동일하다. 문서 작성 중에 엔터를 치면 앞 문단과 '문단간격'이 벌어지고 들여쓰기가 되면서 새로운 문단이 시작된다. 그런데 문단 내에서도 줄바꿈이 필요할 때가 있다. 워드에서는 Shift+Enter를 쳐서 줄을 바꾼다. 문단 내에서 줄을 바꾸게 되면 문단 간격이 아닌 '줄간격' 만큼 간격이 벌어지고 들여쓰기가 적용되지 않는다. 


HTML에서 이런 역할을 하는 태그가 <br />태그다. <br />은 문단 내에서 줄을 바꿀 필요가 있을 때 사용한다. HTML은 엔터키로 줄을 많이 내리더라도 모두 무시하기 때문에  문단 내에서 줄을 바꿀 필요가 있을 때에는 <br />태그를 사용한다.


<hr />은 위쪽과 아래쪽을 구분할 때 사용한다. 문단과 문단 사이, 혹은 문단 내에서 가로로 줄을 그어 위쪽과 아래쪽을 구분할 수 있다. 


<br /> 태그와 <hr />태그는 닫는 태그 없이 단독으로 사용한다. HTML에서는 <br>, <hr>처럼 슬래시(/) 없이 사용할 수 있고 XHTML에서는 <br />처럼 여는 태그이면서 동시에 닫는 태그임을 표시해주는 슬래시(/)를 넣어야 한다. EPUB은 XHTML을 기반으로 하기 때문에 <br />처럼 닫아주는 것이 좋다.


◈ <br /> <hr /> 태그 문법 ◈

<p> &lt;br /&gt;태그는 <br> 줄을 바꿀 때 사용합니다.</p>

<p>

&lt;br /&gt;태그 없이 

엔터로 줄을 바꾸면

HTML은 

줄바꿈을 

무시합니다.



<p>&lt;hr /&gt;태그를 사용하면 아래처럼 가로 줄이 생겨 위쪽 내용과 아래쪽 내용을 구분할 수 있습니다.</p>

<hr />

<p>&lt;hr /&gt;태그는 문단과 문단 사이에 주로 사용합니다.</p>


br_hr_tag_sample.html


◈ 편집에 적용한 예 ◈

<p>문단과 문단을&lt;p&gt; &lt;/p&gt; 태그로 묶으면 자동으로 줄바꿈을 합니다. 하지만 동일한 문단 내에서 줄바꿈이 필요할 경우가 있습니다. <br>같은 문단이지만 줄을 바꿔야 할 때 &lt;br /&gt; 태그를 사용합니다.</p>

<hr />

<p>&lt;hr /&gt; 태그는 위쪽 내용과 아래쪽 내용을 구분하고 싶을 때 사용합니다. 본문 내에 가로줄을 그어 내용을 구분하거나 꾸밀 필요가 있을 때 유용합니다</p>


br_hr_tag_style_sample.html


* 문법과 예는 복사해서 html 파일에 붙이면 결과를 확인할 수 있습니다.

* 첨부된 *sample.html 파일을 다운로드 해서 웹브라우저로 열어도 태그가 적용된 내용을 확인할 수 있습니다. 

반응형

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

[스타일] 태그 : span  (0) 2013.10.29
[스타일] 태그 : div  (0) 2013.10.25
[본문]태그 : p  (0) 2013.10.18
[제목]태그 : h1 ~ h6  (0) 2013.10.18
1.1.3 EPUB에서 사용되는 HTML 태그  (0) 2013.10.18

댓글을 달아 주세요

posted by 내.맘.대.로 2013. 10. 18. 18:56

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

본문 태그 : <p>  </p>

문단 태그는 주로 본문의 내용을 작성할 때 사용합니다. EPUB에서는 책의 한 문단을 <p> </p> 태그로 묶어 줄 수 있다. <p></p> 태그는 가장 기본이 되는 태그로 CSS 스타일을 적용하면 다양한 형태의 편집이 가능하다. 


일부 EPUB 편집자는 문단을 <div></div>태그로 구분을 하는데 <div></div>태그는 여러 문단을 묶어 스타일을 적용하거나 레이어를 만들때 사용하는 태그이기 때문에 뷰어에서 심각한 오류가 발생할 수 있다. 문단을 구분하는 태그는 반드시 <p></p>를 사용하고 <div></div>는 사용을 하면 안된다.


<p></p>태그에 스타일을 붙여 제목, 주석 등을 표현하는 것도 가급적 피하는게 좋다. <p></p>태그를 꾸미는 CSS가 무한정으로 늘어나고, 다른 사람이 수정을 할 때 CSS만 보고 용도를 알 수 없는 경우가 많아 제목이나 주석 등 특정 목적의 내용은 <p></p>태그보다는 해당 목적의 태그를 사용하는 것이 좋다. 


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


 <p>문단을 표현하는 태그입니다.</p>

<p>문단과 문단 사이는 뷰어(브라우저)의 설정에 따라 지정된 문단 간격이 있으며 CSS로 간격을 조절할 수 있습니다.</p>


p_tag_sample.html



◈ 편집에 적용한 예 

 <p>문단 태그는 주로 본문의 내용을 작성할 때 사용합니다. ePUB에서는 책의 한 문단을 &lt;p&gt; &lt;/p&gt; 태그로 묶어 줄 수 있다. &lt;p&gt;&lt;/p&gt; 태그는 가장 기본이 되는 태그로 CSS 스타일을 적용하면 다양한 형태의 편집이 가능하다.</p>

<p>일부 ePUB 편집자는 문단을 &lt;div&gt;&lt;/div&gt;태그로 구분을 하는데 &lt;div&gt;&lt;/div&gt;태그는 레이어를 지정할 때 사용하는 태그이기 때문에 뷰어에서 심각한 오류가 발생할 수 있다. 문단을 구분하는 태그는 반드시 &lt;p&gt;&lt;/p&gt;를 사용하고 &lt;div&gt;&lt;/div&gt;는 사용을 하면 안된다.</p>

<p>많은 ePUB 편집자들이 &lt;p&gt;/&lt;p&gt;태그에 스타일을 붙여 제목, 주석 등을 표현하는데 대부분 CSS가 무한정으로 늘어나고, 다른 사람이 수정을 할 때 CSS만 보고 용도를 알 수 없는 경우가 많아 제목이나 주석 등 특정 목적의 내용은 &lt;p&gt;&lt;/p&gt;태그보다는 해당 목적의 태그를 사용하는 것이 좋다.</p>

* 문법과 예는 복사해서 html 파일에 붙이면 결과를 확인할 수 있습니다.

* 첨부된 *sample.html 파일을 다운로드 해서 웹브라우저로 열어도 태그가 적용된 내용을 확인할 수 있습니다. 

반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2013. 10. 18. 17:38

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

제목 태그 : <h1> ~ <h6>

<hx> 태그는 제목(heading)에 사용하는 태그로 큰 제목<h1> ~ 작은 제목<h6>으로 6단계까지 표현이 가능하다. EPUB에서 <hx> 태그로 제목을 지정하면 목차를 쉽게 구분할 수 있고 제목 CSS 스타일을 깔끔하게 지정할 수 있다.

EPUB 제작시 제목을 반드시 <hx> 태그를 사용해야 하는 것은 아니다. 문단 태그인 <p>태그에 스타일을 지정해서 제목으로 사용할 수도 있다. 어떤 태그를 사용해도 스타일을 동일하게 지정하면 뷰어를 통해 독자에게 보이는 내용은 차이가 없다. 하지만 HTML은 독자에게 보여주기 이전에 전자책 뷰어가 먼저 이해를 해야한다. 전자책 뷰어나 EPUB 제작 툴은 <hx>태그를 제목으로 자동으로 인식해서 목차를 만들어 주지만 <p>태그는 본문으로 인식해서 id 속성 등을 이용해서 제목임을 지정해 줘야 목차로 인식한다.

또 <p> 태그를 사용하면 제목을 지정할 때 매번 스타일을 적용해 줘야 하지만 <hx>태그는 제목 외에는 사용할 일이 없기 때문에 태그에 스타일을 적용할 수 있다. 그래서 문서를 편집하는 시간을 절약할 수 있고 책 전체에 일관된 제목 스타일을 적용할 수 있다. 


◈ <hx> 태그 문법 

<h1>h1은 가장 큰 제목에 사용합니다.</h1>

<h2>h2는 두번째 큰 제목에 사용합니다.</h2>

<h3>h3는 세번째 큰 제목에 사용합니다.</h3>

<h4>h4는 작은 제목에 사용합니다. </h4>

<h5>h5는 h4보다 작은 제목에 사용합니다.</h5>

<h6>h6는 h5보다 작은 제목에 사용합니다.</h6>

h_tag_sample.html


◈ 편집에 적용한 예 

<h1>EPUB을 위한 CSS 레퍼런스</h1>

<h2>1. 태그 설명</h2>

<h3>1.1 h태그란?</h3>

<p>h태그는 문서의 제목을 표현할때 사용합니다. 책제목, 부, 장, 절의 제목 등을현할 수 있으며 h1 ~ h6까지 사용이 가능합니다. 단독으로 사용하면 뷰어(브라우저)의 기본 스타일이 적용되며, CSS와 함께 사용하면 다양한타일을 적용할 수 있습니다. </p>

<h5>□ h태그 기본 문법 </h5>

<p>&lt;h1&gt; 제목 &lt;/h1&gt;</p>

h_tag_style_sample.html


* 문법과 예는 복사해서 html 파일에 붙이면 결과를 확인할 수 있습니다.

* 첨부된 *sample.html 파일을 다운로드 해서 웹브라우저로 열어도 태그가 적용된 내용을 확인할 수 있습니다. 

반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2013. 10. 18. 17:09

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

1.1.3 EPUB에서 사용되는 HTML 태그

IDPF에서는 EPUB 뷰어가 반드시 표현해야 하는 HTML 태그(IDPF OPS Required Module 참조)를  제공하고 있다. 이 태그들은 EPUB으로 책을 편집하는데 필요한 대부분의 기능을 포함하고 있다. 

본 레퍼런스에서는 IDPF에서 권고하는 각각의 HTML 태그가 어떤 기능을 하고 있으며 EPUB 편집에서 어떻게 사용할 수 있는지를 정리하고자 한다.


구분

태그

설명

제목

<h?></h?>

H1 ~ H6 사용 가능

부 장 절 등 제목에 사용

본문

<p> </p>

한 문단을 감싸는 태그

뷰어에 따라 문단 간격이 벌어짐

<br />

<hr/>

같은 문단 내에서 줄바꿈이 필요할 때 사용하는 태그
<hr/>은 줄바꿈 후 가로선 생김

줄간격이 <p>태그보다 작음

닫는 태그 없음

스타일

<div> </div>

주로 여러 문단을 그룹으로 묶어 스타일을 지정하거나 레이어를 만들 때 사용

<span></span>

문단 내 문장 혹은 단어의 스타일을 지정하는데 사용

인용

<blockquote> </blockquote>

<cite></cite>

<blockquote>는 문단 단위의 인용문, <cite>는 문장 인용문에 사용


강조

<strong></strong>

<em></em>

<u></u>

진하게

이탤릭

밑줄

편집

<del></del>

<ins></ins>

삭제된 단어

추가된 단어

첨자

<sub></sub>

<sup></sup>

아랫첨자

첨자

이미지

<img src=“URL” />

이미지를 삽입하는 태그

 <br>태그 처럼 닫는 태그 없음

링크

<a href=“URL”></a>

외부 내부 링크 연결

스타일 지정 안할 경우 브라우저 기본 스타일 적용

(table)

caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr

표를 만들 때 사용

목록

(list)

dl, dt, dd, ol, ul, li

목록 및 글머리 목록을 만들 때 사용

표. EPUB 뷰어가 반드시 표현해야 하는 HTML 태그 .


반응형

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

[줄바꿈] 태그 : br, hr  (0) 2013.10.24
[본문]태그 : p  (0) 2013.10.18
[제목]태그 : h1 ~ h6  (0) 2013.10.18
1.1.2 HTML 태그의 구조 및 기본 문법  (0) 2013.10.18
1.1.1 HTML 문서의 기본 구조  (0) 2013.10.18

댓글을 달아 주세요

posted by 내.맘.대.로 2013. 10. 18. 17:01

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

1.1.2 HTML 태그의 구조 및 기본 문법

HTML은 태그로 텍스트, 이밎, 영상, 음성 등 다양한 정보를 묶어 문서로 표현해 주는 언어다. 쉽게 말하면 한국어, 영어, 일본어 같은 언어라고 생각하면 된다. 한국어, 영어는 사람끼리 대화하는데 필요한 언어지만 HTML은 브라우저와 문서간에, EPUB이라면 EPUB 문서와 전자책 뷰어간에 대화를 하기 위해 필요한 언어라는 차이가 있다. 

EPUB 뷰어는 EPUB 파일을 만나면 EPUB과 약속한 규칙에 따라 EPUB파일 안에 어떤 정보가 담겨있는지를 content.opf나 toc.ncx같은 파일을 통해 전달받고, 책을 보는 독자에게 전달해야 하는 정보가 담긴 HTML 문서를 읽어 뷰어 화면에 뿌려준다. 독자는 EPUB의 복잡한 구조를 알 필요 없이 뷰어에서 보여주는 정보만 보면 된다. EPUB 뷰어는 어떤 정보가 독자에게 보여져야 하는지를 결정하기 위해 '태그'와 대화를 나눈다. '태그'에 따라 EPUB 문서에 있는 정보가 이미지인지, 텍스트인지, 텍스트 중에서도 제목인지, 본문인지, 주석인지를 파악한다. 

그림2. 태그의 구조


태그는 <여는 태그>내용</닫는 태그>로 이루어져 있다. 여는 태그와 닫는 태그 사이에 있는 내용이 EPUB 뷰어에 표시되는 내용이다. 여는 태그가 있으면 닫는 태그(여는 태그와 동일하나 태그 앞에 /가 붙음)가 반드시 존재해야 한다. 단, <br/> 같이 그 자체로 여는 태그이면서 닫는 태그(empty tag)인 경우도 있다.

그리고 여는 태그에는 태그의 내용을 꾸며주는 속성을 지정할 수 있다. 태그 별로 지정할 수 있는 속성이 있지만 최근에는 CSS를 주로 사용하기 때문에 태그별 속성은 사용하지 않는 추세이다. 위의 예에서 사용한 class라는 속성은 CSS를 사용하기 위해서 주로 사용하는 속성이다. 


<여는 태그> 내용 </닫는 태그>
<h1> 제목에 사용하는 태그 </h1>
<p> 본문에 사용하는 태그 </p>
<br /> 줄바꿈 태그 *닫는태그 없음


여는 태그와 닫는 태그 사이에는 콘텐츠의 내용이나 다른 태그를 넣을 수 있다. 태그 사이에 다른 태그를 넣을 때는 열고 닫는 순서가 매우 중요하다. 반드시 여는 태그와 닫는 태그 사이에 다른 태그가 포함 되야 하며 태그가 서로 교차되서는 안된다.


맞는 표현 틀린 표현
<p>
<i>
여는 태그와 닫는 태그 사이에 다른 태그가 들어갈 수 있지만 순서는 반드시 지켜야 합니다.
</i>
</p>
<p>
<i>여는 태그와 닫는 태그 사이에 다른 태그가 들어갈 수 있지만 순서는 반드시 지켜야 합니다.
</p>
</i>


일부 태그는 별도의 속성(어트리뷰트 | 예 : align=”center”)을 지정할 수 있다. 어트리뷰트는 좌우 정렬, 색, 크기 등을 지정하는 속성으로 태그별로 지정할 수 있는 속성이 다르다. 하지만 태그 속성은 기본적인 편집 기능만 제공하며, 편집이 많이 들어갈 경우 문서 양이 늘어날 수 있고, 개별 태그에 속성이 적용되어 편집 수정이 불편하기 때문에 태그의 속성을 이용한 편집은 거의 사용하지 않는다.

 

HTML은 줄바꿈이나 공백이 무시된다. 줄바꿈은 아무리 많이 하더라도 한줄로 표시되며 공백은 한칸만 적용된다. 이런 특징 때문에 HTML문서를 작성할 때 구조화 해서 편집하기 편한 장점이 있지만 줄바꿈이나 공백 삽입 등을 위해서는 별도의 태그나 코드를 사용해야 한다.

그림2. HTML은 공백을 1칸만 표현하고 나머지는 무시한다.


반응형

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

[줄바꿈] 태그 : br, hr  (0) 2013.10.24
[본문]태그 : p  (0) 2013.10.18
[제목]태그 : h1 ~ h6  (0) 2013.10.18
1.1.3 EPUB에서 사용되는 HTML 태그  (0) 2013.10.18
1.1.1 HTML 문서의 기본 구조  (0) 2013.10.18

댓글을 달아 주세요

posted by 내.맘.대.로 2013. 10. 18. 16:44

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

1.1.1 HTML 문서의 기본 구조


ePUB의 본문은 XHTML로 이루어져 있다. HTML이란 HyperText Markup Language의 약자로 주로 웹 문서를 만들때 사용되었다. 초기의 웹에서는 이미자와 텍스트로 이루어진 간단한 문서가 대부분이어서 HTML로도 충분했지만, 웹이 발전하면서 이미지와 텍스트 뿐 아니라 동영상, 소리, 다양한 프로그래밍까지 처리가 가능해 지면서 HTML로는 편집자가 원하는 것을 모두 표현하기 어렵게 됐다. 그래서  XHTML이라는 형태로 발전하게 됐다. 하지만 EPUB을 제작하는데 HTML의 역사나 XHTML과의 차이는 중요하지 않다. 이런 내용에 관심을 갖고 공부를 하면 더 좋긴 하겠지만 HTML과 XHTML을 구분하지 못한다고 EPUB을 제작하는데 아무런 문제가 되지 않는다.

EPUB 파일을 편집기로 열면 최소한 한개 이상의 XHTML파일을 볼 수 있다. XHTML과 HTML에는 약간의 차이가 있으나 EPUB 문서를 만드는 수준에서는 XHTML과 HTML을 구분할 필요가 없기 때문에 이 책에서는 XHTML과 HTML을 구분하지 않고 많은 사람들에게 익숙한 HTML로 통일해서 사용하려고 한다.(단, XHTML과 구분이 필요한 경우에는 XHTML로 표현할 것이다.)


<ePUB을 위한 HTML의 기본 구조>


그림1. HTML의 기본 구조


EPUB은 HTML의 기본 구조를 그대로 따르고 있다. IDPF의 EPUB 표준 문서(OPS 2.0.1 참조)에서는 ①처럼 EPUB 문서가 XHTML을 따르고 있음을 반드시 표시하도록 하고 있다. 이 부분에 대한 설명은 전문적인 내용을 포함하고 있고, 내용을 모르더라도 ①을 그대로 넣으면 되기 때문에 자세한 설명은 생략하도록 하겠다. 


을 넣지 않더라도 대부분의 EPUB뷰어에서는 아무 문제가 없지만 반드시 넣기를 권장한다. 자세한 내용을 알고 싶다면 IDPF의 OPS 문서 Section1.4.1을 참고하기 바란다.


로 묶여있는 <html>...</html>은 문서의 시작과 끝을 나타낸다. 이 부분에 책과 관련된 내용이 모두 들어가게 된다. 


은 책을 보는 사용자에게는 보이지 않지만, 뷰어와 문서 본문에 필요한 내용이 담기는 부분이다. 책 제목, 메타데이터, 스타일시트 같은 내용이 여기에 들어간다.


에서 <title>...</title>은 이 문서의 제목이 들어간다. 뷰어에서 챕터의 제목이 표시되는 영역이 있다면 주로 이 부분에 있는 정보를 가져오게 된다. <link... / >로 묶인 부분은 이 책의 편집 스타일을 모아놓은 외부 스타일을 불러오는 부분이다. <title>...</title>과 <link ... / >는 EPUB의 HTML에서 기본적으로 들어간다. 그 외에도 메타데이터, 내부 스타일, 스크립트 등이 <head>...</head>에 들어간다.


에서 비로소 독자가 볼 수 있는 책의 본문이 들어가게 된다. 그리고 앞으로 정리하게 될 HTML의 기본 문법도 이 영역에 들어가는 태그를 주로 설명할 것이다.  <body>...</body>에는 텍스트를 그대로 입력해도 뷰어에 표시되지만 <p>...</p>나 <div>...</div>같은 태그로 텍스트를 묶고, 태그 단위로 편집을 적용하게 된다. 글자 모양, 크기 색을 변경하고, 이미지를 넣는 등 '전자책 편집'은 모두 이 영역에서 이루어진다.


은 본문의 각 문단이나 구성요소를 표현하는 단위이다. <p>...</p>는 단락을, <h1>...</h1>은 제목을, <img...>는 이미지를 표현하기 위한 태그이며 이런 태그들이 모여 하나의 장이 이루어진다. 


다음 장에서는 EPUB을 편집하기 위해 주로 사용되는 태그를 소개하고 태그의 기본적인 사용법을 설명하겠다.

반응형

댓글을 달아 주세요