[샘플]EPUB에서 그림을 그리자~ 그림판 샘플

Drawingboard(MIT License) js 코드를 활용한 그림판입니다.

아쉽게도 캘리버 뷰어에서만 제대로 작동을 하고
교보eBook 뷰어는 좌우 플립시 페이지 넘김 이외의 액션을 막아서 세로선만 그릴 수 있습니다.
교보 담당자도 이 문제를 해결하는 중이라고 하니, 언젠가는 교보eBook에서도 사용할 수 있을 것 같아요.

UI를 잘 구성하면 활용할 만한 곳이 많을 것 같아요.
그림을 미리 그려넣으면 색칠공부 책을 만들 수 있고
아이들을 위한 낙서장도 될 수 있습니다.

학교 교재에도 쓸 수 있지요.
이걸 만든 것도 교재 기능 검토 요청 때문이었습니다. 

기본 코드는 아주 간단합니다. 샘플 참고하세요.

설정

트랙백

댓글

미디어 오버레이 샘플 & Sigil로 만드는 방법

안녕하세요.


간만에 문의가 들어와 설명드립니다.

미디어 오버레이를 만들고 싶다는 내용이었어요.

요즘 미디어 오버레이 파일을 매주 5~6권식 만들고 있는데 음성 시간 맞추는게 고역이네요.
음성 시간만 맞추면 나머지는 그리 어렵지 않습니다.

설명은 샘플 파일 MO_모비딕_sample.epub 파일로 하겠습니다.
IDPF에서 공식 배포하는 MO(Media Overlay) 샘플 파일을 조금 수정했어요.

MO가 무엇인지 궁금하시면

MP3로 녹음한 내용을 책의 텍스트와 싱크시켜 MP3가 읽어주는 부분을 하일라이트 하는 기술입니다.
어학책이나, 유아동 책, 낭독 시집 같은 책에 유용해요.
요즘 뜨고 있는 오디오북도 이 기능을 활용할 수있습니다.

밀리의서재 리딩북이 MO를 활용한 서비스예요.

1. EPUB2 로 되어 있다면 EPUB3로 수정하세요.
미디어 오버레이는 EPUB3부터 지원합니다. 그러니 EPUB2 파일은 EPUB3로 변경을 해야합니다.

참고  EPUB2를 EPUB3로 변환해 보자

2. smil 파일을 만들자

smil 파일은 이렇게 되어 있습니다.
아래 내용을 그대로 복사한 후 수정해 사용하셔도 되요.
========

<?xml version="1.0" encoding="utf-8" ?>

<smil version="3.0" xmlns="http://www.w3.org/ns/SMIL" xmlns:epub="http://www.idpf.org/2007/ops"><body><seq epub:textref="../Text/chapter_001.xhtml" epub:type="chapter" id="id1">

<!--미디어 오버레이 처리가 될 본문 파일 주소입니다-->


<par id="heading1"><text src="../Text/chapter_001.xhtml#c01h01"/>

<audio clipBegin="0:00:24.500" clipEnd="0:00:29.268src="../Audio/mobydick_001_002_melville.mp4"/>

</par>

<!--오디오 한 구간의 시작과 끝입니다.

예를 들어

It is a way I have of driving off the spleen and regulating the circulation.

라는 부분을 MP3와 싱크시키고 싶다면 MP3에서 이 부분이 시작되는 시간(clipBegin)과 끝나는 시간(clipEnd)을 적어줍니다.

그리고 이 본문의 위치와 ID를 이 부분에 넣어줍니다. 본문 ID는 뒤에서 설명드릴게요.

<text src="../Text/chapter_001.xhtml#c01h01"/>


끝으로 MP3 파일의 위치를

src="../Audio/mobydick_001_002_melville.mp4"

여기에 넣어줍니다.


-->


<par id="word1"><text src="../Text/chapter_001.xhtml#c01w00001"/>

<audio clipBegin="0:00:29.268" clipEnd="0:00:29.441" src="../Audio/mobydick_001_002_melville.mp4"/>

</par>


<!--오버레이 처리가 되야 하는 문단이 2개 이상일 경우 par ID를 변경해 줘야 합니다. ID는 word1, word2, word3... 등 편집자가 임의로 지정해 줄 수 있습니다. -->

<par id="word1">

</seq>

</body>

</smil>

=========


smil 파일은 책 전체를 하나의 파일로 만들 수 있고, 각 챕터별로 나눠서 만들 수 있습니다.
작업하는건 각 챕터별로 나누는게 편해요.


3. smil 파일이 준비되었다면 opf 파일을 수정합니다.

3.1 duration 추가
<metadata>....</metadata>

이 사이에 아래 내용을 추가합니다.

<meta property="media:duration" refines="#chapter_001_overlay">0:10:00.000</meta>

<meta property="media:duration">0:10:00.000</meta>

<meta property="media:active-class">-mp3-active</meta>


파란색은 한번, 빨간색은 파일 수만큼 들어가야 합니다.

예를 들어 챕터가 2개이고 smil 파일을 2개 만들었다면

<meta property="media:duration" refines="#chapter_001_overlay">0:10:00.000</meta>

<meta property="media:duration" refines="#chapter_002_overlay">0:10:00.000</meta>

<meta property="media:duration">0:20:00.000</meta>

<meta property="media:active-class">-mp3-active</meta>


이렇게 되야합니다.

3.2 media overlay 속성 추가

<item id="xchapter_001" href="Text/chapter_001.xhtml" media-type="application/xhtml+xml" media-overlay="chapter_001_overlay"/>


오버레이가 연결된 본문 파일의 item 항목을 찾아 media-overlay="MO_file_ID"를 추가해 줍니다.

파일 ID는 item 에서 확인할 수 있습니다.

<item id="chapter_001_overlay" href="Misc/chapter_001_overlay.smil" media-type="application/smil+xml"/>


4. 본문에 MO ID 추가


이제 본문에 Media Overlay ID를 추가하면 끝납니다.

1번에서 이런 부분이 이런 부분이 있었어요.


<par id="heading1"><text src="../Text/chapter_001.xhtml#c01h01"/>


경로 제일 끝에 있는 #c01h01 이게 오버레이 ID입니다.

본문 한 문장씩 mp3를 끊었다면 ID 하나가 문장 하나가 될거예요.


