'EPUB 편집 가이드/EPUB을 위한 HTML'에 해당되는 글 21건

  1. 2013.11.28 [인용] 태그 : blockquote
  2. 2013.10.29 [스타일] 태그 : span
  3. 2013.10.25 [스타일] 태그 : div
  4. 2013.10.24 [줄바꿈] 태그 : br, hr
  5. 2013.10.18 [본문]태그 : p
  6. 2013.10.18 [제목]태그 : h1 ~ h6
posted by 내.맘.대.로 2013. 11. 28. 18:22

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

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

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

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

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

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


<blockquote></blockquote> 태그는 문단 단위의 인용문에 사용한다. 인용문 같은 텍스트 편집은 CSS에서 클래스를 지정해서 사용할 수 있다. 하지만 HTML에서 기본적으로 제공하는 텍스트 편집 태그를 사용하면 태그 정리를 보다 깔끔하게 할 수 있다. 

<blockquote>는 별도의 스타일을 지정하지 않아도 대부분의 브라우저에서 본문 들여쓰기가 적용된다. CSS에서 스타일을 지정하면 다양한 편집 스타일을 적용할 수도 있다.

<blockquote>태그는 HTML과 XHTML에서 사용법이 다르다. HTML에서는 <blockquote> 인용 문구 </blockquote>로 쓸 수 있지만 XHTML에서는 반드시 <blockquote><p>인용 문구 </p></blockquote>처럼 태그 안쪽에 다른 태그를 추가해야 한다. 


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

<p>인용문에는 blockquote 태그를 사용합니다. blockquote 태그를 사용하면 브라우저에서 기본 설정된 스타일이 적용되어 본문과 구분이 됩니다. 대부분의 브라우저에서 들여쓰기가 자동으로 적용됩니다.</p>

   <blockquote>

       <p>문단 단위의 인용문에 사용</p>

       <p>들여쓰기가 자동으로 적용됨</p>

   </blockquote>


인용에는 <blockquote>와 <cite>태그를 주로 사용한다. <blockquote>는 문단 단위의 인용에 <cite>는 문단 내의 단어나 문장 같은 짧은 인용에 주로 사용한다.


blockquote_tag_style_sample.html


□ 사용 가능한 속성

속성

설명

cite

url

cite="http://ko.wikipedia.org"

인용문이 있는 사이트의 출처를 밝힐 필요가 있을 경우 사용한다. 문서에는 아무런 영향을 주지 않아 실제 링크가 걸리지는 않는다. 


반응형

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

[강조] 태그 : strong(b), em(i), u  (0) 2013.12.03
[인용] 태그 : cite  (0) 2013.11.28
[스타일] 태그 : span  (0) 2013.10.29
[스타일] 태그 : div  (0) 2013.10.25
[줄바꿈] 태그 : br, hr  (0) 2013.10.24
posted by 내.맘.대.로 2013. 10. 29. 10:00

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

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

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

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

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

CSS 스타일을 적용해 주는 태그 : <span> </span>


<span></span> 태그는 문단 내에 특정 단어나 문장에 스타일을 변경해야 할 때 사용한다. <span></span>태그 자체는 아무 속성이 없어 단독으로 사용할 경우 문단에 아무런 영향을 주지 않고 <span style="color:red"></span> 처럼 스타일 속성과 함께 사용해야 한다. 

전자책을 편집할 때 가장 많이 사용하는 태그 중 하나로 CSS에서 정의한 속성으로 문서를 꾸밀 때 사용할 수 있다. 또한, 뷰어의 설정이 바뀌더라도 변경이 되면 안되는 스타일이 있을 경우 <span>태그로 인라인 스타일을 적용할 수 있다.


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

<span class="css_class">스타일을 적용할 내용</span>

CSS에 있는 스타일을 적용할 때 class="css_class" 속성을 사용합니다. 


<span style="color:blue; font-size:1.5em;">스타일을 적용할 내용</span>

직접 스타일을 적용해야 할때는 style="속성1:값; 속성2:값; 속성3:값;...속성n:값;"을 사용합니다.

속성과 속성은 세미콜론(;)으로 구분해서 여러개의 속성을 적용할 수 있습니다. 


class 속성은 CSS 스타일을 적용할 때 사용하기 때문에 CSS 스타일만 수정하면 문서 전체의 스타일을 적용할 수 있고 뷰어에서 스타일을 변경할 수 있습니다. 이런 스타일을 외부 스타일이라고 합니다. 반면 style 속성을 사용하면 스타일이 고정되서 뷰어가 스타일을 변경할 수 없고, 스타일을 변경하려면 직접 html의 스타일을 변경해야 합니다. 이런 스타일을 내부 스타일이라고 합니다. 외부 스타일은 문서 전체에 공통적으로 적용되는 스타일을, 내부 스타일은 스타일 자체가 내용과 연결된 스타일을 적용할 때 사용하면 좋습니다. 


