전자책 포멧? 내 책은 어떻게 만들지?

전자책 출판정보 2018.04.17 12:35
전자책에 대한 질문을 보니 전자책 포멧이 무엇인지, 어떻게 만들어야 하는지 조차 막막해 하는 분들이 많아보입니다.
종이책을 전자책으로 변환하고 싶은데 전자책에 대한 지식이 0에 가깝다 보니 무엇부터 시작해야 할지 모르는 분들께 가장 기본적인 전자책 포멧에 대해 설명드릴게요.


1. 전자책 포멧이 무엇이냐?
한컴워드로 문서를 만들어 저장을 하면 HWP 파일이 됩니다.
MS워드로 문서를 만들어 저장하면 DOC,  DOCX 파일이지요.
파워포인트는 PPT, PPTX, 엑셀은 XLS, 인디자인은 indd 파일입니다.
이 각각의 형식을 포멧이라고 해요.
그림은 jpg, bmp, png 등의 포멧이 있고, 동영상은 avi, mov, mp4 등의 포멧이 있습니다.

포멧은 파일 뒤에 붙는 확장자가 아닙니다. 파일 뒤에 붙는 hwp, doc 같은 확장자는 '이 파일은 hwp 포멧으로 만들어졌다'는 표시일 뿐이에요. hwp 파일의 확장자를 doc로 바꿔도 한컴워드에서 열리지만 ms워드에서는 열리지 않습니다.

파일을 저장하는 형식, 약속을 포멧이라고 해요. 확장자는 특정한 형태로 이 파일을 만들었다, 혹은 저장했다는 것을 표시해 줍니다.
왜 포멧이 필요할까요?
아주 간단해요. PPT에서 HWP 파일을 열 수 없잖아요. 
PPT 포멧의 문서는 '이 문서는 MS오피스 파워포인트로 만들 수 있고 파워포인트라는 프로그램에서 볼 수 있습니다' 라는 의미예요.
JPG나 AVI로는 PPT 형태의 문서를 만들 수 없습니다. 
포멧은 특정한 목적을 위해 그 목적에 가장 적합하다고 생각하는 형태로 데이터를 저장하기 위한 약속이에요.

전자책 포멧은 '책을 디지털화 하기 위해 가장 적합한 형태'의 파일이 되겠지요?
전자책 포멧은 여러가지가 있습니다. 대충 머리속에 떠오르는 것만 해도 10여종이 넘어요. EPUB, PDF, txt, lit, chm, pdb, mobi(azw), cbz, uml, xml, zip....

txt, zip도 전자책 포멧이야? 하실 분이 계실텐데, 초기 리디북스 전자책 파일은 txt의 변형이었어요. 그리고 카카오페이지의 연재 파일은 이미지를 압축한 zip입니다. 엄밀히 말하면 epub도 zip파일이에요.

그럼 전자책 포멧이라고 한 형태로 만들면 유통이 가능 할까?
아닙니다. 문서 포멧이라도 HWP는 MS워드에서 제대로 열리지 않아요. PPT를 엑셀에서 열 수 없습니다. 전자책도 마찬가지예요. 전자책 뷰어는 '특정한 포멧'만 지원하기 때문에 '전자책을 만들어 CD에 담아 드립니다.' 라거나 '최적화 된 기술로 웹과 PC에서 편하게 볼 수 있다'는 등의 광고에 현혹되 전자책을 만들면 리디북스, 교보문고 같은 전자책 유통사에서는 팔지 못할 수도 있습니다.


2. 국내에서 유통 가능한 전자책 포멧은?
전자책을 만드는 이유가 국내 유통사를 통한 판매라면 이용할 수 있는 전자책 포멧은 정해져 있습니다.

 전자책 포멧 리디북스 교보문고 예스24 알라딘 네이버 원북스 카카페
 EPUB2 O O O O O O O
 EPUB3 X ▲ △ X △ X X
 PDF O O O O X ? O
 zip △ X X X △ ? △
* O 거의 모든 기능을 사용할 수 있음
* X 지원 안함
▲ 많은 기능을 사용할 수 있지만 제약이 있음
△ 일부 기능 혹은 특정한 형태로 제작된 파일만 사용 가능

이 표를 보면 어떤 포멧으로 전자책을 만들지 감이 오시지요?