<span id="c01s0006">With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship.</span> <span id="c01s0007">There is nothing surprising in this.</span>


본문 문장을 찾아 smil에서 끊은 구간에 맞게 ID를 연결해 줍니다.


복잡해 보이지만 하나씩 천천히 따라해 보면 어렵지 않습니다.

그리고 Sigil의 찾아바꾸기 기능을 이용하면 책 한권 문장을 싱크하는 것도 그리 오래 걸리지 않아요.

물론, MP3 자르는건 시간을 줄일 수 없지만 ㅜ.ㅜ



설정

트랙백

댓글

전자책은 PDF가 아니다. https://brunch.co.kr/@trip/64



얼마 전에 도착한 따끈한 기획회의를 무심히 펼쳐보다가 '전자책은 PDF가 아니다'라는 제목을 봤습니다.

전자책 강의를 하면서 '전자책은 종이책이 아니다. 종이책 처럼 만들려고 하지 마라'라는 얘기를 늘상 하고 다니던 터라
제목만 보고도 어찌나 반가웠는지 모릅니다.

'전자책은 종이책이 아니다. 종이책 처럼 만들지 마라'
아주 중요하다고 생각하는 내용을 다른 사람들에게 얘기하는데 아무도 귀 기울이지 않고,
'네가 책이 뭔지 알아?'라는 눈총을 받으면, 출판업계에서만 10년 넘게 일해온 당사자는 조금 억울합니다.
하지만 워낙 보수적인 출판계다보니, 종이책에 대한 애정이 크다 보니, '전자책' 하면 우선 거부하는 기분이 들어요.

그런데 이 제목을 보는 순간, 글쓴이가 무슨 말을 하려는지 알겠습니다.
그래서 누가 이런 얘기를 하나, 그것도 기획회의에... 하는 관심에 지은이를 보니 카카오 관계자. 역시 출판쪽 사람은 아니었네요.

전자책 강의를 할 때 UI와 UX에 대해 얘기를 합니다. EPUB을 제작하더라도 UI와 UX에 신경을 써야 한다고요.
이런 얘기를 하면 '뭔 헛소리야' 하는 표정으로 바라보는 사람들이 많지만, 몇 년째 UI와 UX에 대해 강조를 하고 있습니다.
전자책에서는 UI와 UX가 아주 중요하거든요.

"UX는 IT 분야에서 매우 중요한 요소다. UX는 프로덕트의 성패를 좌우한다....역으로 UX 고려 없이 단순하게 전달 매체의 전환만 이뤄진다면 성공하기 어렵다. 책에 담긴 콘텐츠를 그대로 모바일 화면에 담는다고 모두 전자책이 되는 건 아니다. 책은 양손을 활용하는 매체고, 스마트폰은 한 손을 주로 활용하는 디바이스다. 전햐 다른 UX다.
모바일 시대가 됐고, 많은 콘텐츠가 디지털화되고 있다. 가장 흔한 실수는 UX의 고려 없는 1차원적 디지털화다. 신문의 PDF 서비스가 대표적이다. ...UX를 고려하지 않은 전형적인 디지털화 방식이다."

이 글은 책의 내용에 대해 얘기하지 않습니다. 글쓴이의 실패와 성공 경험에서 나온 전자책의 UX에 대해 얘기하고 있습니다.
EPUB3 콘텐츠를 만들며 전자책은 기획이 가장 중요하다고, 종이책을 그대로 담으면 아무도 사지 않는다고, 정답 누르면 답이 체크된다고 EPUB3는 아니라고, MP3가 들어갔다고 EPUB3가 아니라고 입에 침이 마르도록 강조를 해도, 결국엔 종이책을 통으로 담아달라는 편집자들을 너무 많이 만납니다. 
처음엔 이해하는 듯 하다가도, 제작이 진행되면 결국 종이책 내용이 전부 다 전자책에 담기고 마는게 현실이지요. 결국 스마트폰으로 보는 MP3들어간 종이책이 됩니다.

EPUB2에서도 UI와 UX가 있을까요?
당연히 있습니다.
신국판으로 흰색 바탕에 편집자가 선택한 글꼴로 인쇄된, 무게감 있는 종이책을, 페이지를 넘겨야 하는 종이책을, 연필로 메모를 하고 밑줄을 그을 수 있는 종이책을, 4인치~10인치, 수천가지 해상도의 LCD, LED, EPD 디스플레이에서 볼 수 있도록 변환하는 작업이 전자책 제작입니다. 
똑같은 스타일이라도 교보, 리디, 예스, 알라딘 뷰어에서 모두 다르게 보입니다. 이미지 배치, 표에 담긴 글자 크기, 표와 이미지의 캡션.... 사용자가 바꿀 수 있는 글꼴, 글자크기, 줄간격, 배경색..... 이런 것들을 교보, 리디, 예스, 알라딘 뷰어에서 독자들이 만족도 높은 UX를 경험하도록 만들어야 하지요.

독자들은 '대충 만들어도 별 차이 없다'고 얘기할 지도 모릅니다.
그건, 독자들의 전자책 품질에 대한 기대치가 하향평준화 됐기 때문입니다.
독자들도 깔끔하게 잘 만든 전자책을 보면 좋아합니다.

'누구나 쉽게 만들 수 있는 전자책'이 아닌, 독자들이 다양한 화면에서 만족할 만한 전자책을 만들고 싶다면, 전자책을 만들 때도 UI와 UX를 고민하세요.


설정

트랙백

댓글

블로그의 글들이 책으로 엮였습니다 - Sigil Using Bible

Sigil 사용 설명서 2018.08.17 16:46

 
  
 Logo
 

내맘대로의 EPUBGUIDE.NET 

운영제가 제공하는 

전자책 제작노하우

 

Vol 2 • 2018년 8월 1인미디어 • Facebook


 

 

책이름 | 제대로 된 전자책 한권 잘 만들기

Sigil Using Bible(초급편)
지은이 | 박웅영
감수자 | 남동선, 성대훈
펴낸날 | 2018년 7월 16일
판 형 | 신국판(152×225)
페이지 | 336쪽
가 격 | 19,900원
분 류 | 국내도서>IT/컴퓨터>그래픽/멀티미디어
ISBN | 979-11-961362-1-5 93000

 

 
 