<p>동일한 문단 내에서도 여러가지 스타일을 적용할 수 있다. <span style="color:blue">주석</span> 표시나, <span style="font-size:1.5em">강조</span>를 할 때, 혹은 <span style="color:red">'빨강'</span>처럼 내용 자체가 스타일이 필요한 경우가 있다. 이럴 때 &lt;span&gt;태그를 사용하여 스타일을 적용할 수 있다.

<p>


span_tag_sample.html


□ 사용 가능한 속성

속성

설명

class

class ID

CSS에서 설정한 클래스로 스타일을 적용할 수 있음

<span class="classID"></span>

style

스타일 값

다양한 스타일을 적용할 수 있으며 세미콜론(;)으로 구분하여 여러개의 스타일 적용 가능

<span style="color:red; font-size:15em"></span>


◈편집에 적용한 예◈

<html>

<head>

<title>Title of the document</title>

<style>

h1 {text-align:center;}

.text_italic {font-style:italic;}

</style>

</head>


<body>

<h1>HTML의 <span style="color:red;">R</span><span style="color:green;">G</span><span style="color:blue;">B</span> 색상에 대해</h1>


<p>컴퓨터는 사람처럼 색을 눈으로 보는게 아니고 숫자로 인식합니다. <span class="text_italic">그래서 HTML을 작성할 때 색을 지정해야 할 필요가 있을 경우 RGB 코드를 이용합니다.</span> HTML에서 사용 가능한 색은 약 1600만가지 입니다. 색의 채도, 명도에 따라 빨간색 255개, 초록색 255개, 파란색 255개로 구분이 가능하며 이 3가지 색을 조합할 수 있습니다.</p>


<p><span class="text_italic">색은 0부터 255까지의 수를 16진수로 표시합니다.</span> 그래서 <span style="color:#ff0000;">빨간색은 #0000ff</span>, <span style="color:#00ff00;">초록색은 #00ff00</span>, <span style="color:#0000ff;">파란색은 #0000ff</span>이 됩니다. 흰색은 #ffffff, 검정색은 #000000입니다. 이렇게 해서 오랜지색을 표현하고 싶다면 <span style="color:#ff4500;">#ff4500</span>이라고 표시할 수 있습니다. 이중 많이 쓰이는 색은 이름이 있습니다. 빨간색은 #ff0000 대신 red로, 파란색은 #0000ff 대신 blue로 쓸 수 있습니다. <span style="color:orange;">orange(#ffa500)</span>, <span style="color:brown;">brown(#a52a2a)</span>, <span style="color:grey;">grey(#808080)</span> 등 이름이 있는 색상들은 그 이름을 직접 사용할 수 있습니다. </p>

</body>


</html>


span_tag_style_sample.html



반응형

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

[인용] 태그 : cite  (0) 2013.11.28
[인용] 태그 : blockquote  (0) 2013.11.28
[스타일] 태그 : div  (0) 2013.10.25
[줄바꿈] 태그 : br, hr  (0) 2013.10.24
[본문]태그 : p  (0) 2013.10.18
posted by 내.맘.대.로 2013. 10. 25. 18:15

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

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

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

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

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

레이어, 그룹 태그 : <div> </div>


<div></div> 태그는 블럭을 지정해서 스타일을 적용하거나 레이어를 만들 때 사용한다. 

여러개의 문단에 동일한 스타일을 지정할 필요가 있을 때 각각의 문단에 스타일을 적용할 수도 있지만 여러개의 문단을 <div>태그로 묶어 한번에 스타일을 적용할 수 있다. 또한 테두리 여백과 색 등의 스타일을 지정하여 레이어를 만들 수도 있다. 아래 예제 박스가 <div>태그의 사용 예라고 할 수 있다.


일부 편집자들은 <div>태그를 문단 태그인 <p>태그를 대신해서 사용하기도 한다. 이는 아주 잘못된 습관이다. <div> 태그는 <p>태그나 <hx> 태그 등 텍스트에 사용되는 태그 없이 텍스트를 <div>태그를 묶어도 뷰어에서 택스트가 문제 없이 나타날 수 있다. 그리고 동일한 CSS스타일을 지정하면 <div>와 <p> 태그가 똑같이 표현될 수도 있다. 하지만 아무런 태그를 사용하지 않고 <br/>로 줄바꿈만 해도 아무 문제 없이 뷰어에 내용이 나타난다. 