국내 유통사는 EPUB2를 메인 포멧으로 사용합니다. 국내 뿐 아니라 애플 iBooks, 구글 플레이북 모두 EPUB2를 지원하고 아마존은 azw(mobi)란 포멧인데 EPUB2로 99% 자동 변환이 되기 때문에 아마존에도 EPUB2 파일을 손쉽게 등록할 수 있습니다.

zip 파일은 유통사별로 제작 방식이 조금씩 다릅니다. 그리고 제작 가능한 콘텐츠도 다르고요.
카카오페이지는 연재만화, 연재 소설 모두 zip 파일로 서비스합니다. 메인 포멧이 zip이에요. 
하지만 카카오페이지용으로 만든 연재용 zip 파일은 네이버에서 사용할 수 없습니다.

3. 내 책에 맞는 전자책 포멧은?

국내 유통사가 모두 EPUB2을 지원한다고 모든 책을 EPUB2으로 만들어야 하는 것은 아닙니다. 책에 따라 EPUB2보다 PDF가 좋을 수 있습니다. 독자가 이용하는 기기에 따라서도 다르고요.

예를 들어 EBS 교재는 PDF 포멧을 사용합니다. PDF는 종이책과 똑같기 때문에 강사가 20페이지 3번째 줄에 밑줄을 그으라고 하면 같은 위치를 찾을 수 있어요. 그런데 EPUB은 강사가 말한 20페이지 3번째 줄을 찾기 어렵습니다.

스마트폰이 아닌 태블릿이나 PC를 위한 전자책, 혹은 잡지처럼 이미지와 텍스트가 복잡하게 얽혀있고, 편집 자체가 책의 중요한 요소인 책도 PDF가 좋습니다. 

3.1 EPUB2로 좋은 책
소설, 인문, 경제경영, 자기계발서 등 텍스트가 메인이고 이미지나 표가 포함되어 있는 책은 EPUB2로 만들 수 있습니다. EPUB2로 판매하는 책은 PDF를 동시에 등록(일부 유통사에 한해서)해 판매할 수 있습니다. 스마트폰을 이용하는 독자는 EPUB2로, 태블릿이나 PC를 이용하는 독자는 PDF로 다운받을 수 있다면 만족도가 더 높겠지요.

3.2 PDF로 좋은 책
잡지처럼 편집이 복잡한 책은 PDF가 좋습니다. 그리고 강의용 교재처럼 본문 내용과 페이지가 일치해야 하는 책도 PDF로 만들어야 합니다. EPUB은 페이지가 없기 때문에 특정 페이지를 지정해서 봐야 하는 책은 PDF를 권합니다.
* 참고로 EPUB에 페이지가 있다고 생각하는 분들이 있어요. 유통사 뷰어로 열면 몇페이지인지 표시가 되니 그걸 전자책의 페이지라 생각합니다. 전자책을 제작해 드리면 검수하면서 '30페이지에 오타가 있어요' 라며 수정해 달라고 하는 경우도 있지요. 그런데 같은 책을 아이폰에서, 아이패드에서, 갤럭시 S9에서 열면 30페이지 내용이 전부 다릅니다. 아이폰에서 30페이지에 오타가 발견되도 갤럭시 S9의 30페이지에는 오타가 없지요. 

3.3 연재용 책
연재는 유통사마다 조금씩 다릅니다. 카카오페이지는 이미지로 만들어 압축을 해야하고, 네이버나 리디북스는 EPUB2으로 제작합니다. 교보문고 톡소다는 텍스트 파일을 사용합니다. 연재하려는 유통사의 특성에 맞는 포멧을 선택하면 됩니다.

3.4 EPUB3로 좋은 책
전자책이 뭔지 모르는 분들이 EPUB3얘기를 제일 많이 하는 것 같아요. EPUB3가 화려해 보일 수는 있지만 책의 특성과 맞지 않는다면 EPUB3의 다양한 기능을 이용할 필요가 없습니다. 교보문고에서 '미움받을 용기 EPUB3'를 받아서 보세요. 처음 본 사람들은 화려함에 감탄을 하겠지만 책을 보려고 마음먹는 순간 화려한 EPUB3 효과가 얼마나 독서를 불편하게 만드는지 느낄 거예요.

