모르는 사람이 의외로 많은 CSS 문법 (2)

앞의 글에서 선택자 만드는 규칙을 알려드렸습니다.


1. 태그 선택자 : HTML 태그를 스타일 선택자로 사용

2. 클래스 선택자 : .classname 으로 사용자가 필요한 스타일 선택자 생성

3. ID 선택자 : HTML요소에 고유한 성격을 부여하는 ID를 선택자로 활용


여기에 추가로, 


1. 활용할 수 있는 HTML 태그가 있으면 적극 활용하고

2. 예약어(태그, 속성 등에 쓰이는 단어)는 가급적 선택자로 사용하지 말아야 한다.


는 주의사항까지 정리해 드렸습니다.

긴 글을 쓴 것 같은데 이 몇줄로 간단히 요약이 되네요 ㅜ.ㅜ


이번 글에서는 특수 선택자를 간단히 정리해 보겠습니다.

특수 선택자란 태그, 클래스, ID 선택자와는 달리 특수한 목적을 위해 사용하는 선택자를 의미합니다. 특수 선택자라는 용어는 뜻이 명확히 규정되어 있지 않아 제가 설명드리는 범위와 다른 설명에서 사용하는 범위가 다를 수 있습니다. 여기에서 얘기하는 '특수 선택자'는 태그, 클래스, ID를 제외한 특수한 목적으로 지정된 선택자를 의미합니다.


1. @page Rule


전자책 스타일에서 간혹 보이는 선택자입니다. 참고로 @가 붙으면 선택자라고 하지 않고 Rule이라고 합니다. @font-family Rule, @page Rule 하는 식으로요.


@page는 인쇄를 위한 규칙입니다. HTML은 '가변형 화면' 즉 폭과 높이가 바뀌는 화면에 내용을 표현하기 위한 언어입니다. 그런데 화면을 인쇄하려면 A4, B5처럼 정해진 크기에 맞춰야하지요. 지금 보고 계신 이 내용을 A4용지 프린터로 인쇄하면 어떻게 나올가요? 보이는 그대로 나올까요?(궁금하면 해보세요 ^^)


@page는 인쇄를 할 때 여백을 지정하기 위한 규칙입니다. 그래서 인쇄에 필요한 페이지 사이즈(size), 상하좌우 여백(margin) 등 제한적인 속성만 사용할 수 있어요. 


전자책 전체 페이지의 마진을 줄 때 사용할 수 있지만, 그리 권해드리고 싶은 속성은 아닙니다. page-break처럼 인쇄를 목적으로 만든 규칙이라 다양한 화면에서 보는 전자책에 어울리지는 않습니다. 그래도 마진은 문제 없이 지정되니 '쓰면 안된다' 정도는 아니에요.


@page에 대한 자세한 설명은 이 글을 참고하세요.

https://developer.mozilla.org/ko/docs/Web/CSS/@page


2. * 전체 선택자


앞에 곱하기(*) 기호는 오타가 아닙니다. 이 선택자가 * 예요.


* {

margin : 0;

padding : 0;

font-family : '명조';

font-size : 1.2em;

...

}


전체 선택자로 문서 전체에 영향을 주는 스타일을 지정할 수 있습니다.

만약 책의 모든 글씨체를 '명조'로, 글자 크기를 1.2em으로 지정하고 싶다면 위 스타일을 넣어보세요.

모든 CSS 선택자에 '명조'를 지정하지 않아도 알아서 명조가 지정이 될거예요.


책 전체에 적용해야 하는 기본 설정이 있다면 전체 선택자를 사용할 수 있습니다. @page 속성 대신 여백을 줄 때 주로 사용해요. 그리고 줄간격, 문단간격을 없애려고 모든 선택자에 margin : 0; padding : 0;을 추가하는 수고도 덜 수 있습니다.


3. Pseudo-class 선택자(가상 클래스 선택자)


가상 클래스 선택자는 특정 항목이 특수한 상태일 때만 속성을 부여하는 선택자입니다.

예를 들어, 링크를 생각해 보세요.


