posted by 내.맘.대.로 2014. 2. 14. 09:20

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

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

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

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

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

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

<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여가지의 속성을 사용할 수 있고, 이미지로 자신만의 목록을 만들 수 있다.


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

반응형
posted by 내.맘.대.로 2014. 2. 14. 08:57

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

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

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

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

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

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

<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 여기를 참고하세에요.

반응형
posted by 내.맘.대.로 2014. 2. 14. 08:47

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

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

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

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

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

[목록]에 사용하는 태그 

<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

반응형
posted by 내.맘.대.로 2014. 2. 14. 08:12

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

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

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

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

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

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

<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 태그에 사용


반응형
posted by 내.맘.대.로 2014. 2. 14. 08:09

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

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

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

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

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

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

<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



반응형
posted by 내.맘.대.로 2013. 12. 3. 19:07

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

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

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

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

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

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

이미지 테두리 두께


반응형