(08377) 서울특별시 구로구 디지털로 33길 50, 703호 전화:02-6404-8587 팩스:02-6008-2708 내용 문의: akdoli@indimedialab.com
 
 

제대로 된 전자책 한 권 잘 만들기 

Sigil Using Bible

내맘대로의 EPUBGUIDE.NET 운영자가 제공하는 전자책 제작노하우
 
Placeholder

“몇 시간만 배우면 누구나 전자책을 만들 수 있다!?”
이 말은 종이와 연필만 있으면 누구나 글을 쓸 수 있고,
물감만 있으면 누구나 그림을 그릴 수 있다는 말과 다르지 않다.
이 책은 ‘누구나 만들 수 있는 전자책’ 제작 스킬을 설명하지 않는다.
누구나 쉽게 만들 수 있는 전자책을 넘어
아무나 쉽게 따라할 수 없는 고품질 전자책을 만들기 위해 필요한
전문 지식을 담고 있다.
1편은 초보자도 쉽게 EPUB을 만드는 방법을...
2편은 전문가도 까다로운 스타일 편집 방법을...
이 두 권으로 당신도 ‘아무나 만들 수 없는 전자책’을 만드는
전자책 제작 전문가가 될 수 있다!

 
 
 
Placeholder
 

이 책에서 이야기할 것들

"내맘대로의 EPUBGUIDE.NET"을 책으로 엮는다!
 

누구나 쉽게 전자책(EPUB)을 만들 수 있다고?
지금까지 전자책을 소개했던 사람들은 누구나 쉽게 전자책을 만들 수 있다고 강조했다. 국내 최초로 EPUB을 상업적으로 도입하며 전자책 뷰어, 유통 플랫폼 개발, 신규 전자책 서비스 도입에 앞장서 온 EPUB 1세대 내맘대로 출판사의 박웅영 대표 생각은 다르다. 그는 아무나 유통 가능한 품질의 EPUB을 만들 수 있는 것은 아니라고 말한다.
전자책 제작에 관심있는 사람이라면 박웅영 대표는 몰라도 ‘내맘대로의 EPUBGUIDE.NET’을 모르는 사람이 없다. Sigil 사용법이 궁금해서, EPUB 제작 방법이 궁금해서, 까다로운 스타일을 편집하는 방법이 궁금해서, 오류 해결 방법이 궁금해서 인터넷을 검색해 보면 결국에는 EPUBGUIDE.NET과 연결된다. EPUB과 관련된 어떤 정보를 찾아도 EPUBGUIDE.NET으로 연결되다 보니 출판계에 있는 한 전자책 담당자는 ‘전자책 편집자의 성지’라고 까지 말한다.
Sigil Using Bible은 ‘내맘대로의 EPUBGUIDE.NET’의 노하우를 고스란히 담은 초보자를 위한 전자책 제작 입문서다.
Sigil의 숨겨진 기능까지 속속들이 파악하고 있는 박웅영 대표가 초보 편집자들이 꼭 활용해야 하는 기능과 중급으로 넘어가려면 알아야 하는 기능을 정리해 책에 담았다. Sigil의 주요 기능을 익힐 수 있고, ‘이상한 나라의 앨리스’를 직접 만들어 보면서 각 기능을 전자책 편집에 어떻게 활용하는지 상세히 설명한다. 그리고 전자책 편집을 위해 꼭 필요한 HTML과 CSS의 기초를 설명하고, HTML과 CSS로 전자책에 스타일을 적용하는 방법이 담겨있다. 이 책을 처음부터 끝까지 따라가다 보면 ‘이상한 나라의 앨리스’를 전자책으로 완성해 볼 수 있다는 것도 이 책의 큰 장점이다.
EPUB은 IDPF(International Digital Publishing Forum)에서 제안한 전자책 표준 포맷으로, 지금은 ISO 표준으로 등록되어 있고 W3C(웹 표준을 관리하는 단체)에서 관리하고 있다. 전자책에 대해 잘 모르는 사람들은 우리나라가 전자책 표준이 없어 전자책 산업이 발전하지 않는다고 하지만 이는 완전히 잘못된 정보다. 국내에서도 2011년에 한국정보통신기술협회(TTA)에 단체 표준으로 등록되어 있다. 표준이라 하더라도 등록만 되고 사용하지 않는 경우가 많이 있지만 EPUB은 다르다. 교보문고, 예스24, 알라딘, 리디북스 등 국내 주요 유통사는 모두 EPUB으로 전자책을 유통한다. 애플, 구글, 코보, 유럽의 아마존이라 불리는 토리노 그룹 등 전 세계 전자책 유통사들도 모두 EPUB을 사용하고 있다.
박웅영 대표는 국내 최초로 EPUB을 상용화 시킨 장본인이다. 2009년 이전에는 국내 어느 유통사도 EPUB으로 전자책을 판매하지 않았다. 교보문고는 PDF로 서비스를 했고, 당시 아이폰에서 처음으로 전자책 서비스를 시작한 리디북스 역시 EPUB이 아닌 독자적인 형식을 사용했다.
박웅영 대표는 당시 교보문고에서 일하며 스마트폰과 전자책 단말기가 주목을 받자 4~5인치 크기의 작은 화면에서는 PDF가 적합하지 않다고 판단했다. PDF를 대체할 방법을 찾다 국내에는 생소했던 EPUB을 사용하기로 결정하고 EPUB 뷰어 기획에 참여했다. 그는 EPUB 도입 이외에도 O2O 개념조차 생소하던 시기에 바로드림 서비스를, 피쳐폰에서 종이책을 주문하는 국내 최초의 모바일 서점을 만드는 등 시대에 한 발 앞선 서비스로 온라인 출판 시장을 주도한 인물이다.
전자책 서비스를 위해 EPUB을 도입하기로 결정한 후 가장 큰 문제는 EPUB의 제작이었다. 당시에는 제대로 된 저작 도구도 없어 뷰어에서 테스트 할 EPUB 샘플을 만들기도 어려웠다. 박웅영 대표는 영문으로 된 IDPF의 EPUB 표준 문서를 보며 메모장과 HTML 편집 프로그램으로 EPUB을 만들며 여기서 익힌 내용을 블로그에 정리해 올렸다. 이때만 해도 출판사에서 만든 EPUB은 표준을 제대로 지키지도 않고 오류가 많아 뷰어를 강제 종료시키는 등 수많은 문제들이 생겼다. 유통사에서는 한달에 2,000종씩 등록되는 EPUB 파일이 10개 중 5~6개 수준으로 문제가 생겨 애를 먹었다. 전자책 매출도 얼마 되지 않던 시기여서 EPUB에 문제가 있으니 수정해 달라고 하면 출판사는 ‘안 팔면 그만’이라며 외면했다. 이런 문제를 해결하려면 EPUB을 제작할 때 제대로 만드는 방법 밖에 없다. 그러나 참고할 만한 자료는 IDPF의 표준문서 뿐이었고, 그나마 영어로 된 기술문서라 일반인들은 쉽게 접근하기 어려워 전문적으로 전자책을 제작한다는 업체가 만든 EPUB 조차 오류 투성이인 경우가 많았다.
박웅영 대표는 뷰어를 개발하고 수많은 출판사들의 EPUB을 분석하며 얻은 지식을 공유하는 방식으로 이런 문제를 해결하려고 노력했다. 뷰어에서 오류가 생기는 수많은 EPUB 파일을 열어 보고 오류의 원인을 찾아 수정하며 빈번히 발생하는 EPUB의 오류들을 정리해 블로그에 올렸다. 전자책은 텍스트 파일이라 생각해 편집에 신경을 쓰지 않던 출판사를 위해 전자책에서도 다양한 스타일의 편집을 할 수 있음을 보여주고 종이책과는 다른, 전자책만의 스타일 편집 기법도 제공했다. 이렇게 10년 가까이 EPUB에 쌓인 블로그가 ‘내맘대로의 EPUBGUIDE.NET’이다.
Sigil Using Bible은 EPUBGUIDE.NET의 노하우가 고스란히 담겨있는 초보자를 위한 EPUB 제작 입문서의 완결판이다. 전자책 편집을 처음 시작하는 사람이라면 결국 ‘내맘대로의 EPUBGUIDE.NET’을 방문해야 하듯이 다른 책으로 전자책 제작 공부를 시작했더라도 결국 이 책으로 마무리를 할 수 밖에 없을 것이다.
Sigil 사용법을 어느정도 알고, 소설처럼 간단한 전자책을 만들어 본 사람이라면 이 책은 쉽게 느껴질 수 있다. 초급에서 중급 전자책 편집자로 넘어가려는 사람, 복잡한 편집이 어려운 사람은 다음에 나올 ‘HTML과 CSS 편’을 기대해 볼 만하다. 국내 최고의 EPUB 전문가 둘이 손을 잡고 EPUB의 개념부터 고급 편집 기술까지 한권으로 끝낼 책을 준비하고 있다니 말이다.

 


 