링크 텍스트 : 파란색 밑줄

링크 클릭상태 : 빨간색 밑줄

클릭했던 링크 : 갈색 밑줄


링크 속성에는 이렇게 3가지 스타일이 있습니다.

이 스타일을 변경하려면 a 태그 스타일을 수정해 주면 되요.

a {

color : #000000;

text-decoration : none;

}


이러면 밑줄이 사라지고 글자 색은 검정색이 됩니다. 


문제는, 링크를 클릭한 상태에서도, 링크를 다녀와도 항상 밑줄 없는 검정색이라는거예요.

각 상태별로 다른 스타일(예를 들어 링크를 클릭하고 있을 때 노란 바탕색)을 주고 싶으면?


이럴 때 가상 클래스 선택자를 사용할 수 있습니다.


a:link {

/*링크가 걸린 텍스트의 스타일*/

}


a:visited {

/*방문했던 링크 텍스트의 스타일*/

}


a:hover {

/*링크 위에 마우스를 올렸을 때 스타일. 터치 모니터에서는 효과를 나타내기 어려움*/

}


a:active {

/*링크를 누르고 있는 상태에서 텍스트의 스타일*/

}


이 외에도 다양한 가상 클래스 선택자가 있습니다.


p::first-letter {

color : red; /*문단의 첫 글자만 빨간색으로*/

}


p::first-line {

color : red; /*문단의 첫번째 줄만 빨간색*/

}


p::before, p::after {

content :("!!경고!!");/*문단의 앞뒤에 !!경고!! 문구 자동 삽입*/

}


가상 클래스는 종류가 다양해서 제가 자주 쓰는 몇가지만 여기에 소개합니다. 

이 중에 ::before, ::after는 정말 활용도가 높습니다.

더 자세히 알고싶다면 이곳을 참고하세요.

https://www.w3schools.com/css/css_pseudo_classes.asp


오늘은 여기까지.

다음 글에는 복합선택자(Combinator)를 설명할게요. 이전 글에서도 몇번 설명한 적이 있는데 전체적으로 다시 정리하겠습니다. 

설정

트랙백

댓글

모르는 사람이 의외로 많은 CSS 문법 (1)

최근에 전자책 제작 강의를 많이 하고 있습니다.


완전 초보부터 윙크나 시길로 전자책을 만들다 한계에 부딪힌 분들까지 대상이 다양한데요, 전자책을 많이 만들어 봤다는 분들조차 아주 기본적인 CSS 문법을 모르는 경우가 많았습니다. 


그래서 기본적인 CSS 문법을 정리해 봅니다.


1. 선택자 만들기


선택자는 스타일의 그룹입니다. 여러개의 스타일을 하나로 묶어놓고 이 스타일의 이름을 붙이잖아요. 이걸 선택자(selector)라고 합니다. 


.my_background_color {   /* <--my_background_color가 선택자예요 */

background-color : #FF0000;

margin : 1em;

font-family : "굴림";

}


선택자를 만드는 규칙은 단순하지 않습니다. 복잡한 규칙이지만 잘 활용하면 아주 편해요. 서로 다른 스타일이지만 쓰임이 같다면 같은 이름을 줄 수 도 있지요.


예를 들어, 제목의 고딕체는 빨간색, 문단의 고딕체는 노란색으로 스타일을 적용한다면 선택자 이름을 2개 만들어야 합니다.


.title_gothic {

color : red;

}


.para_gothic {

color : yellow;

}


그런데 이렇게 만들 수도 있어요.


h1.gothic {

color : red;

}


p.gothic {

color : yellow;

}


이렇게 하면 같은 이름의 선택자라도 태그에 따라 다른 스타일이 적용됩니다.

선택자 만드는 규칙은 CSS의 가장 기본입니다. 선택자는 Cascade의 기본이기 때문에 선택자 규칙을 모르면 CSS를 제대로 만들 수 없습니다. 



선택자 만드는 규칙


1.1 태그 자체