유아/아동서라면 EPUB3로 좋습니다. 여행책도 EPUB3로 만들 수 있습니다. 학습서 역시 EPUB3와 잘 어울립니다. 하지만 EPUB3로 만들려면 전자책 기획을 다시 해야되요. 전자책에 MP3 넣었다고 EPUB3가 아닙니다. 


4. 전자책은 어떻게 만들지?

4.1 PDF 포멧
인디자인이나 쿽에서 PDF로 저장을 할 수 있습니다. 저장을 할 때 인쇄용이 아닌 PDF/X 형식으로 저장을 합니다. 웹 혹은 PC용으로 인쇄용보다 해상도는 낮지만 용량이 작습니다. PDF로 저장할 때 인쇄용 제단선은 출력되지 않도록 해야하고 표지는 별도로 추가를 합니다.

인쇄용 PDF만 있고, 출판사 내부에서 직접 만들기 어렵다면 제작 대행사를 이용할 수 있습니다. 몇몇 업체에서 2~3만원 정도의 가격으로 인쇄용 PDF를 전자책용으로 변환해 줍니다. 

4.2 EPUB2 포멧
텍스트(HWP, DOC 등)로 직접 편집도 가능하고 인디자인이나 쿽에서 EPUB2로 저장 후 편집할 수 있습니다.
인디자인이나 쿽에서 EPUB2로 저장하려면 편집에 신경을 써야합니다. 전자책을 고려하지 않고 편집하면 레이어가 엉망이 되서 편집을 전부 다시해야 합니다. 종이책 편집만 해본 인디자인 편집자가 만든 파일은 99% 재편집 해야 하더라고요.

Sigil이나 윙크2 같은 EPUB 편집 프로그램이 있습니다. 
조금만 배우면 소설 같이 간단한 전자책은 직접 제작이 가능합니다.
그렇다고 제작이 쉽다는 얘기는 아닙니다. 
'누구나 전자책을 만들 수 있다'는 얘기는 절대 믿지 마세요. '누구나 전자책을 만들 수 있다'면 누구나 디자인을 할 수 있고, 누구나 인디자인 편집을 할 수 있습니다. 다만 디자이너가 만든 표지와 내가 만든 표지의 질이 다를 뿐이지요.

제작 대행 업체도 많이 있는데 제작 품질, 제작 기간에 따라 가격이 다양합니다.
제작 단가는 업체별로 다르고 제작 품질에 따라 다르기 때문에 출판문화산업진흥원에서 제시하는 전자책 제작 단가를 참고하시기 바랍니다.

구분

이펍

PDF

,

40만 원

30만 원

,

35만 원

25만 원

,/,

30만 원

20만 원

,

25만 원

15만 원

,

20만 원

10만 원



4.3 EPUB3 포멧
EPUB3는 전문성을 요구하는 경우가 많습니다. 소설처럼 특별한 기능이 포함되지 않는 책도 EPUB3로 만들 수 있지만 이런 책 보다는 애니메이션, 문제풀이, 사진 앨범 등 특수한 효과가 들어간 책을 EPUB3로 만들기 때문에 프로그래밍 수준의 전문 기술이 필요합니다. 

제작 업체에 맏기는 것을 권해드리며, 직접 만들어 보고 싶다면 나모 오서라는 편집 프로그램을 이용할 수 있습니다. 나모 오서는 PPT 문서 만들 듯 EPUB3 전자책을 만들 수 있습니다.

제작 단가는 수십만원에서 수백만원까지 어떤 기능을 요구하느냐에 따라 크게 달라집니다.

4.4 카카오페이지 포멧 
카카오페이지는 공식적으로 배포하는 제작가이드를 공유해 드립니다. 

이 방법을 따라해 봤는데 저라면 절대 이렇게 안만들어요 ^^

카카오페이지용을 제작하는 업체도 있습니다. 연재 1회차당 2~3천원부터 연재 기준 1페이지당 500원 이상 받는 등 가격대가 다양합니다. 
카카오페이지용은 한 화면에 몇줄, 한 줄에 몇글자가 들어가느냐에 따라 가독성이 달라지기 때문에 출판사의 요구를 미세하게 조정해 줄 수 있는 업체에 맡기는게 좋습니다. 상하좌우 여백, 글자 간격, 글자 크기, 줄간격 등을 미세하게 조절하는 업체가 있고, 한가지 유형으로 찍어내는 업체가 있습니다. 

