2015/02/02

30분 만에 전자책 만들기 7 : 주석 달기

안녕하세요.

30분 만에 전자책 만들기 일곱 번째 시간입니다.

오늘은 전에 말씀드렸던 대로 주석을 다는 방법을 알려드리겠습니다.

 

제가 알려드리는 방법은 EPUB2.0에서 사용하는 방법입니다.

EPUB3.0에서는 더욱 보기 좋은 방법으로 표현할 수 있으나, 아직까지 국내 뷰어에서 정식적으로 EPUB3.0을 지원하지 않고 있어 만들어 봤자 확인을 할 수 없는 한계가 있습니다.

차차 뷰어는 나아지겠지만, 어쨌든 우리는 기본 중의 기본을 다루고 있으니 EPUB2.0 버전으로 배워보겠습니다.

 

이전에 작업한 파일을 준비해주세요.

어딨는지 못 찾으시겠다면 아래 링크로 들어가 다운받으시면 됩니다.

 

[전자책 제작] 30분 만에 전자책 만들기 6 : 판권 만들기

 

1. 주석 마크 삽입하기

주석은 보통 본문 크기보다 작은 크기로 윗첨자나 아랫첨자로 표현됩니다.

저는 보통 주석을 윗첨자로 삽입하는데요, 윗첨자를 삽입하는 태그는 sup입니다. 아랫첨자는 sub이죠.

지난 시간까지 만들었던 EPUB 파일을 열어 각주나 미주로 연결할 마크를 삽입하겠습니다.

설명하기 편하게 제목에 주석 마크를 삽입하겠습니다.

'1)'를 제목 제일 마지막에 넣어주시고 마크를 넣을 부분을 선택한 후에 윗첨자 버튼을 누릅니다.

윗첨자 버튼은 문단 정렬 방법 옆에 있습니다.

첨부된 이미지의 빨간 네모칸 안에 버튼이 윗첨자입니다. 그 옆의 버튼은 아랫첨자이고요.

북뷰에서 소스뷰로 바꿔보면 우리가 윗첨자를 입력한 부분에 sup 태그가 사용된 것을 확인할 수 있습니다.

이제 이 부분을 누르면 설명으로 갔다가 다시 돌아올 수 있도록 마커를 삽입하겠습니다.

마커는 문단 정렬 버튼의 위에 있는 닻 모양의 버튼을 누르면 생성할 수 있습니다.

이제 이 부분을 누르면 나올 설명글을 작성하겠습니다.

 

설명글은 각 챕터 끝에 넣거나 새로운 챕터를 만들어서 넣는 방법이 있는데, 오늘 설명에서는 새로운 챕터를 만들어서 넣는 방법을 알아보겠습니다.

기본적인 방법은 동일하므로 원하시는 방법을 이용하시면 됩니다.

footnote.xhtml을 만들어 위와 같은 내용을 넣었습니다.

위에서 설정한 story_01을 누르면 footnote_01로 오도록 마커를 설정했습니다.

 

설명 부분은 첫 줄 내어쓰기를 하기 위해 새로운 스타일을 설정했습니다.

해당 스타일은 아래와 같습니다.

 

CSS에 복사하여 넣으시면 됩니다.

 

/*주석*/

.footnote {font-family: "kb"; text-align: justify; font-size: 0.9em; margin: 0 0 0 1em; padding: 0; line-height: 1.6em; text-indent: -1em;}

 

이제 주석을 달기 위한 첫번째 단계는 완료했습니다.

이제 이 주석 부분을 누르면 미리 만들어 놓은 주석으로 이동할 수 있도록 설명을 만들어 보겠습니다.

 

2. 주석 하이퍼 링크 설정하기

각 마커를 설정한 다음에는 마커를 눌렀을 때 해당하는 부분으로 이동해야 성공적으로 주석이 만들어지는 겁니다.

그렇다면 이번에는 하이퍼 링크를 달아야겠죠.

 

하이퍼 링크를 다는 방법은 지난 포스팅에서 이야기했었습니다.

잘 쫓아오시면 어렵지 않게 성공할 수 있습니다.

 

우선 본문에서 주석 페이지로 넘어가는 하이퍼 링크를 설정하겠습니다.

앞에서 설정한 주석 숫자 부분을 선택하고 사단의 하이퍼 링크 버튼을 눌러 타겟 선택 창을 띄웁니다.

그러면 전에는 없었던 [#~]이라는 선택지가 새로 생겼습니다.

이게 바로 우리가 삽입한 마커입니다.

 

지금은 본문에서 주석 페이지로 이동하는 것이므로,

footnote.xhtml#footnote_01을 선택합니다.

밑줄 친 것처럼 href 명령어가 삽입되었습니다.

이 부분을 누르면 주석 페이지의 첫 번째 주석으로 이동하라는 명령어입니다.

 

이제 북뷰로 바꿔서 해당 부분을 누르면...

주석 페이지로 이동합니다.

정상적으로 하이퍼 링크가 삽입된 거죠.

 

이제 반대로, 주석 페이지에서 챕터로 이동하는 하이퍼 링크를 삽입하겠습니다.

방법은 위와 동일합니다.

하이퍼 링크 설정할 부분을 선택하고 하이퍼 링크 버튼을 눌러 [Section0001.xhtml#story_01]을 선택합니다.

제대로 삽입이 되었다면 해당 텍스트가 파란색으로 변하고 밑줄이 생겼을 겁니다.

 

확인차 해당 부분을 누르면 본문으로 이동합니다.

참 쉽죠?

 

이렇게 주석도 하나하나 작업해주면 됩니다.

물론 양이 많으면 그만큼 시간도 많이 걸리겠지요...ㄷㄷ

 

오늘의 포스팅도 그리 어렵지 않았으리라 생각합니다.

혹시 궁금하거나 어려운 사항이 있다면 얼마든지 물어봐주세요.

 

성심성의껏 답변드리겠습니다.

그럼, 오늘 포스팅은 이만 마치겠습니다.

 

감사합니다.

 

 

오늘의 완성본 EPUB 파일 첨부합니다.

 ↓ novel.epub [다운로드]

 

#강의 #주석 #전자책 #epub #전자책만들기 #하이퍼 링크 #전자책제작 #sigil

사진 관련 소식