posted by 내.맘.대.로 2016. 10. 10. 17:14

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

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

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

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

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

이전 글 [반복작업 줄여주는 두가지 Tip(http://epubguide.net/187)]에서 가족관계와 :before, :after에 대해 설명을 드렸습니다. 이 태그를 이용하면 제목 태그(h1 ~ h6)만 써도 제목에 반복되는 다양한 패턴을 추가할 수 있다고 설명드렸습니다. 오늘은 이 두 태그가 실제로 어떻게 쓰이는지 보여드리려고 합니다.


종이책을 EPUB으로 변환하는데 이런 스타일이 나오네요.


1. 반복되는 절 제목


토네이도 출판사의 '내 인생 10년 후'라는 책으로 5개 장, 34개 절로 구성돼 있습니다. 아래 이미지가 34개 절 중 하나입니다. 

<종이책의 절 제목>



여기엔 두가지 편집이 필요합니다.

 

1. 절 제목 위, 아래에 1픽셀짜리 세로줄

2. 제목 아래 첫번째 단락에 들여쓰기(두번째 단락부터는 들여쓰기가 1자입니다)


많은 분들이 이런 코드를 사용할거예요.


[Images]

h_lime_50.png /*50픽셀짜리 세로줄*/

h_line_100.png /*100픽셀짜리 세로줄*/


[STYLE] /*글꼴 등 다른 스타일은 생략합니다*/

.h_line_center {

text-align : center;

...

}


h3 {

text-align : center;

margin-bottom : 2em;

...

}


.indent_3em {

text-indent : 3em;

}


[HTML]

<div class="h_line_center">

<img src="../Images/h_line_50.png" /> 

</div>

<h3>일자리가 사라지다</h3>

<div class="h_line_center"> 

<img src="../Images/h_line_100.png" />

</div>


<p class="indent_3em">인간의 일자리가....</p>



조금 더 센스있는 분이라면 가로*세로 1픽셀짜리 이미지를 넣고 이미지의 height를 50, 100픽셀로 조절하시겠지요. 


그런데 34개의 절을 모두 저렇게 복잡한 태그를 사용해 표현해야할까요? 조금씩 코드는 다르겠지만, 제목 윗쪽과 아랫쪽에 이미지를 2개 넣다보면 코드가 복잡해집니다. 이걸 34번 반복하는 것도 번거로운 일이에요. 찾아바꾸기를 써서 반복작업을 줄일 수도 있겠지만...


이 코드를 :before와 :after 코드를 사용해 깔끔하게 정리해 볼게요.


[Images]

h_lime_50.png /*50픽셀짜리 세로줄*/

h_line_100.png /*100픽셀짜리 세로줄*/


[STYLE]

h3 {

text-align : center;

margin-bottom : 2em;

}


h3:before {

content : url("../Images/h_line_50.png");

display : block;

}


h3:after {

content : url("../Images/h_line_100.png");

display : block;

}


h3 + p {

text-indent : 3em;

}


[HTML]

<h3>일자리가 사라지다</h3>

<p>인간의 일자리가....</p>


스타일은 복잡해졌습니다. 그런데 스타일은 딱 한번만 들어가니 아무리 복잡해도 편집 시간이 크게 늘어나지는 않습니다. 대신 HTML 태그를 비교해 보세요. 34번 반복해야 하는 HTML 태그가 깔끔하게 정리됐습니다. 


일반적인 코드 

 :before, :after를 사용한 코드

<div class="h_line_center">

<img src="../Images/h_line_50.png" /> 

</div>

<h3>일자리가 사라지다</h3>

<div class="h_line_center"> 

<img src="../Images/h_line_100.png" />

</div>


<p class="indent_3em">인간의 일자리가....</p>

 <h3>일자리가 사라지다</h3>

<p>인간의 일자리가....</p>


왼쪽 코드를 34번 넣는 것 보다 오른쪽 코드가 훨씬 편하겠지요?

두번째 코드의 미리보기 화면입니다.




2. 반복되는 소단락 제목

이 편집을 처음 보고 어떤 편집이 좋을지 고민을 했어요. 왼쪽 줄에 이미지를 넣어야 하나? 첫번째 단락에 :before를 써서 줄을 넣을까? 여러가지 방법이 있을거예요. 다른 분들은 이런 스타일을 어떻게 편집할지 궁금하네요. 제목 왼쪽에 붙은 줄은 표현이 쉽지만 본문 첫째줄까지 들어가야하니 조금 까다롭습니다.




이 책의 소단락은 각 절별로 5개 안팎으로 있습니다. 35개 절 * 5개 소단락이니 150번 이상 반복이 됩니다. HTML 코드가 복잡하면 편집 시간이 크게 늘어날 수 밖에 없어요. 그래서 편집 역시 HTML 코드를 간단히 처리할 수 있도록 CSS를 짰습니다. 


CSS는 한번, HTML 코드는 150번 이상 반복해야되니 HTML과 CSS 중 하나를 간결하게 표현하라면 HTML을 선택하는게 좋아요. 물론 무조건 HTML을 선택해야 한다는건 아닙니다. CSS가 너무 복잡해지면 뷰어에서 편집이 깨질 수 있거든요. 


[STYLE]

h4 { /*글꼴 등 기본 스타일은 생략*/

border-left : 1px solid #000000;

height : 6em;

margin : 2em 0 -1.5em 1em;

padding-left : 0.5em;

line-height : 1.8em;

...

}


h4 + p {

text-indent : 1.5em;

}


[HTML]

<h4>‘일터의 점령자’<br/>인공지능</h4>

<p>내가 신문기자로 입사한 건 1988년이다...</p>


이 코드에서 관심있게 봐야할 부분은 제목(h4) 태그의 margin입니다. 


margin : 2em 0 -1.5em 1em;


margin 태그는 [margin : 윗쪽 오른쪽 아랫쪽 왼쪽] 순서로 여백을 넣습니다. 

위 스타일을 잘 살펴보면 아랫쪽 스타일이 -1.5em 입니다. 음수가 들어갔어요. 이렇게 음수를 넣으면 윗쪽과 아랫쪽 단락이 겹치게 됩니다.



윗쪽과 아랫쪽 단락 테두리를 그리면 위 이미지처럼 서로 겹치는걸 볼 수 있어요. 그럼 여기서 테두리를 없애고, 윗쪽 단락 왼쪽에만 테두리를 그리면 어떻게 될까요? 위 이미지의 왼쪽 빨간색 점선만 남고 다른 선들은 모두 지워지겠지요? 이 방법을 이용해서 본문 첫번째 단락 앞까지 줄을 그을 수 있습니다.




34개의 절, 150개의 소단락 제목 스타일을 간단한 HTML 코드로 편집할 수 있는 실전 Tip이었습니다 ^^

반응형
posted by 내.맘.대.로 2016. 10. 5. 12:04

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

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

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

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

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

본문 내용을 정리하거나 Tip을 편집할 때 글상자를 많이 사용합니다.

아래처럼 본문의 중요한 내용을 한눈에 알아보기 쉽게 정리할 때, 아니면 본문에서 다루지는 않았지만 알아두면 좋은 Tip을 정리할 때 처럼요.


이런 편집을 할 때는 본문과 구분을 위해 노트나 메모장처럼 보이도록 편집을 합니다. 그래서 전자책으로 변환을 할 때 이 부분을 표현하기 까다로와요.


최근에 편집한 책 중에 이런 편집이 있었습니다. 3 종류의 글상자가 있는데 아래 이미지를 참고하세요.




<본문의 중요 단어를 알아보기 쉽게 편집한 글상자>



<본문 내용의 핵심을 간략히 정리한 글상자>


<본문에서 다루지 않았지만 알아두면 좋은 Tip >



이런 편집을 쉽게 표현하는 방법은 2가지입니다. 2가지 방법 뿐이라는 얘기가 아니니 오해는 하지 마세요. 많은 편집자들이 사용하고 있는 방법이 2가지라는 얘기입니다.


1. table을 이용한다.

2. div를 이용한다.


첫번째 방법은 1행 3열 테이블을 만들어 1행과 3행에 이미지를 넣고 2행에 본문을 넣는 형태예요.


 [글상자 이미지]

 본문

 [글상자 이미지]



두번째 방법은 테이블과 비슷한데 div 태그를 사용합니다.

[글상자 이미지]
본문
[글상자 이미지]



이번 책을 편집하면서 저는 table로 글상자를 만들었습니다. table로 만들면 div 보다 구조화 시킬 수 있거든요. 아래 이미지 3개가 캘리버(caliber)로 본 table로 만든 글상자입니다. 




그런데 유통사 뷰어에서 table로 만든 글상자 표현 문제를 발견했습니다.

저처럼 table로 글상자를 만드는 분들은 참고하시고, table 대신 div 태그로 만드는걸 권해드립니다.




1. 예스24 뷰어


첫번째 테이블은 문제가 없어보입니다. 배경도 흰색이고 본문쪽에도 배경 스타일이 없어 아무 문제 없습니다. 




두번째 테이블에서는 심각한 문제가 확인됐습니다. 위쪽 이미지와 본문 사이에 벌어진 간격은 별로 문제가 되지 않습니다. 컴퓨터 화면으로 보면 그 외에는 특별한 문제가 없어보일거예요. 하지만 스마트폰으로 보면 글상자는 회색 배경인데 본문(p태그)은 흰색으로 표현이 됩니다.



이 이미지로 보면 보다 확실하게 확인할 수 있습니다. 배경색을 검정으로 바꿨더니 뷰어의 배경 뿐만 아니라 <p> 태그도 검정색 배경이 적용됩니다. 기획자가 왜 이렇게 만들었는지 이해는 가지만, 전자책을 편집하는 입장에서는 원하는 편집이 어렵기 때문에 반갑지 않네요.

최소한 기본 배경화면만이라도 본문 태그에 하얀 배경색을 넣은걸 없애줬으면 좋겠습니다.




2. 교보eBook 뷰어


교보eBook 뷰어는 table 안에 있는 이미지의 width 100%가 적용되지 않는 것 같습니다. 본문 영역을 보면 table width 100%는 적용되는데 이미지는 조금 모자라보입니다. 

리디움 뷰어에서도 이와 비슷한 현상이 타나납니다. 크롬이나 다른 브라우저에서도 이상이 없고, 교보ebook과 리디움 뷰어에서만 이런 현상이 나타납니다.





3. 알라딘 eBook 뷰어


알라딘 뷰어는 이미지의 상하 크기가 늘어나 보입니다. 다른 뷰어에서는 나타나지 않는 현상이고, 알라딘 뷰어에서만 이렇게 표현이 됩니다.



4. 리디북스


리디북스 뷰어는 캡쳐가 되지 않습니다. 리디 뷰어 역시 예스24나 알라딘 뷰어에서처럼 위쪽 이미지와 본문 사이에 약간의 간격이 보입니다. 이 외에는 다른 문제가 보이지 않았습니다.



저처럼 table로 글상자를 만들려면 유통사 뷰어를 꼭 확인해 보세요. PC와 차이가 많이 나고, 뷰어별로도 차이가 심하기 때문에 원하는 모양의 편집을 얻기 어려울 것 같습니다. table 대신 div 태그로 글상자를 만드시길 권해 드립니다.

반응형
posted by 내.맘.대.로 2016. 9. 8. 11:19

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

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

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

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

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

킨들·스마트폰 홍수에도 미국인들 "책은 종이가 제맛"

...

1520명의 미국 성인이 참여한 이번 여론조사에서 어느 형태의 서적이라도 1권 이상의 책을 읽은 사람은 73%였다. 이 중 종이책을 읽었다는 응답자는 65%, 전자책은 28%, 오디오북의 비중은 14%였다. 


원문 : http://news1.kr/articles/?2767311


며칠 전 보고 별 의미 없어 지나친 기사인데, 2~3일 사이에 여러 신문사에서 같은 기사가 올라왔네요. '기사 바로보기' 버릇이 도져 이 기사의 허점도 짚어보려 합니다.


제목을 통해 전자책보다 종이책을 사람들이 더 선호한다는 내용을 강조하고 있습니다. 원문을 보신 분도 있을텐데, 원문에 나타난 그래프와 자료를 봐도 종이책을 사람들이 더 많이 봅니다.

그 이유를 종이책을 더 선호하기 때문이라고 기사는 분석을 했습니다. 그런데 반만 맞고 반은 틀립니다.


저는 전자책이 종이책 시장을 잠식할거라는 주장에 항상 반대했습니다. 전자책 단말기가 종이를 완전히 대체할 정도로 발달하기 전까지 전자책은 절대 종이책을 대체하지 못합니다. 점토판이 양피지와 죽간으로, 그리고 종이로 완전히 대체된 것은 점토판이 갖고 있는 기능의 99%를 종이로 대체할 수 있었기 때문입니다. 점토판보다 편리하면서 점토판으로 할 수 있는건 종이로도 모두 가능했기 때문에 종이가 점토판을 완전히 대체한 것입니다.


종이책과 전자책을 보면 전자책은 종이책의 기능을 완전히 대체하지 못합니다. 전자책이 종이를 대체할 수 있는 부분은 텍스트를 보여주는 기능 뿐입니다. 그것도 순차적으로 페이지가 넘어가는 책에 한정됩니다. 전자책도 메모, 북마크, 쪽지, 링크 등 다양한 기능을 지원하지만 종이책의 고유 기능을 완전히 대체할 정도로 편리하지 않습니다. 이런 부분에서 전자책이 종이책보다 편해지기 전까지 전자책은 종이책의 대체제로 남을 것입니다.


현재 수준의 전자책이 종이책 영역을 잠식할 수 있는 부분은 페이지 순서대로 읽을 수 있는 텍스트입니다. 텍스트를 읽는 행위가 중요한 책으로 한정됩니다. 텍스트를 읽으며 다른 작업, 예를 들어 메모를 하고, 밑줄을 긋고, 앞 뒤의 다른 페이지를 참고하는 등의 일을 해야하는 책은 여전히 종이책이 편합니다.


텍스트를 읽는 행위가 중요한 책은 소설입니다. 소설, 스토리텔링 형의 자기계발, 쉽게 이해할 수 있는 인문서 등이 전자책에 적합합니다. 이런 책의 비중이 30%입니다. 그렇다면 기사의 내용으로 볼 때 전자책이 종이책을 대체할 수 있는 영역은 거의 다 대체했다는 의미가 됩니다.


종이책을 더 선호한다는 말은, 종이책이 책이 갖춰야 할 다양한 기능에서 전자책보다 편리하기 때문에 더 선호한다는 것입니다. 같은 데이터를 보고 전자책이 제공하는 기능만으로도 충분한 경우 사람들은 전자책으로 대부분 이동했다고 해석할 수도 있습니다. 


분명 스릴러, 로맨스 같은 재미 위주의 소설 분야만 분석한다면 전자책 점유율이 종이책을 앞질렀을 것입니다. 그리고 이 카테고리의 소장용이 아닌 페이퍼백 시장은 전자책 비중이 점점 더 높아질 것입니다.


지금까지는 책이었지만 앞으로는 책이 사라질 분야도 있습니다. 종이사전이 사라지고, 브리태니커가 사라졌듯이요. 피트니스용 책은 앞으로 서점에서 찾기 힘들어질 것입니다. 지금 앱스토어에서 피트니스 앱을 한번 받아보세요. 그럼 제 말에 동의하실거예요. 요리책도 사라질 것입니다. 위키피디아가 브리태니커를 몰아냈듯이 요리책도 인터넷 레시피에 자리를 내줄 것입니다.


이런 부분들까지 고려를 한다면 [미국인들 "책은 종이가 제맛"]이라는 기사 제목에 문제가 있다고 느껴질 거예요.


반응형
posted by 내.맘.대.로 2016. 9. 7. 17:58

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

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

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

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

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

#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.


아주 어려운 문의가 들어왔습니다 ^^

본문에 노트처럼 밑줄을 긋고싶다는 내용이었는데, 처음엔 '별거 아닌데...'라고 생각을 했다가 스타일을 만들면서 CSS로는 해결 불가능하지 않을까 하는 결론을 내렸네요. 자바스크립트를 이용하면 가능할 수도 있지만, 스크립트를 지원하는 유통사 뷰어는 교보eBook 정도여서(국내 유통사 기준으로) CSS만 활용해야합니다. 


결론부터 말씀드리면 본문에 밑줄 긋기는 가능합니다. 하지만 변수가 너무 많아요. 고정 레이아웃(Fixed Layout)이 아니라면 뷰어마다 CSS를 받아들이는 방식이 차이가 있어 모든 유통사 뷰어를 전부 맞추기는 불가능한 것 같습니다. 방법을 더 연구해 봐야겠지만 쉽지 않네요 ^^;


먼저, 제가 찾은 방법을 알려드릴게요.


* 이 예제에 사용한 본문은 토네이도 출판사의 '무엇이평범한그들을최고로만들었을까'에서 일부 발췌했습니다.

** 뷰어 테스트는 교보문고, 예스24, 리디북스, 캘리버를 사용했습니다. 특별한 이슈가 없는 경우 뷰어 이름은 표시하지 않았습니다.


1. span 태그 사용


가장 쉽게 쓸 수 있는 방법입니다. 그리고 가장 확실합니다. 그런데 문의 주신 분이 span 태그를 사용하면 문장이 끝나는 부분에서 밑줄도 끝난다는 문제를 얘기해 주셨어요. 그래서 이 방법은 문의 주신 분이 원하는 방식이 아니었습니다. 


그래도 이 방법이 가장 확실합니다. 만약 본문에 밑줄을 그어야 한다면 2% 부족하더라도 이 방법을 권해드립니다.


#스타일


.line_dotted {

border-bottom : dotted 1px #ff0000;

}


#스타일 적용


<p>노트 배경</p>

<p><span class="line_dotted">30년 전 나는 첫 월급을 받았다. 동네 슈퍼마켓에서 점원으로 일하고 받은 첫 월급봉투에는 그리 많지 않은 돈이 들어 있었다. 겉보기에 대단한 일도 아니었다. 월급은 적고 일은 힘들었다. 전임자가 묻힌 얼룩이 채 지워지지 않은 제복을 입고 상품을 진열하고 바닥을 걸레질하는 일이었다. 무뚝뚝한 점장은 칸막이로 분리된 높은 자리에 앉아 점원들을 감시했다. 그런데도 나는 왠지 그 일을 할 때가 좋았다. 직원들 사이에 동지애가 생겨 가끔 함께 밤 외출을 나가기도 했다. 나는 신속한 계산으로 손님을 만족시키는 나 자신이 자랑스러웠다. 쓸모 있는 사람이 된 기분이었다.</span></p>





본문 끝에서 밑줄이 끝나기 때문에 노트 느낌을 살릴 수 없는 단점이 있음



2. 배경이미지 활용


이 방법은 이미지를 밑줄로 쓸 수 있다는 장점이 있습니다. 다양한 모양의 밑줄이 가능합니다. 제가 사용한 밑줄 배경은 아래 이미지입니다. 



노트 배경 이미지


배경 넣는 방법은 --> http://epubguide.net/182 여기를 참고하세요


이 방법에는 2가지 문제가 있습니다. 


문제1. 글자 크기, 글자의 줄 간격을 고정시켜야 한다.

배경 줄 간격이 고정되기 때문에 글자 크기를 조정해 글자가 줄 간격보다 크거나 작아지면 줄과 글자가 위치가 틀어집니다.


문제2. 뷰어에 따라 다른 결과가 나올 수 있습니다.

다른 뷰어들은 괜찮은데 예스24 뷰어에서 문제가 생기네요. 뷰어에 따라 CSS를 받아들이는 방식이 약간씩 차이가 납니다. 그래서 뷰어에 따라 원하는 결과가 나오지 않을 수 있습니다.


이 방법은 제한된 공간 안에서 적은 분량의 텍스트를 표현할 때 사용할 수 있습니다. 편지나 시를 표현하기 좋겠네요.


#스타일


.note_bg {

background-image : url("../Images/note_bg.png");

width : 100%;

}


.note > p {  /*글자크기, 줄간을 배경이미지에 맞춰 픽셀단위로 고정시켜야 함*/

font-family: "NanumBarunpenR";

font-size : 15px;

line-height : 28px;

margin-left : 1em;

margin-right : 1em;

}



#스타일 적용


<div class="note_bg note"><p><br/>노트 배경</p>

<p>30년 전 나는 첫 월급을 받았다. 동네 슈퍼마켓에서 점원으로 일하고 받은 첫 월급봉투에는 그리 많지 않은 돈이 들어 있었다. 겉보기에 대단한 일도 아니었다. 월급은 적고 일은 힘들었다. 전임자가 묻힌 얼룩이 채 지워지지 않은 제복을 입고 상품을 진열하고 바닥을 걸레질하는 일이었다. 무뚝뚝한 점장은 칸막이로 분리된 높은 자리에 앉아 점원들을 감시했다. 그런데도 나는 왠지 그 일을 할 때가 좋았다. 직원들 사이에 동지애가 생겨 가끔 함께 밤 외출을 나가기도 했다. 나는 신속한 계산으로 손님을 만족시키는 나 자신이 자랑스러웠다. 쓸모 있는 사람이 된 기분이었다.</p>...







다른 뷰어에서는 배경이 잘 표현되지만 예스24 뷰어에서는 문제가 생김

뷰어에 따라 스타일을 적용하는 방식이 다르기 때문에 다른 뷰어에서도 비슷한 문제가 생길 수 있음



3. CSS로 밑줄 그리기


글자 크기를 바꾸면서 span 태그의 문제도 해결할 수 있는 방법입니다. background-image 속성에 이미지 대신 linear-gradient로 배경 줄을 그리는 방법이에요. 이 방법을 쓰면 줄 간격을 글자 크기에 맞춰 조절할 수 있습니다. 


이 방법도 문제가 하나 있습니다. 페이지가 넘어가면서 줄과 글자 배치가 틀어집니다. 이 역시 뷰어의 특성때문이라 CSS로 맞추기에는 한계가 있습니다. 이 방법 역시 편지, 노트, 시 처럼 제한된 공간 안에서 제한된 텍스트를 보여줄 때는 사용할 수 있겠지만 본문 전체에 밑줄을 긋기에는 적절하지 않습니다.



# 스타일


.line_draw > p {

background-image : linear-gradient(#0000ff 1px, transparent 1px);

background-size: 100% 1.8em; /*이미지와 달리 배경 사이즈를 em(글자크기) 단위로 조절할 수 있어 글자크기를 조절할 수 있음*/

}


# 스타일 적용


<div class="line_draw">

<p>30년 전 나는 첫 월급을 받았다. 동네 슈퍼마켓에서 점원으로 일하고 받은 첫 월급봉투에는 그리 많지 않은 돈이 들어 있었다. 겉보기에 대단한 일도 아니었다. 월급은 적고 일은 힘들었다. 전임자가 묻힌 얼룩이 채 지워지지 않은 제복을 입고 상품을 진열하고 바닥을 걸레질하는 일이었다. 무뚝뚝한 점장은 칸막이로 분리된 높은 자리에 앉아 점원들을 감시했다. 그런데도 나는 왠지 그 일을 할 때가 좋았다. 직원들 사이에 동지애가 생겨 가끔 함께 밤 외출을 나가기도 했다. 나는 신속한 계산으로 손님을 만족시키는 나 자신이 자랑스러웠다. 쓸모 있는 사람이 된 기분이었다.</p>...








테스트한 뷰어에서는 페이지가 넘어가면 줄간격이 틀어진다. 스크롤 방식이면 문제가 없지만 페이지 넘김 방식의 뷰어에서는 어쩔 수 없는 현상이다.






결론. 

고정 레이아웃(Fixed Layout)을 사용하거나 EPUB3로 스크립트를 적용하면 본문에 밑줄을 그릴 수 있다. 하지만 모든 뷰어에서 문제 없이 표현되도록 EPUB2에서 CSS만으로는 노트 느낌이 나게 밑줄 긋는건 거의 불가능하지 않을가 싶어요. 방법을 찾으신 분 있으면 공유 부탁드려요 ^^

반응형