텍스트가 이미지로 되어있기 때문에 이미지의 품질과 용량도 중요합니다. 용량이 낮으면 품질은 떨어집니다. 품질과 용량의 적정선을 맞추는게 기술인 것 같아요. 카카페 콘텐츠를 보면 품질 차이를 느낄 수 있을거예요. 


이정도면 국내에서 유통되는 전자책 포멧을 거의 다 설명드린 것 같습니다. 
마무리로 정리해 드리면, 별한 이유가 없다면 EPUB2로 전자책을 만들면 된다는 얘기를 길게 정리했습니다 ^^;


설정

트랙백

댓글

[문의] 대논쟁 철학베틀 스타일

문의가 한참 없다가 2개가 한번에 들어왔어요. 그래서 두번째 문의도 정리해 봤습니다.


문의가 들어온 책은 '대논쟁! 철학 베틀'이에요.


책이 없어 리디북스 미리보기 화면을 보니 이렇게 되어 있네요.



문의 내용은 2개였습니다.


1. 꼭 알아두자 글상자의 테두리는 그릴 수 있겠는데 글상자 위에 있는 '꼭 알아두자' 이미지는 어떻게 테두리에 겹치나?


2. 철학자 이미지 옆에 대화(?) 내용이 나오는데 이건 표로 만드는건가?



* 1번 테두리에 겹친 그림 설명

1번은 저도 자주 사용하는 스타일이에요.

블로그에도 여러번 언급한 적이 있는 스타일입니다.

참고를 하시려면 샘플 파일이 있는 아래 글을 확인해보세요.


http://epubguide.net/206


이게 같은 스타일? 이라고 생각하시는 분은... 안계시겠지요 ^^?

같은 스타일입니다. 이미지 대신 텍스트가 들어가고, 왼쪽이 아닌 가운데라는 점만 다를 뿐 이미지를 테두리 위에 겹치는 원리는 똑같아요.


'대논쟁 철학베틀' 스타일도 만들어 봤습니다. 제가 만든 스타일은 이래요.


.box_note {

border-radius : 15px;

border : 3px solid brown;

margin : 5px;

padding : 5px;

}


.box_title {

margin-top : -25px;

}


<div class="box_note">

<div class="box_title"> <img alt="img_note" src="../Images/img_note.png"/></div>

<p>앨리스는 언니와 함께 강둑에 앉아 있었다. 아무 것도 하지 않고 있자니 점차 몹시 지루해졌다. 언니가 읽는 책을 한두 번 흘깃 보았는데 거기엔 그림도 없고 대화도 없었다. “그림도 없고 대화도 없으면 책이 도대체 무슨 쓸모가 있는거지?”라고 앨리스는 생각했다.</p>

</div>


이미지 상자 위치는 글상자 안쪽에 넣어도 되고 바깥쪽에 넣어도 됩니다. 별 차이 없어요.


<div class="box_title"> <img alt="img_note" src="../Images/img_note.png"/></div>


이 코드를 글상자 바깥에 두고 싶으면 margin-top 대신 margin-bottom을 쓰면 됩니다.



*2번 철학자 이미지 옆 대화 설명


이건 표가 아닙니다.

그냥 이미지 float:left; 처리한거예요.

근데 float:left; 하면 이런 문제가 생겨요.



텍스트가 이미지를 벗어나면 이미지 아래에 붙습니다.

이미지 아래에도 '여백'이 생겨야 하는데 그 공간에 텍스트가 들어차지요.

제가 왜 '여백'을 강조했을까요?

저걸 해결하는 방법은 완전 초보라도 다 아는 여백 속성, margin을 이용하면 되기 때문이에요.

CSS는 응용이 중요하고, 그리고 간단합니다.

여백이 필요하면 여백을 주면 되는거예요.


그래서 이런 스타일이 나왔습니다.

'헉...' 소리 날 정도로 간단하지요?

물론, 저는 다른 스타일은 하나도 안주고, 설명에 필요한 스타일만 넣었기 때문에 간단한거예요. 여기에 글꼴을 넣고, 글자 크기를 바꾸고 줄간격이나 정렬을 추가하면 됩니다.