p, h1, h2, strong, bold 등의 태그에 스타일을 직접 적용할 수 있습니다. 태그 자체에 스타일을 적용하면 태그에 클래스를 붙일 필요가 없어 편해요.


p { text-indent : 1em; }


이렇게 하면 모든 p 태그에 들여쓰기가 됩니다. 


1.2 class 선택자


사용자가 임의로 이름을 지정해서 선택자를 만들 수 있습니다. 선택자 앞에 점(.)을 붙여 사용합니다.


.my_style {


}


영문, 숫자, 언더바(_) 하이픈(-)을 조합해 어떤 이름이라도 지정할 수 있습니다. 언더바와 하이픈 이외에도 몇가지 기호를 더 사용할 수 있지만 사용할 수 없는 기호가 더 많으니 언더바와 하이픈만 이용하는게 좋아요.


선택자를 특정 태그에 종속시킬 수 있습니다. 이렇게 하면 같은 이름이라도 태그에 따라 다른 스타일을 사용할 수 있어요.


h2.title {

font-size : 1.5em;

text-align : center;

}


h3.title {

font-size : 1.2em;

text-align : right;

}


선택자를 만들다 보면 이런 저런 이름을 붙이고 더 붙일 단어가 생각 안나 스타일 이름은 뭐로 하지 고민하게 되는데 태그에 따라 같은 내용, 다른 모양이라면 이렇게 똑같은 이름을 쓸 수 있습니다.


클래스 선택자는 속성을 지정할 때 class="class_selector"라는 형식으로 태그에 값을 넣습니다.


<h2 class="title">부 제목</p>




1.3 ID 선택자


ID는 말 그대로 고유한 이름입니다. 그래서 ID는 한 챕터 안에 딱 한번 사용을 합니다. 절대로 한번 이상 나와서는 안되지요.


ID 는 속성을 지정하기 위한 목적보다 문서 내에 있는 특정 값이나 위치를 표시하기 위해 사용합니다. 예를 들어 주석을 링크로 연결한다면 이렇게 되요.


<p> ID<a href="#foot_note01">1)</a>는 문서 내에 딱 한번 사용할 수 있습니다</p>


<p id="foot_note01"> ID : Identification의 약자</p>



여기서 ID는 <p id="foot_note01"> 입니다. a 태그에 있는 foot_note01은 ID를 지시하는 값이지 ID가 아닙니다. 만약 ID가 1번 이상 나온다면  a 링크는 어디로 가야할지 알 수 없게 되지요. 그래서 ID는 문서 내에 반드시 한번만 나와야 합니다. 


<p> ID<a href="#foot_note01">1)</a>는 문서 내에 딱 한번 사용할 수 있습니다</p>


<p id="foot_note01"> ID : Identification의 약자</p>


<p id="foot_note01"> ID : I Do의 약자</p>


그런데 이렇게 ID를 지정하고, 스타일을 바꾸고 싶을 때 어떻게 할까요? 

ID에 스타일을 적용할 수 있습니다.


#foot_note01 {

font-color : blue;

}


ID 스타일은 페이지 내에서 딱 한번만 사용할 수 있습니다. ID가 한번밖에 나올 수 없으니까요. 그리고 위 예에서 설명드린 주석 스타일을 ID로 적용하는건 권해드리지 않습니다. 주석이 10번 나온다면 각 ID마다 스타일을 지정해 줘야 하거든요.


EPUB2에서는 ID 스타일을 쓸 일이 많지 않습니다. 하지만 EPUB3로 사진 앨범을 만든다면 ID 스타일을 쓰게 됩니다. 


여기까지가 선택자를 만드는 가장 기본적인 방법입니다.


선택자를 만들 때 주의해야 할 점이 있어요.


a. HTML 태그가 있다면 태그를 써라.


어떤 분들은 모든 태그에 클래스 선택자를 붙입니다. 예를 들어 본문에 장제목 스타일이 딱 하나(수십번 반복될 수 있지만) 있다고 생각해 보세요.


.chap_title {

/*장제목 스타일*/

}