<div>태그는 <p>태그보다 쓰임이 더 다양하다. <div>에는 위치를 지정하는 스타일이을 적용할 수 있다. 흔히 '레이어'라고 부르는,  화면의 어느 위치에든 배치할 수 있는 사각형 박스를 만들수 있는 것이다. 이런 특징 때문에 <div>태그를 이용하면 보다 다양한 편집을 할 수 있게 된다. 이미지 위에 텍스트를 올린다던가, 텍스트가 서로 겹치는 편집. EPUB3.0에서는 텍스트나 이미지를 터치해서 다른 위치로 이동시키는 등의 작업을 <div>태그로 처리할 수 있다. 아무런 스타일을 적용하지 않은 <div>와 <p>태그는 다른 점이 없어 보이지만, 뷰어는 <div>를 처리하기 위해 <p>보다 더 다양한 정보를 분석하기 때문에 목적에 맞게 사용해야 편집자가 원하는 표현을 보다 정확히 끌어낼 수 있다.



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

<div style="속성1:값; 속성2:값;...속성n:값>

   <p>문단 내용 </p>

   <p>문단 내용 </p>

             ...

   <p>문단 내용 </p>

</div>

여러 문단에 동일한 스타일을 적용할 경우 스타일을 적용해야 하는 문단이나 내용을 <div>와 </div>로 묶어줍니다. 


<div style="border: 1px dashed rgb(121, 165, 228); background-color: rgb(219, 232, 251); padding: 10px;">

   <p>문단 내용</p>

</div>

<div>는 스타일만 적용할 수 있는게 아니고 테두리, 테두리 선, 테두리 채우기 등 레이어를 만들어 레이어 안에 다양한 효과를 줄 수 있습니다. 글자와 이미지를 겹치는 편집 등을 <div>로 처리할 수 있습니다. 

<p style="text-align:center">div 태그는</p>

<p style="text-align:center">여러 문단에 같은 스타일을 적용할때 사용한다.</p>

<div style="text-align:center">

   <p>스타일을 한번만 지정하면 되기 때문에</p>

   <p>스타일을 수정할 때도 편하고</p>

   <p>코드도 깔끔하게 정리할 수 있다.</p>

</div>


<div style="border: 1px dashed rgb(121, 165, 228); background-color: rgb(219, 232, 251); padding: 10px;">

   <p>레이어를 만들어 스타일을 지정할 수도 있다. 테두리, 배경색 등을 지정해 메모나 글상자 등 본문과 구분하기 위한 내용을 정리할 때 유용하다.</p>

</div>


div_tag_sample.html



◈ 편집에 적용한 예 ◈

<html>


<head>

<style>

div.example

{

text-align:center;

width:98%;

background-color:#DCECB5;

margin:0px;

padding:5px;

border:1px solid #d4d4d4;

}



div.p1

{

text-align:center;

width:98%;

background-color:#DCECB5;

margin:0px;

padding:5px;

border:1px solid #d4d4d4;

position:absolute;

top:300px;left:100px;

}


div.p2

{

text-align:center;

width:98%;

background-color:#ffECB5;

margin:0px;

padding:5px;

border:1px solid #d4d4d4;

position:absolute;

top:230px;left:60px;

}



</style>



</head>


<body>


<p style="text-align:center">div 태그는</p>

<p style="text-align:center">여러 문단에 같은 스타일을 적용할때 사용한다.</p>


<div class="example">

   <p>div 태그로 묶지 않을 경우 모든 문단에 스타일을 적용해야 한다. </p>

   <p>하지만 문단의 스타일이 동일하면 div 태그로 묶어 스타일을 한번에 지정할 수 있다.</p>

   <p>뿐만 아니라 배경색, 테두리 등을 지정해 본문과 구분해야 하는 내용을 정리하는데도 좋다.</p>

</div>


<div class="p1">

   <p>div 태그는 화면의 임의의 위치를 지정할 수도 있다. 그리고 위치를 겹치게 만들 수도 있다. 이 기능을 스크립트와 함께 


적용을 하면 인터렉티브한 콘텐츠 제작도 가능하다. 박스를 선택해서 이동하거나 움직이는 애니메이션 효과를 낼 수도 있게 된


다.</p>

</div>


<div class="p2">

   <p>그리고 div로 만든 박스 영역은 서로 겹칠 수도 있다. 이런 기능을 이용하면 이미지 위에 택스트를 올리거나 텍스트가 겹


치게 만드는 등 다양한 편집 효과를 낼 수 있다.</p>

</div>


</body>

</html>


div_tag_style_sample.html




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

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



반응형

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

[인용] 태그 : blockquote  (0) 2013.11.28
[스타일] 태그 : span  (0) 2013.10.29
[줄바꿈] 태그 : br, hr  (0) 2013.10.24
[본문]태그 : p  (0) 2013.10.18
[제목]태그 : h1 ~ h6  (0) 2013.10.18
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 파일을 다운로드 해서 웹브라우저로 열어도 태그가 적용된 내용을 확인할 수 있습니다. 

반응형