.img_philo {

float : left;

display: inline-block;

}


.txt_talk {

margin-left : 80px;

}

* 참고로, 설명을 위해 픽셀을 쓰고 이미지 크기도 지정하지 않았어요. 이미지 크기 지정하고, 여백은 이미지 크기에 따라 변하도록 %나 em을 쓰면 더 좋아요. 작은 화면에서는 이미지가 작게, 큰 화면에서는 이미지가 크게 나와야 보기 좋거든요.


여기까지가 '대논쟁, 철학베틀'의 스타일일거예요.

최종 결과물은 이렇습니다.




아마 이 책 CSS 코드를 열어봐도 큰 차이는 없으리라 생각합니다 ㅎㅎ

하지만 이 코드에는 한가지 문제가 있어요.

화면이 가로로 넓을 경우에 철학자 이미지가 위쪽으로 올라갈거예요.



이 문제를 방지하는 코드를 넣었을지 모르겠는데, 샘플만 봐서는 안들어갔을 가능성이 커보이네요.

그래도 별 문제는 없습니다. 최근엔 EPUB뷰어가 이렇게 가로로 긴 화면이 나오도록 하지 않거든요. iBooks나 캘리벌로 책을 열고 가로를 길게 만들면 책과 비슷한 범위에서 1페이지로 자르거나 2페이지로 나눠 보여줍니다. 그러니 저렇게 나온다고 해도 크게 문제되지는 않을거예요.


그래도, 화면이 아무리 넓어도 문제가 생기지 않는게 더 좋지 않을까요?

그리고 편집할 때 코드도 조금 복잡해요. 철학자 얼굴이 들어가는 위치에 똑같은 코드가 반복적으로 들어가야 하거든요.


clear:both; 속성 생각하셨다면 박수~~~

하지만 clear:both;로도 해결되지 않습니다. 그리고 clear:both; 속성은 제대로 모르고 쓰면 오히려 독이 되기도 해요. 몇몇 편집자가 이미지마다 clear:both;를 넣는데, 화면 크기를 마구 바꾸다 보면 이미지가 전혀 엉뚱한 곳에 나오거든요. 유통중인 책에도 이런게 몇종 있습니다.



clear:both:를 쓰면 이런 결과가 나올 수 있어요. 좀 더 가혹한(?) 테스트 환경을 만들어 보면, 이런 결과가 나올 수도 있습니다.


두번째 문장은 두번째 이미지에 와야 하는데 첫번째 이미지에 모든 문장이 붙은 것 처럼 보여요.


<div class="img_philo"><img alt="img001" src="../Images/img001.png"/></div>


<p class="txt_talk">그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다.&nbsp;</p>


<div class="img_philo"><img alt="img002" src="../Images/img002.png"/></div>


<p class="txt_talk">그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다. 그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다.</p>


그리고 코드 문제(라기 보다는 편집상 불편함)도 있습니다.

대화형태고 철학자 얼굴이 100번도 넘게 나오는 책이라면 이미지를 삽입하는 코드가 무한 반복되겠지요.


그래서 저는 이렇게 수정을 했습니다.


<p class="txt_philo01">그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다. </p>

<p class="txt_philo02">그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다. 그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다.</p>


어때요? 코드가 훨씬 깔끔해 졌지요?

txt_philo01 클래스를 철학자별로 하나씩 만들어서 철학자의 대화에 넣어주면 됩니다.

이미지를 무한 반복해서 넣지 않아도 되서 html 코드가 깔끔해 졌어요. 그리고 화면이 올라가는 문제도 해결을 했습니다.



극한으로 가면 여전히 약간의 문제는 보여요. 이건 줄간격을 넓히면 해결되지만 줄간격이 너무 넓으면 본문이 보기 싫기 때문에 적정한 선에서 조절을 하면 됩니다.



텍스트가 위쪽 이미지 아래 바짝 붙는건 이미지 위아래에 투명한 여백을 살짝만 줘도 해결이 되요. margin을 이용해 해결할 수도 있고요.


업그레이드한 스타일을 적용한 최종 결과물은 이렇습니다. 정상적인 가독 상황이라면 업그레이드 해도 차이는 없어요. 하지만 편집 시간이 달라집니다. 100개의 div 태그+ 이미지 태그를 넣는 것 보다는 100개의 clsss를 넣는게 훨씬 간단해요.