<h3 class="chap_title">장제목 1</h3>

<h3 class="chap_title">장제목 2</h3>

<h3 class="chap_title">장제목 3</h3>


이건 자원 낭비예요. 편집 시간도 늘어나고, 파일 용량도 늘고 코드도 복잡해집니다.

사용할 수 있는 태그가 있다면 태그를 쓰면 됩니다.


h3 {

/*장 제목 스타일*/

}


<h3>장 제목 1</h3>

<h3>장 제목 2</h3>

<h3>장 제목 3</h3>


만약 프롤로그 처럼 장 제목과 같은 레벨인데 스타일이 다르다면, 본문에 가장 많이 나오는 스타일을 h3에 지정하고, 앞과 끝에만 나오는 프롤로그 에필로그 스타일을 클래스로 지정하면 됩니다. 


b. HTML 태그와 기타 예약어는 클래스나 ID 선택자명으로 사용하지 말아라.


.strong {color : red;}


.address {font-family : "고딕"}


.button {  }


.small {   }


.img {   }


.color { }


.line-height {   }


.word-wrap {   }


보기엔 아무 문제 없어 보입니다. 그리고 이렇게 해도 문제가 생기지 않습니다. 하지만 이 선택자 이름은 전부 예약어입니다. HTML과 CSS에서 태그나 속성으로 사용하는 단어들입니다.


예약어를 써도 정상적으로 스타일이 적용되고 epubcheck에 오류가 발생하지 않습니다. 하지만 이건 가장 기본적인 규칙이에요. 너무 당연한거라 설명이 필요 없을 정도인데 생각보다 예약어를 선택자로 쓰는 분들이 많더라구요. 


한번에 정리하려 했는데 생각보다 내용이 길어졌네요.

다음 글에는 복합적인 선택자에 대해 설명하겠습니다. 언제가 될지는 모르겠지만... ^^;

설정

트랙백

댓글

jpg vs png 그리고 EPUB에서 사용할 수 있는 이미지

Tip&Tech 2017.08.24 11:03

전자책을 만들때 가장 많이 이용하는 태그 중 하나가 img입니다. img는 이미지를 삽입할 때 쓰는 태그예요.


전자책(EPUB2.0기준)에 사용할 수 있는 이미지는 4종이 있습니다. 웹브라우저에서 표시 되는 이미지면 사용해도 문제는 없지만  IDPF에서 권하는 이미지는 아래처럼 4종류예요. 가장 최신 문서인 EPUB3.0.1에서도 이 4종의 포멧은 반드시(must) 지원하도록 하고 있습니다. 


img/gif

img/jpg

img/png

img/svg+xml

http://www.idpf.org/epub/20/spec/OPS_2.0.1_draft.htm#Section1.3.7

http://www.idpf.org/epub/301/spec/epub-publications.html#sec-core-media-types


IDPF의 EPUB 문서를 보면 must나 should가 붙은 항목이 있어요. 이 항목들도 must가 붙어있습니다. 그래서 문서를 대충 보신 분들은 이 4개 포멧만 사용할 수 있다고 오해하시더라구요. 말 그대로 '오해'입니다. 이 포멧 외에도 bmp, tiff같은 다른 이미지를 사용할 수도 있습니다.


단!!! 뷰어가 지원을 하느냐에 따라 이 4가지 포멧 이외의 다른 이미지들은 뷰어에서 표시되지 않을 수 있습니다. 

무슨 말이냐~


IDPF의 Core Media Type은 EPUB 전자책 뷰어라면 반드시(MUST) 이 미디어 타입의 포멧을 표시할 수 있어야 한다는 가이드입니다. 그래서 표준을 지키는 EPUB 전자책 뷰어는 gif, jpg, png, svg를 제대로 표시해야 합니다. 그런데 EPUB3.0.1을 발표한 이후에 엄청나게 효율적인 이미지 포멧이 개발되고, 모든 디지털 카메라나 디지이너들이 이 포멧을 사용하면 어떻게 해야할까요?


