내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
#전자책 #CSS #sigil
#전자책_편집을_위한_HTML_CSS 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다.
전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^
편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.
책 편집을 하다 보면 본문에 배경을 넣을 때가 있습니다. CSS 속성 background-color를 이용해 파란색, 노란색, 빨간색으로 배경을 넣을 수 있습니다. 그런데 색이 아닌 이미지를 배경으로 넣어야 할 때도 있습니다. 오늘은 배경이미지를 넣는 방법을 알려드리려고 해요.
배경색은 설명하지 않고, 배경이미지를 설명하는 이유가 있습니다. 배경색이야, 원하는 색을 지정해 주면 끝나는데 배경이미지는 조금 더 복잡한 설정이 들어갈 수 있거든요.
배경을 넣는 가장 기본이 되는 코드입니다. 이렇게 하면 장(챕터) 전체에 배경이미지를 넣어 줄 수 있습니다.
* 사용한 배경 이미지
이 작은 타일 하나로 페이지 전체 배경을 넣을 수 있어요.
<head>
<title></title>
<style>
p {
text-align : justify;
}
body {
background-image: url('../Images/bg_orange03.jpg');
}
</style>
</head>
<body>
<p>책 편집을 하다 보면 본문에 배경을 넣을 때가 있습니다. CSS 속성 background-color를 이용해 파란색, 노란색, 빨간색으로 배경을 넣을 수 있습니다. 그런데 색이 아닌 이미지를 배경으로 넣어야 할 때도 있습니다. 오늘은 배경이미지를 넣는 방법을 알려드리려고 해요.</p>
</body>
배경이미지가 가로*세로 100px인데 전체에 적용이 됩니다. 이건 background-image 속성이 배경이미지를 바둑판식으로 반복하게 되어 있어서예요. 일정한 패턴이 있는 배경이라면 작은 크기의 이미지로 배경 지정이 가능합니다.
body 대신 선택자를 지정해 배경을 넣으면 <div class="bg_image"></div>처럼 클래스로 글상자를 만들 수 있어요. 본문 전체가 아니라 본문의 특정 영역만 배경이미지처리를 해 줄 수 있지요.
body {
background-image: url('../Images/bg_orange03.jpg');
background-repeat: no-repeat;
}
background-repeat 속성을 이용하면 반복을 막거나, 가로/세로를 지정해 반복할 수 있습니다.
background-repeat : no-repeat; /*반복 안함*/
background-repeat : repeat-x; /*가로만 반복*/
background-repeat : repeat-y; /*세로만 반복*/
background-repeat : no-repeat;
background-repeat : repeat-x;
background-repeat : repeat-x;
배경 이미지를 가운데로 놓고싶다면 background-position: center; 속성을 사용하면 됩니다. 이때 no-repeat 속성도 같이 지정을 해줘야되요. 그렇지 않으면 배경이미지가 화면을 가득 채우기 때문에 이미지를 가운데 둔 의미가 없어져요.
body {
background-image : url('../Images/bg_orange03.jpg');
background-repeat : no-repeat;
background-position : center;
}
background-repeat : no-repeat;
background-position : center;
그런데 좀 이상하지요? 아마 정 중앙에 배경이미지가 올거라고 기대하셨을 거예요. 정 중앙에 온게 맞습니다. 그런데 정 중앙의 기준이 뷰어 화면이 아니어서 저렇게 나옵니다. 만약 텍스트가 화면에 가득 차있다면 배경이미지는 정 중앙에 올거예요.
background-position은 아래와 같은 값을 지정할 수 있습니다. 쉬운 영어니 설명 안해도 이해 하실거예요^^
center
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y% (% 대신 px, cm, em, pt 등의 단위 사용 가능)
공백이 있을 때도 배경이미지가 정 중앙에 오게 하려면?
background-attachment : fixed; 속성을 이용할 수 있습니다. 그런데 fixed 값을 사용하려면 주의해야되요. 페이지 넘김 방식이 아닌 스크롤 방식의 뷰어에서는 스크롤을 해도 배경이미지가 화면 가운데 고정됩니다. 텍스트는 스크롤이 되지만 배경은 멈춰있는거예요.
그리고 뷰어에 따라 다른 결과가 나타날 수 있으니 주의하세요.
body {
background-image: url('../Images/bg_orange03.jpg');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
배경이미지 크기를 조절할 수도 있습니다.
background-size: 200px 200px;를 적용하면 배경이미지 크기가 100px짜리여도 뷰어에서는 200px로 보입니다.
body {
background-image: url('../Images/bg_orange03.jpg');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: 200px 200px;
}
그럼 지금까지 설명한 내용으로 마지막 실습을 해볼게요.
아래 이미지를 배경으로 글상자를 만들어 글을 넣어 보겠습니다. 멋진 시라도 넣으면 좋겠지만 그런 감성은 부족하니 이해하세요 ^^;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p {
text-align : justify;
}
.txt_box {
margin : 1em;
padding-top : 1em;
color : white;
}
.bg_flower {
background-image: url('../Images/003_full.png');
background-repeat: no-repeat;
background-size: 200px 300px;
width : 200px;
height : 300px;
margin : auto;
display : box;
}
</style>
</head>
<body>
<p>책 편집을 하다 보면 본문에 배경을 넣을 때가 있습니다. CSS 속성 background-color를 이용해 파란색, 노란색, 빨간색으로 배경을 넣을 수 있습니다. 그런데 색이 아닌 이미지를 배경으로 넣어야 할 때도 있습니다. 오늘은 배경이미지를 넣는 방법을 알려드리려고 해요.</p>
<div class="bg_flower">
<p class="txt_box">책 편집을 하다 보면 본문에 배경을 넣을 때가 있습니다. CSS 속성 background-color를 이용해 파란색, 노란색, 빨간색으로 배경을 넣을 수 있습니다. 그런데 색이 아닌 이미지를 배경으로 넣어야 할 때도 있습니다. 오늘은 배경이미지를 넣는 방법을 알려드리려고 해요.</p>
</div>
<p>책 편집을 하다 보면 본문에 배경을 넣을 때가 있습니다. CSS 속성 background-color를 이용해 파란색, 노란색, 빨간색으로 배경을 넣을 수 있습니다. 그런데 색이 아닌 이미지를 배경으로 넣어야 할 때도 있습니다. 오늘은 배경이미지를 넣는 방법을 알려드리려고 해요.</p>
</body>
</html>
!! 배경 넣을 때 주의하세요 !!
단순 패턴의 배경이라면 문제가 되지 않지만, 위 예처럼 배경이미지 크기를 고정시킬 경우 뷰어나 화면 크기에 따라 다 글상자 크기가 달라집니다. 글상자 크기를 고정시키지 않으면 화면에 따라 배경이미지가 완전히 보이지 않거나 가로*세로 비율이 틀어질 수 있고요. PC에서 작업해 원하는 결과가 나왔다 해도 스마트폰이나 태블릿, 그리고 유통사 뷰어 별로 편집 결과가 다르게 보일 수 있습니다. 유통사 뷰어 문제도 아니고, 스타일을 잘못 넣어서 그런 것도 아니에요. EPUB이라 그렇습니다. 편집자가 원하는걸 정확히 알지 못하면 배경이미지는 '특히' 원하는 결과를 얻기 어렵습니다.
'Tip&Tech' 카테고리의 다른 글
| [Tip] 폰트 진하게(볼드), 기울임(이탤릭) 처리 (1) | 2016.08.26 |
|---|---|
| [Tip] 구글 무료 폰트를 EPUB에 활용하는 방법 (5) | 2016.08.17 |
| [TIP] 두개의 EPUB을 하나로 묶는 방법 (2) | 2016.07.26 |
| [Tip] EPUB 세로쓰기 편집 (2) | 2016.07.20 |
| [TIP] 본문에 다양한 스타일의 밑줄 긋기 (0) | 2016.07.14 |