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