[책 속으로] ------------------------------------------------

HTML과 CSS를 제대로 활용하기 위해서는 이를 제대로 지원하는 편집 프로그램을 써야합니다. 쉽게 익힐 수 있는 훌륭한 WYSIWYG방식의 편집 프로그램이 많이 있지만 스타일 편집의 한계, 불필요한 코드의 삽입 그리고 높은 사용료를 내야 하는 단점이 있습니다. Sigil은 Open Source 프로그램으로 누구나 무료로 사용할 수 있으며 HTML과 CSS에 대한 코딩이 표준에 적합할 수 있도록 하는 다양한 검증 기능 및 제작 환경을 지원하고 EPUB2, EPUB3에 대한 저장 형식을 제공합니다. 그리고 전 세계의 수 많은 전자책 제작자들이 서로 힘을 합쳐 EPUB 제작에 꼭 필요한 기능을 제안하고 수 많은 개발자들이 이를 적용해 EPUB 제작에 최적화 되었습니다.
- 13쪽
 
전자책은 어떤가요? 전자책에 담긴 논어는 종이책에 담긴 논어와 다를까요? 다르지 않습니다. 전자책도 점토판, 죽간, 종이책과 같이 글자를 담는 그릇일 뿐입니다. 전자책 역시 종이책처럼 글자를 읽어 정보를 얻습니다. 전자책에서 정보를 얻는 방법은 수천년 전에 만들어진 점토판에서 정보를 얻는 방법과 전혀 다르지 않습니다. 그릇에 담을 수 있는 내용의 형식적인 부분 및 표현의 방법 등이 다르다고 할 수 있으나 정보와 지식을 전달한다는 관점에서는 전자책과 종이책의 차이는 죽간과 종이책의 차이보다 크지 않습니다.
전자책 하면 종이책과 다른 특별한 무언가가 있을 것이라고 생각하는 분들이 의외로 많습니다. 전자책은 종이책보다 특별하지 않습니다. 종이책을 다양한 디바이스에서 볼 수 있도록 제작된 형태가 전자책입니다.
- 20쪽
 
HTML이 문서의 구조를 만든다면 CSS(Cascading Style Sheet )는 문서의 모양을 꾸며줍니다. 글꼴, 글자 크기, 색, 상하좌우 정렬, 배경색, 테두리, 레이아웃 등 문서편집기의 편집기능이 CSS의 역할입니다. HTML 태그는 역할에 따라 고유한 스타일이 있습니다.

- 152쪽
 
 


 
 

설정

트랙백

댓글

Sigil 업데이트 0.9.10

Sigil 사용 설명서 2018.08.17 09:05

Sigil 0.9.10 업데이트가 공개됐습니다.



주요 변경 사항은 다음과 같습니다.


1. 플러그인 아이콘을 변경할 수 있다.

* 플러그인 도구상자 아이콘은 콘센트 모양으로 5개가 놓여 있어 자주 쓰지 않을 경우 몇번에 어떤 플러그인을 매칭시켰는지 기억이 안날 때가 있었는데, 이제 아이콘으로 구분이 가능해 졌습니다.


2. 사용자가 책보기/코드보기 스타일을 CSS 형태로 관리할 수 있게 되었습니다.

글자 크기 외에는 책보기/코드보기 스타일을 변경하지 않아 저에겐 유용해 보이지 않네요. 스타일을 변경해 사용하는 분들이라면 컴퓨터를 포멧하거나 부득이한 이유로 Sigil을 다시 설치 해야 할 때 편리할 것 같습니다.


3. Sigil User Guide가 업데이트 되었습니다.