업그레이드 스타일은 철학자마다 스타일이 하나씩 있어야 하기 때문에 CSS가 복잡해 질 수 있습니다.

철학자가 100명이고 철학자가 한번씩 나온다면 100명의 CSS를 만들기 보다는 div로 이미지를 넣는게 좋아요.

철학자가 10명이고, 철학자가 수다스러워서 한명당 수십번 얘기를 한다면 이 스타일이 더 좋고요.


업그레이드 스타일이 궁금하신 분은 메일 주세요.


여기 올린 내용은 마음대로 써도 되지만 최소한의 양심은 지켜야 하는데, 그러지 못한걸 몇번 보고 나니 저도 조심스러워지네요.

출처를 밝히는 것 까지도 바라지 않습니다. 참고를 했으면 최소한 '내가 만들었다'라고 하지는 말아야지요.

설정

트랙백

댓글

[문의]패턴(웨이브)을 넣은 테두리

오랜만에 문의가 들어와 만들어봤습니다.


테두리 샘플 이미지


샘플 이미지처럼 위쪽과 왼쪽에만 이런 물결무늬 테두리를 넣을 수 있냐는 문의였어요.

border를 쓰면 실선, 이중실선, 점선 등의 테두리는 만들 수 있는데 물결무늬는 표현이 되지 않습니다. 이런 물결무늬를 표현하려면 border-image 옵션을 써야되요.


border-image 참고 : https://www.w3schools.com/cssref/css3_pr_border-image.asp


이걸 참고해서 코드를 만들면 이렇습니다.


.wave_edge {


border : 30px solid transparent;

margin : 10px;

padding: 5px;

-webkit-border-image: url("../Images/wavebox.png") round;


border-image: url("../Images/wavebox.png") round;

border-image-slice: 36%;

}

 


사용한 테두리 이미지는 이거예요. 설명을 위해 급조한 이미지라 매끄럽지 않지만, 보다 정교하게 만들면 결과물이 더 깔끔하겠지요?


이미지 크기는 중요하지 않습니다. 이미지 크기와 물결무늬 크기는 아무 관계가 없습니다. 다만, 너무 작으면 물결무늬가 커졌을 때 흐릿하게 깨질 수 있으니 낮은 해상도보다 높은 해상도를 권해드려요.


그런데 border-image를 쓰면 이렇게 나옵니다. 문의는 특정면에만 테두리를 치는건데 4면 모두 테두리가 나오지요.




이 문제는 응용력을 조금만 발휘하면 해결할 수 있습니다.

답을 알면 '겨우 이런거야?' 라고 생각할 정도로 아주 아주 쉽지요.


4면 테두리가 아닌 2면만 테두리를 치고 싶다.


borde-left, border-top은 알잖아요.


그럼 border-image-left, border-image-top도 당연히 있을거예요.


.wave_edge {

border-right : 0;

border-bottom : 0;

border-top: 30px solid transparent;

border-left: 30px solid transparent;

margin : 10px;

padding: 5px;

-webkit-border-image: url("../Images/wavebox.png") round;

border-image: url("../Images/wavebox.png") round;

border-image-slice: 37%;

}


border-right : 0; border-bottom : 0;은 없어도 되는데(되야 하는데) 일부 뷰어에서 점선이 생기네요.

그래서 테두리가 필요 없는 부분은 필요 없다고 선언을 해버렸습니다.


제가 사용하는 CSS 속성이나 초보 편집자가 사용하는 CSS 속성은 별 차이가 없습니다. 정말 예외적인 스타일이 아니면 책 한권에 들어가는 속성은 거의 비슷해요.

다만 초보 편집자는 응용을 잘 하지 못합니다. CSS는 제한된 속성을 얼마나 잘 응용하느냐에 따라 결과물이 엄청난 차이를 보입니다.


아래는 특정 면만 테두리를 적용한 결과물이에요. 교보와 알라딘 뷰어에서 캡쳐했습니다.


이건 알라딘 뷰어에서 본 결과


이건 교보ebook 뷰어에서 본 결과입니다.



설정

트랙백

댓글


티스토리 툴바