IDPF가 표준을 수정하는데 시간이 오래 걸립니다. 그럼 표준을 수정하기 전까지 기다려야 하느냐? 아닙니다. IDPF의 문서는 최소 권고사항입니다. 반드시 이 '최소' 기준은 지켜야 한다는거지요. 그래서 뷰어 개발자는 이 4가지 포멧에 추가로 최신 이미지 포멧도 보이도록 뷰어를 개발할 수 있습니다. 물론 모든 뷰어가 최신 이미지 포멧을 지원하는건 아니기 때문에 일부 뷰어에서는 안보일 수도 있겠지만, 전자책을 통해 수익을 내는 유통사라면 IDPF의 권고안 + 새로운 기능을 추가하겠지요.


위 내용은 그냥 잊으셔도 되고, 어째든 현재 공식적으로 사용 가능한 이미지 포멧은 jpg, png, gif, svg 이렇게 4종류가 있습니다.


그런데 이미지마다 특성이 조금씩 다르다는거 알고 계신가요?


이 특성을 잘 활용하면 전자책을 보다 효율적으로 제작할 수 있습니다.


1. GIF

많은 분들이 전자책을 제작할 때 jpg나 png를 사용합니다. GIF를 사용하는 분은 별로 없어요. 왜 그럴까요?

그냥 습관적으로 남들 하니까... 해서 gif를 사용하지 않는 분도 계시지만 이미지 해상도 때문에 사용하지 않을거예요. 

gif는 8비트 256컬러만 지원합니다. 기술적인 문제(기술적으로는 24비트도 가능)는 떠나서 표준이 그렇습니다. 컴퓨터에서 사용 가능한 색은 1600만 컬러입니다. 여러분들이 FFFFFF하며 쓰는 색의 조합이 1600만개라는 얘기예요. 빨간색 256단계, 초록색 256단계, 파란색 256단계를 조합한게 FFFFFF예요. 그러니 256*256*256 가지 색을 표현할 수 있는거지요.


그런데 gif는 246가지 색밖에 표현을 할 수 없습니다. 이미지의 품질이 떨어질 수 밖에 없어요. 간단한 도형이나 이모티콘 같은 단순한 이미지는 압축율이 높아(파일 크기가 작아) gif가 효율적일 수 있는데 사진같이 복잡한 이미지는 제대로 색을 표현할 수 없습니다.


그럼 gif대신 jpg만 쓰면 되는데 왜 이 포멧을 계속 사용할까요?

gif는 강력한 장점이 있습니다. 이미지인데 몇초정도는 동영상 효과를 낼 수 있다는거지요. '움짤'이라는 인터넷 용어 들어보셨나요? 움직이는 이미지를 줄인 말인데 gif는 이미지 여러장을 파일 하나에 담아 영상처럼 움직이게 만들 수 있어요. 비교적 용량도 작고 동영상 플레이어 없이 이미지 뷰어(브라우저나 전자책 뷰어)로 바로 실행이 가능해 인터넷에서 많이 쓰입니다. 전자책에도 gif로 움직이는 이미지를 넣을 수 있어요. 전구에 불이 켜졌다 꺼졌다를 반복하는 이미지가 필요하다면 gif를 써야하지요.


2. svg

svg는 벡터 이미지 포멧입니다. 벡터 이미지는 좌표로 그림을 그려서 이미지를 확대해도 깨지지 않는 장점이 있어요.


https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg


svg파일을 메모장으로 열어보면 HTML같은 코드가 보입니다. 이미지처럼 보이지 않아요. 


<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 100 100">

<rect id="background" x="-50" y="-50" width="100" height="100" rx="4" fill="#f90"/>

<rect id="top-left" x="-50" y="-50" width="50" height="50" rx="4" fill="#ffb13b"/>

<rect id="bottom-right" width="50" height="50" rx="4" fill="#de8500"/>

<use stroke="#f90" stroke-width="22.6" xlink:href="#a"/>

<circle r="26"/>

<use stroke="#000" stroke-width="12" xlink:href="#a"/>