드디어 0.7.x 버전에서 0.9.x 버전으로 업데이트 되었네요.

업데이트 된 버전은 시간나는 대로 정리/번역해 블로그에 올리겠습니다.

가이드는 여기(https://sigil-ebook.com/documentation/)에서 다운로드 받을 수 있습니다.


4. 특수문자에 그리스 알파벳과 수학 기호가 추가됐습니다.

여전히 한국어에서 많이 사용되는 기호가 부족하긴 하지만, 그래도 쓸만한 기호들이 많이 보입니다.


그 외에 강제종료 관련 버그가 많이 개선되었고, 캘리버 관련 업데이트도 많이 있습니다.

자세한 사항은 Sigil 공식 홈페이지에서 확인하시기 바랍니다. 

설정

트랙백

댓글

전자책 만들 때, 혹은 검수할 때 꼭 확인하고 주의해야 하는 사항들

전자책을 만들거나 검수할 때 주의해야 하는 내용이 있습니다.

어떤 것들은 EPUB Check로 적합성 검사를 하면 나오지만
EPUB Check에도 걸리지 않지만 명백한 잘못, 혹은 특별한 이유 없이 해서는 안되는 내용도 있어요.

직접 EPUB을 만들거나, 외주로 작업한 EPUB을 검수할 때 아래 항목들만 꼼꼼히 살펴도 '형편없다' 소리는 듣지 않을거예요.

제가 말하는 '형편없다'는, 스타일, 편집 방법 등에 관한 것이 아닙니다.
스타일을 어떻게 잡든, 그건 편집자 마음입니다. 
아무런 스타일도 적용하지 않았다고 해서 이 전자책을 못만들었다고 하지 않습니다.
가독성이 현저히 떨어지는 스타일이라도, 편집자가 그렇게 의도했다면 그건 좋다 나쁘다를 판단할 수 없습니다.
들여쓰기를 90%로 잡더라도 독자 입장에서 '책 보기 불편한 편집'이라고 말 할 수는 있겠지만
다른 편집자가 '들여쓰기 90%는 잘못된 편집이야'라고 말해서는 안됩니다.

제가 얘기하는건, EPUB 표준, HTML, CSS의 기본 규칙에 대한 부분입니다.
당연히 지켜야 하는 규칙을 지키지 않았을 때 저는 '형편없다'고 얘기합니다.

1. p 태그 대신 div 태그를 쓴다.

초기에 이런 책이 정말 많았습니다. 2009년, 2010년도에 만들어진 책들 보면 본문 문단을 p태그 대신 div태그로 처리한 책이 정말 많았습니다. 요즘에는 이런 책이 없을 줄 알았는데 여전히 눈에 보이네요.
예를 들면 이런 코드입니다.

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


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


이렇게 만들어도 EPUB Check는 오류로 잡아내지 않습니다. EPUB Check는 태그 안에 있는 내용이 무엇인지 까지 구분을 할 수 없기 때문에 코드 규칙만 맞다면 오류로 처리하지 않아요.
하지만 div 태그와 p태그의 쓰임은 완전히 다릅니다. 본문 문단을 p태그 대신 div 태그로 썼다면 명백한 html 정책 위반입니다. 뷰어에서 제대로 보이고 EPUB Check에서 오류라고 뜨지 않아도 이렇게 되어 있으면 잘못 만들어진 것입니다.

검수할 때 p 대신 div로 되어 있다면 무조건 다시 만들라고 하세요.


2. p 태그 하나에 br 태그로 문단을 나눈다.

이런건 절대 없을 것 같은데 의외로 종종 눈에 보입니다. 1번이 흔하다면 이건 정말 드물게 보이는 문제입니다.

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

<br/>

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

<br/>

그게 딱히 특별할 것이라고는 없었다.---중략--- 그리고 운좋게도 토끼가 울타리 바로 밑의 큰 토끼굴로 쏙 들어가는 것을 볼 수 있었다.

<br/>

그 즉시, 앨리스는 도대체 어떻게 다시 빠져 나올 건지는 생각조차 안하고 토끼를 쫓아 굴로 뛰어들었다.

<br/>

토끼굴은 터널처럼 곧게 이어지는듯 하더니 갑자기 아래로 푹 꺼져버렸다. 너무 갑작스러워 멈추어야 겠다는 생각조차 할 시간이 없어서, 상황을 알아차렸을 때에는 이미 아주 깊은 우물속으로 떨어지고 있었다.</p>


문단과 문단은 p태그로 묶여야 하는데, 줄바꿈 태그로 줄을 바꾼 경우입니다.
만약 누군가에게 제작을 맡겼는데 이렇게 만든다, 그럼 절대 그 사람에게는 제작을 맡기지 마세요.
p 대신 div를 쓴건 그래도 이해해 줄 만한 부분은 있습니다. 하지만 이렇게 만들었다면 기초도 모르는 사람이에요.


3. 제목 태그로 스타일을 대신한다.

html 태그 중 글자 크기에 영향을 주는 태그는 거의 없습니다.
<big>, <small>이 편집용 태그이고
h1~h6가 제목 태그로 글자 크기를 변경합니다. 그 외에는 거의 없지요.
그래서 글자 크기는 css를 이용해 수정해야 합니다.

그런데 이런 코드들이 너무 많이 보입니다.
아주 흔하게 볼 수 있는 코드예요.

<h4>제1장</h4>

<h2>토끼굴 속으로</h2>




이 코드로 가운데 정렬을 하면 이렇게 보입니다.
h4는 본문 글자와 비슷한 크기, h2는 본문보다 글자가 큽니다. 
그래서 서로 다른 글자를 표현할 때 제목 태그를 쓰는 것 같은데,
이건 CSS도, HTML도 모르는 사람만이 할 수 있는 편집입니다.

간혹 이건 문제 없다고 우기는 사람들을 봅니다. EPUB을 전문으로 제작한다는 사람들 중에서도 문제 없다고 우기는 사람들이 있어요. 이런 사람들에게는 절대 제작을 맡기지 마세요. 

이걸 종이책만 알고계신 분들이 이해하기 쉽게 설명을 드리자면,

4도 인쇄로 본문 글자를 검은 색으로 인쇄해 놓고
'4도로 인쇄하든, 검정 잉크로 인쇄하든 본문 글자가 검은 색이면 된거 아니냐'

라고 주장하는 것과 비슷하다 생각하시면 됩니다. 
이런 인쇄소에 인쇄를 맡기시겠어요? 


4. 제목은 가능하면 제목 태그로, EPUB3라면 반드시 제목 태그로.

제목은 EPUB2와 EPUB3의 규칙이 조금 다릅니다.
EPUB2에서는 제목을 h1~h6 태그로 지정하라고 명시되어 있지는 않습니다.
강제 조항은 아니지만 제목 태그로 제목을 감싸지 않을 이유가 없다면 제목 태그로 감싸는게 좋습니다.

EPUB3, EPUB for Education, 장애인 접근성 강화 정책에서는 제목 태그는 반드시 제목 태그를 사용해야 합니다.

5.2.4. EPUB 내비게이션 문서 정의(EPUB Navigation Document Definition)
가. nav 요소: 제약(The nav Element: Restrictions)
...
각 nav 요소는 내비게이션 목록의 제목을 나타내는 선택적 머리말을 포함 할 수 있다. 머리말은 반드시 [HTML5] h1 through h6 요소 또는 hgroup
중 하나여야만 한다.

EPUB2 파일은 언제든 EPUB3로 변환해 판매할 수 있습니다.
이때 제목이 헤더로 되어 있지 않다면 모든 제목을 다시 수정해야 합니다.

그리고 제목을 헤더로 감싸면 제목 편집이 쉽습니다.
종이책에서는 불가능한, 소제목, 소소제목까지 모두 목차에 넣어 독자들의 편의를 높일 수 있습니다.

참고로 제목을 헤더로 묶긴 했는데 이런 식이라면.... 초급 수준의 편집자일거예요. 그러니 초급 수준의 비용이 아닌 중고급 이상의 비용을 요구한다면 제작을 맡길 때 고민을 해보세요.

* 장 번호와 장 제목을 2줄로 나누고 각각 다른 스타일을 지정해 달라고 했을 때 장 번호와 제목을 각각 다른 블럭태그로 감싼다면 초보일 가능성이 높습니다.

<h3 class="ch_number">제1장</h3>
<h3>토끼굴 속으로</h3>

* 중급 이상 편집자라면 이처럼 제목 한줄은 하나의 블럭 태그를 사용해 편집합니다. 이렇게 해도 요구하는 스타일은 전부 맞출 수 있습니다.
<h3><span class="chap_title">제1장</span> 토끼굴 속으로</h3>

5. 제목 태그는 구분해서 쓴다.

제목은 부, 장, 절, 소제목 등으로 구분해서 태그를 사용해야합니다.
<h3>로 장 제목을 사용했는데 절 제목 역시 <h3>로 사용하면 안됩니다.
HTML은 문서의 구조를 만드는 언어이기 때문에 각 제목의 구조가 잘 정리되어 있어야 합니다.

제목 태그를 구분하지 않으면 목차 자동 생성시 모든 제목이 같은 레벨로 표시됩니다.
이걸 하나씩 수정해 줘야하는데, 구조적으로 절못된 상태에서 제목만 수정을 한다고 문서의 구조가 바로잡히지는 않아요.

태그를 구분해 써야 하는 이유는 또 있습니다.
장애인 접근성을 위해서지요.
장애인 접근성은 HTML의 구조와 아주 밀접합니다.
부 제목과 장 제목, 절 제목이 모두 h3로 되어 있으면, 시각장애인들에게 이 책은 부도, 장도, 절도 없는 그냥 같은 레벨의 제목이 있는 책이 되어 버립니다.

그러니 제목 태그는 반드시 책의 구조에 맞춰 구분해 사용해야 합니다.



6. 인디자인에서 변환시 태그 정리가 안된다.

이건 오류라고할 수 없지만, 제작 비용에 따라 강력하게 요구할 수 있는 부분입니다.
제작비가 아주 저렴하다면... 저라도 태그 정리를 안할 것 같아요. 하지만 일정 수준 이상의 제작비를 지불했는데 태그정리가 안돼있다면, 전부 정리해 달라고 하세요.

태그 정리가 안됐다고 해도 문제는 없습니다...라고 할 수 있지만, 문제가 되기도 합니다.
수정을 하거나, 추가편집을 하거나, 어떤 추가적인 작업을 하더라도 이런 코드들 때문에 작업 시간으 더 걸릴 수있어요.
그리고 뷰어에서 열리는 속도가 느려지고, 간혹 이로 인해 뷰어의 오류가 생길 수있습니다.

* 이런게 태그 정리가 되지 않은 상태입니다. 이렇게 제작하는 곳이 정말 많아요. 
<p>스티브 잡스<span class="txt_sub">(</span><span class="txt_sub">S</span><span class="txt_sub">t</span><span class="txt_sub">e</span><span class="txt_sub">v</span><span class="txt_sub">e</span><span class="txt_sub">n</span> <span class="txt_sub">P</span><span class="txt_sub">a</span><span class="txt_sub">u</span><span class="txt_sub">l</span> <span class="txt_sub">J</span><span class="txt_sub">o</span><span class="txt_sub">b</span><span class="txt_sub">s</span><span class="txt_sub">)</span></p>

* 이런 태그는 이렇게 보여야 합니다. 
<p>스티브 잡스<sub>(Steven Paul Jobs)</sub></p>
혹은 이렇게
<p>스티브 잡스<span class="txt_sub">(Steven Paul Jobs)</span></p>

그냥 보기에도 뭐가 문제인지 알겠지요? 두 코드의 뷰어 표현의 차이는 전혀 없습니다. 완전히 똑같이 보여요.

저도 초급자들에게 강의 할 때 이런 코드는 건드리지 않아도 된다고 설명합니다.
오류에 대처할 정도로 실력이 되지 않는데 잘못 건드렸다가 코드가 꼬여버리면 초급자들은 해결하지 못하고 처음부터 새로 만들어야 할 수도 있거든요.
그래서 확실히 정리할 수 있지 않다면, 그냥 두라고 하는거지요.

하지만 뒤에 하나 덧붙입니다.
돈 받고 만들거면, 확실히 정리 하라고요.
다시 말하면 이 정도는 정리할 실력이 되지 않으면 돈 받고 다른 출판사의 귀한 콘텐츠를 엉망으로 만들지 말라는 소리입니다.
혼자 연습삼아 만들 때와, 전문 제작자가 되서 출판사의 돈을 받고 제작할 때는 자세가 달라야 하니까요.

뭐, 그래도... 40 ~ 50만원 받아야 할 콘텐츠를 10만원 주면서 만들어 달라고 하면, 전자책 제작자도 대충 10만원 어치만 만드는 것까지 뭐라 하지 않습니다 ^^;


전자책 만드는 분들이라면 5번 빼고는 '설마 이렇게 만들겠어?'라고 생각하실 거예요.
그 정도로 초보의 초보의 초보적인 수준의  문제들입니다.
그런데 제가 유통사에 있을 때 10개 중 3~4개에서 위에 열거한 문제들을 발견했습니다.
그리고 요 며칠 작업한 책들에서도 같은 문제들이 보였습니다.

제작비를 주고 만들었는데 이런 수준이라면 제작비를 돌려받아도 된다고 생각합니다.
문제는, 출판사에서 검수를 잘 안한다는거예요 ㅜ.ㅜ
뷰어에서 제대로 보이면 문제 없구나 생각하고 넘어가니 저런 제작자들이 계속 생기는거지요.

검수하는 분들은 많이 알 필요가 없습니다.
아주 기본적인 것만 몇가지 관심 있게 기억해 두고
EPUB이 왔을 때 Sigil로 열어서 확인해 보시면 되요.
그럼 지불한 돈보다 형편 없는 EPUB을 받지는 않을거예요.


설정

트랙백

댓글

Pdf 변환시 폰트 저작권에 유의하세요.

분류없음 2018.07.01 08:24

http://m.biz.khan.co.kr/view.html?artid=201806301251001&code=920100


폰트 업체들이 PDF 내장 폰트를 문제삼기 시작했내요.

PDF 변환할 때 아웃라인으로 저장하면 이 문제를 피할 수 있습니다.


설정

트랙백

댓글

무료로 사용할 수 있는 전자책 글꼴(무료 폰트) Guide

이전 내용은 이곳에서 확인하시기 바랍니다.

http://epubguide.net/245


전자책에 무료로 쓸 수 있는 글꼴을 모았습니다.

글꼴의 저작권(라이선스), 제작처, 받을 수 있는 경로, 그리고 글꼴파일이 지원하는 언어(한중일, 한글 고어, 기본 특수문자 세트 등), 글자 크기별 모양 등을 한번에 확인할 수 있습니다. 


다운로드 https://goo.gl/98udBq



❖ 판올림 내용

- 태폰트 3종 추가

   * 태흘림

   * 태조각

   * 태으뜸



Set03 무료 서체 목록(일반 기업, 지자체 등)

  • 가비아 글꼴

    • 가비아 봄바람

    • 가비아 납작블럭

    • 가비아 솔미체

  • 미생체

  • 야놀자 야체

  • tvN 즐거운 이야기체

  • 아리따 글꼴

    • 아리따 부리

    • 아리따 돋움

    • 아리따 Sans(로마자)

    • 아리따 흑체(중국어)

  • 배달의민족

    • 배민 한나체

    • 배민 주아체

    • 배민 도현체

    • 배민 한나는열한살체

    • 배민 기랑해랑체

    • 배민 연성체

  • 티몬

    • 티몬 몬소리

    • 티몬 티움(영문전용)

  • 고양

    • 고양체

    • 고양덕양체

    • 고양일산체

  • 태폰트

    • 태흘림

    • 태조각

    • 태으뜸




Set02 무료 서체 목록(은글꼴)

  • 은글꼴

    • 은바탕

    • 은돋움

    • 은그래픽

    • 은궁서

    • 은필기

    • 은디나루

    • 은자모바탕

    • 은자모돋움

    • 은자모노벨

    • 은자모소라

    • 은펜

    • 은펜흘림

    • 은필기a

    • 은신문

    • 은타자

    • 은바다

    • 은옛글



Set01 무료 서체 목록(국가기관, 네이버, 구글 등)

  • 구글 노토(Google Noto)

    • Noto Sans KR

    • Noto Sans Mono KR

    • Noto Serif KR

  • 네이버 나눔 글꼴

    • 나눔명조

    • 나눔고딕

    • 나눔바른고딕

    • 나눔펜

    • 나눔바른펜

    • 나눔브러시

    • 나눔스퀘어

    • 나눔스퀘어라운드

    • 나눔바른고딕-옛한글

  • NHN 고도 글꼴

    • 고도 마음(godo Maum)

    • 고도 Rounded-L

    • 고도 Rounden-R

  • 저작권위원회 KCC 글꼴

    • KCC 김훈체

    • KCC 은영체

  • 문화체육관광부, 출판인회의 코펍(Kopub) 글꼴

    • 코펍 바탕(Kopub Batang)

    • 코펍 돋움(Kopub Dotum)

  • 만화진흥원(한국콘텐츠진흥원) 글꼴

    • 만화진흥원체

  • 서울시 서울 서체

    • 서울 남산체(정체)

    • 서울 한강체(정체)

    • 서울 남산체(장체)

    • 서울 한강체(장체)



1. 목차에서 글꼴의 모양을 확인할 수 있습니다.

글꼴 이름을 누르면 글꼴의 상세 정보로 이동합니다. 



2. 글꼴의 저작권 정보와 배포처, 다운로드 경로를 확인할 수 있습니다.



3. 글꼴의 상세한 내용을 확인할 수 있습니다.

한글, 옛한글, 영문, 일본어, 한자, 기타 언어(스페인, 독일, 프랑스, 러시아)의 지원 여부를 알 수 있고 특수문자 세트가 포함되어 있는지 확인할 수 있습니다. 



4. 한글, 영문 문단이 어떻게 보이는지 확인할 수 있으며 글자 크기에 따른 모양, 스타일(기울임, 진하게)을 적용했을 때의 모양을 알 수있습니다. 



5. 전자책 본문으로 썼을 때 글자가 어떻게 보이는지 알 수 있습니다. 본문 내에서 진하게, 기울임, 윗첨자, 괄호설명 등의 스타일이 어떻게 표현되는지 알 수 있습니다.





아직 본문 디자인은 편집중이고, 무료로 사용 가능한 글꼴 중 일부만 작업이 되었습니다. 시간 나는 대로 업데이트하고 있습니다. 글꼴에 대해 추가로 확인하고 싶은 내용이 있거나 더 추가하고 싶은 무료 글꼴이 있으면 언제든 댓글이나 이메일로 남겨 주십시오. 확인하는 대로 추가하겠습니다.

설정

트랙백

댓글

제목에 테두리가 있는 글상자 만들기


스타일을 잡다 보면 이런 글상자가 종종 나옵니다. 

글상자 제목과 내용이 있는 아주 일반적인 형태의 글상자입니다.

책 만들 때 많이 쓰이기도 하고요.


글상자 자체는 만들기 어렵지 않습니다.

아래처럼 제목에 꾸밈을 주는 경우가 있어요.

꾸밈의 형태는 다양합니다. 포스트잇을 붙여놓은 것 같은 스타일도 있고

제목 앞에 전구나 물음표 같은 불릿이 들어가기도 합니다.

그리고 이렇게 제목이 가운데 나오고, 양 옆으로 특정 패턴의 선이 나오기도 하지요.


이런 패턴은 좀 까다롭습니다.

글자에 맞게 제목 상자 크기가 바뀌어야 되요.

종이책에서는 한번 고정되면 그만이지만 전자책은 가로 폭이 일정하지 않습니다.


그래서 전자책은 제목 상자 옆에 있는 줄이 폭에 맞춰 자동으로 조정되야 하지요.

이런 스타일을 만드는 방식은 여러개예요.


예전에 소개한 적이 있는데

선을 긋고

margin-top을 (-)로 줘서 제목 상자를 선 위로 올리는 방법이 가장 간단합니다.


테이블을 이용할 수도 있어요.

왼쪽, 가운데, 오른쪽 3개짜리 테이블을 만든 후

가운데 셀에 border로 테두리를 그리고 왼쪽, 오른쪽에 선을 그을 수도 있습니다.

하지만 테이블은 셀 크기 조절이 까다로와요.


테이블과 비슷하지만 셀 크기 조절이 쉬운 방법으로는

flex 속성을 이용하는거예요. div 태그를 가로로 3개 늘어놓고 가운데 셀만 flex : 1;을 주면(0이었나???) 가운데 셀은 글자 크기에 맞게 칸이 조절되고, 좌우 셀은 크기가 동일하게 배치됩니다.


오늘 설명드릴건 이보다 조금 쉬운 방식이에요.


상자를 만들어 중간에 줄을 하나 긋고, 그 안에 가운데에 테두리를 친 제목을 추가하는 방식입니다.
스타일은 조금 복잡하지만 HTML 코드가 간결해 편집하기 좋습니다. 

.box_tip_title {

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

background-position : center;

background-size : 15px;

line-height : 0;

margin : 0 0 1em 0;

}


.tip_title {

text-align : center;

display : table;

margin-left : auto;

margin-right : auto;

background-color : #FFFFFF;

border: 15px solid #F67E68;

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

-webkit-border-image-slice: 30%;


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

border-image-slice: 30%;

}



<div class="box_tip_title">

<p class="tip_title">알맞은 조명을 고르기 위한 tip</p>

</div>


테두리 모양은 여러가지로 응용이 가능합니다. 

줄무늬, 물결무늬, border-bottom을 쓰면 아래에만 줄을 그을 수 있어요.

이 스타일만 있으면 제목 상자 테두리에 특정한 무늬가 들어간 대부분의 글상자를 만들 수 있습니다.

뿐만 아니라, 특정한 테두리를 가진 제목에도 활용할 수 있지요.

설정

트랙백

댓글

[문의]재미있는 제목 스타일

재미있는 제목 스타일 문의가 들어와 소개해 드립니다. 

제목 위, 아래에 크기가 다른 둥근 점이 들어간 제목이에요.

Sigil에서 제목을 자동으로 생성하려면 [오늘의 사색]이라는 제목은 하나의 제목 태그로 묶여야 합니다.


중요한 포인트는, 위쪽 큰 동그라미는 제목의 첫번째 단어에, 아래쪽 작은 동그라미는 마지막 단어에 일정한 거리를 유지해야 한다는 점이에요.



이렇게 제목이 길어지면 그에 맞춰 동그라미 위치도 바뀌어야 합니다.


제목의 위, 아래 길이는 알 수 없고, 1줄이 될 수도 있습니다.

제목이 어떻게 배치되어 있든 첫번째 단어에서 1자 거리 위에, 

마지막 단어에서 1자 거리 아래에 원이 표시되야 합니다.




처음엔 코드가 엄청 복잡할 줄 알았는데 의외로 간단한 해결 방법이 있더라구요.

제약(점이 글자를 따라다녀야 한다, 제목을 한번에 표현해야한다 등)을 하나씩 생각하면서 스타일을 만들려다 보니 이런 저런 속성과 스타일이 여러개 들어갔는데 마음에 드는 결과가 나오지 않았습니다. 

그러다, 가장 기본적인 원리를 떠올렸지요.


가장 심플하게~


그래서 다시 생각을 해 보니, 정말 간단한 해결책이 있더라구요.


스타일과 HTML 코드는 이렇습니다.


* 글꼴이 미생체다 보니 기본 글꼴 크기가 작네요. 글자 크기를 미생체에 맞춰 다른 글꼴로 바꿀 경우 제목 크기가 아주 커질 수 있습니다. 원문자 크기 역시 글꼴에 따라 차이가 날 수 있기 때문에 글자 크기 조절이 필요합니다.

h3 {

text-align : center;

font-family: "Sandoll MiSaeng";

font-size : 1.8em;

margin-top : 2em;

margin-left : -1em;

margin-bottom : 5em;

color : #B794CA;

}


h3:before {

content : "●";

font-size : 1.2em;

vertical-align : 110%;

}

h3:after {

content : "●";

font-size : 0.7em;

vertical-align : -140%;

}

.left_m{

margin-left : 1.5em;

}


<h3>토끼굴 <br/><span class="left_m"></span>속으로</h3>



스타일을 적용한 결과입니다.




목차를 자동 생성하면 이렇게 나옵니다.



샘플 파일 다운로드 받아서 확인해 보세요~





설정

트랙백

댓글


티스토리 툴바