posted by 내.맘.대.로 2016. 8. 10. 17:38

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

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

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

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

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

728x90

‪#‎전자책‬ ‪#‎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이라 그렇습니다. 편집자가 원하는걸 정확히 알지 못하면 배경이미지는 '특히' 원하는 결과를 얻기 어렵습니다.





반응형

댓글을 달아 주세요

  1. 익명 2016.08.11 10:46  Addr  Edit/Del  Reply

    비밀댓글입니다

  2. 익명 2016.08.15 11:19  Addr  Edit/Del  Reply

    비밀댓글입니다

    • 내.맘.대.로 2016.08.17 08:55 신고  Addr  Edit/Del

      1. 한 챕터에만 넣고 싶다면 선택자(selector)를 만들고, body 태그에 <body class="selector">로 추가해 주면 됩니다.

      2. 분문의 특정 영역에 넣고 싶다면 <div class="selector">로 글상자를 만들어 넣어주세요.

  3. 라넌 2016.08.17 19:23  Addr  Edit/Del  Reply

    감사합니다.^^ 한번 해봐야겠네요.

  4. 진짜궁금 2016.09.10 22:33  Addr  Edit/Del  Reply

    그런데 선택 페이지만 배경색을 넣을 경우는 css를 어떻게 적용하나요~위처럼 하니 모든 페이지에 적용이 되는데~궁금합니다

    • 내.맘.대.로 2016.09.12 10:29 신고  Addr  Edit/Del

      전자책은 '페이지'의 개념이 모호하기 때문에 페이지가 아닌 단락으로 구분을 해야되요. 배경을 넣고싶은 단락을 정한 후 div 태그로 배경을 넣을 수 있습니다.

      마지막 예제가 div 태그로 특정 단락에만 배경을 적용한거예요.

    • 내.맘.대.로 2016.09.12 10:33 신고  Addr  Edit/Del

      만약 특정 단락을 한 페이지로 보이게 하려면 파일을 나눠서 처리해야 되요. 전자책에서 '페이지'가 어떻게 나뉘는지를 잘 생각해 보세요. '선택 페이지'가 정확히 몇페이지인지 특정할 수 없습니다.
      똑같은 책이라도 글자크기, 줄간격 등에 따라 2페이지일 수도 있고, 2페이지의 중간부터 시작될 수도 있고 3페이지가 될 수도 있고, 1페이지의 중간이 될 수도 있거든요.
      그래서 배경 처리할 부분에서 파일을 나누거나 아니면 해당 단락을 선택해 배경을 추가해야되요.

  5. 익명 2016.10.02 07:04  Addr  Edit/Del  Reply

    비밀댓글입니다

  6. 익명 2016.10.02 07:27  Addr  Edit/Del  Reply

    비밀댓글입니다

  7. 이유진 2016.10.02 08:09  Addr  Edit/Del  Reply

    앗... 저 역시나 목차의 완성본만을 지정하여 ㅂ경색을 넣었는데 전체로 다 들어갑니다.
    윗분질문에 답해주신 선생님글 "그래서 배경 처리할 부분에서 파일을 나누거나 아니면 해당 단락을 선택해 배경을 추가해야되요"뜻을 잘 모르겠어요.ㅠㅠㅠㅠㅠㅠㅠ

    • 내.맘.대.로 2016.10.04 08:48 신고  Addr  Edit/Del

      마지막 예제를 참고하세요.

      아래 코드 보시면 본문의 다른 부분은 배경이 들어가지 않고 div로 묶인 부분만 배경이 지정됩니다. 마지막 예제 코드이니 확인해보세요 ^^
      <body>
      <p>본문</p>
      <div class="bg_flower">
      <p class="txt_box">배경을 지정한 본문</p>
      </div>
      <p>본문</p>
      </body>

  8. yyfl316 2021.07.03 20:00  Addr  Edit/Del  Reply

    안녕하세요. 이미지로 배경을 하고싶어서 찾아보다가 선생님 글을 보았습니다. 마지막 배경을 넣을때 주의하라고 하신부분에서 글상자 크기를 고정하라고 하셨는데 어떻게 해야하는지 알 수 있을까요? 이미지가 반복되는 형태가 아니라 위의 꽃 이미지 같은 이미지인데 한 페이지당 이미지가 각각 한장씩이 보이는 형태였으면 좋겠씁니다.

    • 내.맘.대.로 2021.07.06 12:32 신고  Addr  Edit/Del

      배경 속성을 제대로 공부해 보세요.
      https://developer.mozilla.org/ko/docs/Web/CSS/background

      하위 속성까지 제대로 공부를 하면 아주 쉽게 원하는 스타일을 만들 수 있습니다.

  9. 양점열 2022.05.15 18:54  Addr  Edit/Del  Reply

    자세한 설명 감사합니다