<g id="a">

<g id="b">

<g id="c">

<circle id="n" cy="-31.6" r="7.1" fill="#fff"/>

<path d="m0 31.6v-63.2" stroke="#fff" stroke-width="10"/>

<use y="63.2" xlink:href="#n"/>

</g>

<use transform="rotate(90)" xlink:href="#c"/>

</g>

<use transform="rotate(45)" xlink:href="#b"/>

</g>

<path id="text-backdrop" d="m44.68 0v40c0 3.333-1.667 5-5 5h-79.38c-3.333 0-5-1.667-5-5v-40"/>

<path id="shine" d="m36 4.21c2.9 0 5.3 2.4 5.3 5.3v18c-27.6-3.4-54.9-8-82-7.7v-10.2c0-2.93 2.4-5.3 5.3-5.3z" fill="#3f3f3f"/>

<use stroke="#000" stroke-width="7.4" xlink:href="#s"/>

<g id="svg-text" stroke="#fff" stroke-width="6.4">

<g id="s">

<path fill="none" d="m-31.74 31.17a8.26 8.26 0 1 0 8.26 -8.26 8.26 8.26 0 1 1 8.26 -8.26M23.23 23h8.288v 8.26a8.26 8.26 0 0 1 -16.52 0v-16.52a8.26 8.26 0 0 1 16.52 0"/>

<g stroke-width=".5" stroke="#000">

<path d="m4.76 3h6.83l-8.24 39.8h-6.85l-8.26-39.8h6.85l4.84 23.3z" fill="#fff"/>

<path d="m23.23 19.55v6.9m4.838-11.71h6.9m-70.16 16.43h6.9m9.62-16.52h6.9" stroke-linecap="square"/>

</g>

</g>

</g>

</svg>


SVG도 gif처럼 색이 복잡한 이미지를 만들기는 어렵습니다. 하지만 확대/축소가 자유롭다는 큰 장점이 있습니다.

전자책에 '도면'같이 단순한 이미지를 넣는데 아주 디테일한 부분까지 표현을 해야되서 이미지 사이즈가 10000px이상 된다 하면 이럴 때 svg를 사용할 수 있습니다.


그리고 폰트에는 없는 글자를 넣을 때도 활용할 수 있어요. svg폰트는 진짜 폰트처럼 아무리 확대를 해도 깨지지 않기 때문에 이미지로 글자를 넣을 때 보다 깔끔해 보입니다. 다만, svg로 글자 모양을 만드는게 쉽지 않다는 단점이 있지요. 


그리고 svg는 html같은 코드로 되어 있기 때문에 애니메이션 표현이 가능합니다. IDPF에서 제공하는 EPUB3 샘플 중 Tree라는 샘플이 있는데 svg로 프랙탈을 이용해 나무를 표현했어요. 


지금 당장은 쓸 일이 없는 포멧이지만 EPUB3가 활성화 되면 아주 많이 사용하게 될 이미지 포멧입니다.


4, 5. JPG vs PNG


이 내용이 핵심인데 엄청 길게 돌아왔네요.


많은 분들이 전자책에 이미지를 넣을 때 jpg나 png 파일을 사용할거예요.

이 두포멧을 생각 없이 사용하셨다면 앞으로는 특성을 살려 사용해 보세요.

jpg와 png는 아래같은 장단점이 있습니다. 둘을 정밀하게 비교한건 인터넷에서 찾아보시고, 여기서는 전자책 제작에 필요한 장단점만 정리하겠습니다. 


 구분

 jpg

 png

 장점

용량이 작다

용량 대비 이미지 품질이 좋다

투명한 배경이 가능하다

무손실 압축을 한다

 단점

이미지 손실(품질저하)문제가 있다

투명 배경이 불가능하다. 

용량이 크다


jpg와 png는 작은 아이콘부터 고품질 사진까지 다양한 이미지를 표현할 수 있습니다. 둘 다 이미지 품질이 좋지요.


