2013.03.28 13:43

전자책제작 EPUB실습_다양한 박스 만들기



sigil 로 전자책제작을 하면서 10년 전에 배웠던 html을 다시 공부를 하게 됩니다. 바로 위의 종이책 디자인을 epub 전자책으로 구현하기 위해서이지요. epub 으로도 종이책 디자인과 비슷하게 만들 수가 있습니다. 


한번 만들어 볼까요?

우선 왼쪽에서는 바탕색으로 연한 분홍색이 깔려 있고, 그리고 가운데는 하얀 바탕의 진한 분홍색 테두리의 박스가 있습니다. 

그리고 오른쪽에는 제목부분이 진한 분홍색 박스가 있고, 안에는 하얀 글씨입니다. 

자, epub 으로 변신.



짠~ 이펍으로 제작한 것을 리디북스 뷰어 본 모습입니다.(갤스2) 종이책 디자인과 거의 비슷한 모양이지요? 전자책에서는 쪽번호가 의미가 없기 때문에 쪽번호는 빼버렸습니다. 그리고 박스안의 글씨가 많아지면 스마트폰에서는 아마 박스가 다음페이지로 넘어갔을 것 같습니다. 

아이패드에서 본다면 거의 종이책으로 보는 것과 비슷할 것 같습니다. 스마트폰으로 볼때는 어쩔 수 없이 공간이 작아서 종이책과 똑같은 모습으로 만들기는 어렵습니다.


우선 스타일 시트에 아래 내용을 만들고, 그 다음 body에 박스를 만들어주면 됩니다~

.content1{

padding:10px;

border:5px solid deeppink;

margin-bottom: 30%;

margin-left: 10%;

margin-right: 10%;

margin-top: 30%;

background: white;

}


.content2{


padding:10px;

background: mistyrose;

line-height: 1.5em;

}


.txtp {

color : deeppink;

font-size: 1.2em;

font-style: normal;

font-weight: bold;

line-height: 1.5em;

margin-bottom: 0;

margin-left: 0;

margin-right: 0;

margin-top: 0;

padding-bottom: 0;

padding-left: 0;

padding-right: 0;

padding-top: 0;

text-align: justify;

text-indent: 0em;

}

<body>

<div class="content2">

<div class="content1">

<p class="txtp">인사고과 - 3개월 전</p>


<p class="txt"><br /></p>


<p class="txt"><br /></p>


<p class="txt">팀장 의견서</p>


<p class="txt">마케팅부 사원 장미주</p>


<p class="txt"><br /></p>


<p class="txt">* * *</p>


<p class="txt"><br /></p>


<p class="txt">기획팀 팀장 의견: 생각이 너무 앞서는 경우가 많음</p>


<p class="txt"><br /></p>


<p class="txt"><br /></p>

</div>

</div>

</body>





요건 진한 분홍 박스에 하얀글씨를 만들어주면 됩니다.


.content3{


padding:10px;

background: deeppink;

line-height: 1.5em;

margin-bottom: 0;

margin-left: 5%;

margin-right: 5%;

margin-top: 10%;

}

.txtw {

color : white;

font-size: 1em;

font-style: normal;

font-weight: normal;

line-height: 1.5em;

margin-bottom: 0;

margin-left: 0;

margin-right: 0;

margin-top: 0;

padding-bottom: 0;

padding-left: 0;

padding-right: 0;

padding-top: 0;

text-align: justify;

text-indent: 0em;

}

.txtw2 {

color : white;

font-size: 1.2em;

font-style: normal;

font-weight: bold;

line-height: 1.5em;

margin-bottom: 0;

margin-left: 0;

margin-right: 0;

margin-top: 0;

padding-bottom: 0;

padding-left: 0;

padding-right: 0;

padding-top: 0;

text-align: justify;

text-indent: 0em;

}


<div class="content3">

<p class="txtw">03</p>


<p class="txtw2" style="text-align: right;">약속</p>

</div>


<p class="txt"><br /></p>


<p class="txt"><br /></p>


<p class="txt"><br /></p>


<p class="txt"><br /></p>


<p class="txt"><br /></p>


<p class="txt"><br /></p>


<p class="txt"><br /></p>


<p class="txt"></p>


<p class="txt">“흠. 진짜 곧 뽑네? 어디 보자. 경력증명서에 추천서에 학습계획서? 뭐가 이렇게 많아? 그럼 추천서는 학교 교수님한테 받아야 되는 건가?”</p>


<p class="txt">미주가 모니터를 보며 중얼거렸다.</p>


<p class="txt">친구들과 얘기를 하다 우연히 대학원이라는 말이 나왔지만 생각해보니 정말 괜찮은 것 같았다. 어차피 지금 가지고 있는 1년 남짓한 중소기업의 경력으로 미주가 꿈꾸는 큰 회사에 가는 것은 불가능해 보였고, 그렇다면 좀 더 학력을 높여서 다시 도전해보는 것도 괜찮아 보였다. 미주는 이 학교 저 학교 사이트에 들어가 내용을 살펴본 후 지원할 몇 개 학교를 선택했다.</p>


<p class="txt">‘추천서는 누구한테 받지? 흠. 어떤 교수님이 좋을까?’</p>



하지만,

이렇게 하나하나 다만들기는 너무 시간이 많이 걸린다는 단점이...

그리고 스마트폰에서는 고생해서 만든 전자책이 스크린의 크기가 작다는 제약 때문에 제대로 표현이 안된다는 치명적인 단점이 있습니다. ㅠㅠ


굉장히 간단한 소스이지만

누군가에게는 도움이 될수도 있으니~


Trackback 0 Comment 0