그런데 jpg는 용량이 작습니다. 비슷한 품질의 png파일과 비교하면 5~10배정도 용량이 더 작습니다. 3Mb짜리 png 이미지를 비슷한 품질의 jpg로 만든다면 0.3Mb까지 용량을 줄일 수 있다는 의미지요.


png 3Mb짜리 이미지가 100장 들어간 전자책이라면 용량이 300Mb를 넘게 되는데 이미지를 jpg로 변경하면 최소 30Mb까지 줄어들 수 있습니다. 물론 이론상의 수치라 좀 더 크겠지만, 50Mb ~ 100Mb까지는 줄일 수 있지요.


용량이 이렇게 차이나면 PNG보다 JPG가 좋은거 아닌가?


JPG는 PNG와 비교했을 때 두가지 단점이 있어요.


첫째는 '손실 압축'이라는 거예요. 기술적인 설명 빼고, 이미지 용량을 줄일 수록 이미지 품질이 심하게 떨어진다는 정도로 이해하면 되요. 그래서 이미지 품질이 정말 중요하고, 전자책을 보관용으로 만든다면 JPG보다는 PNG가 좋습니다.


예를 들면, 제가 전자책을 제작할 때 2개 파일을 준비하는 경우가 있어요. 여행서 처럼 고품질 이미지가 많은 책은 이미지 원본을 그대로 담은 보관용 전자책과 이미지 용량을 줄인 유통용 전자책을 만들어 제공합니다.


이미지 원본을 그대로 담으면 EPUB파일이 1Gb를 넘기도 해요. 이를 유통용으로 압축하면 100Mb 밑으로 용량이 줄어듭니다. 왜 원본 파일을 보관해야 하는지는 설명 안해도 되겠지요? 이럴 때 JPG보다 PNG파일이 좋습니다. PNG는 무손실 파일이기 때문에 나중에 이미지를 다시 편집해야 할 때 JPG보다 좋아요.


두번째는 배경색입니다.

JPG는 배경을 없앨 수 없어요. 배경색이 필요 없으면 보통 흰색으로 배경을 두지요.  바탕화면이 흰색이면 문제가 없는데 바탕화면 색이 바뀌면 문제가 생기지요. 

바탕화면 색이 바뀔 일이 있을까요?

당연히 있지요. 뷰어에서 사용자가 바탕색을 마음대로 변경할 수 있습니다.


아래 이미지를 보세요..

같은 이미지인데 왼쪽은 jpg이고 오른쪽은 배경색을 투명으로 한 png입니다. 이미지를 편집하면서 여백도 없애 png 이미지가 좀 더 커보이지만 둘은 같은 이미지예요. png 파일은 


바탕색이 흰색일때는 아무 문제 없지만 바탕색을 넣는 순간 png의 투명 배경과 jpg의 차이를 확인할 수 있습니다. 



* 이 이미지는 '강같은평화' 출판사의 '아빠가 들려주는 성경태교동화' 목차 부분에서 발췌했습니다.


투명배경의 쓰임은 아주 다양합니다. 위에처럼 본문에 배경색이 들어갈 때 이지의 배경을 맞추지 않아도 되고, 사용자가 뷰어 배경색을 바꿔도 자연스럽게 보입니다. 


이미지로 글자를 넣는 방법을 설명드린 적이 있는데(http://www.epubguide.net/231) 이때도 이미지 글자의 배경을 없애면 진짜 글자와 구분이 가지 않을 정도로 자연스러워집니다.



JPG와 PNG는 각각 장단점이 있습니다.

JPG는 용량이 작아 사진이 많이 들어간 전자책이라면 JPG를 사용하는게 좋아요.

PNG는 손실이 없어 보관용 전자책을 만들 때 좋고 배경색을 없앨 수 있어 책에 배경색이 들어가거나 독자가 배경을 바꿨을 때 자연스러워 보입니다.


전자책 용량을 줄이거나 배경 편집시 자연스러운 이미지 삽입을 원할 때 이 두가지 특성을 잘 활용하면 도움이 될거예요.



설정

트랙백

댓글


티스토리 툴바