Add Cover 기능은 표지 이미지 파일을 선택해서 HTML 형식의 표지를 만들어 주는 기능이다. 많은 편집자들이 표지 이미지를 삽입할 때 스타일을 적용하지 않는다. 그래서 뷰어에서 이미지가 한페이지에 나오지 않거나 왼쪽으로 치우치고, 들여쓰기가 적용되는 등 의 문제가 생긴다.
Add Cover 기능을 이용하면 Sigil에 설정돼 있는 표지 탬플릿이으로 표지 페이지가 삽입되어표지를 뷰어의 가운데 정렬시키고 화면에 꽉 차도록 자동으로 크기가 조절된다.
Sigil에서 기본으로 제공하는 표지 탬플릿은 SVG 이미지 태그를 사용한다. 그래서 SVG를 지원하지 않는 뷰어에서는 문제가 발생할 수 있다. EPUB3를 지원하는 뷰어에서는 문제가 없지만 국내 유통사 중 EPUB3를 지원하거나 SVG를 지원하는 뷰어를 제공하는 곳은 많지 않다.
Sigil은 사용자가 직접 표지 탬플릿을 추가할 수 있는 기능을 제공한다.
Sigil의 설정파일이 저장된 폴더에 cover.xhtml이라는 파일을 추가하면 Sigil의 기본 표지 탬플릿이 아닌 사용자가 추가한 cover.xhtml을 탬플릿으로 사용한다. 설정 폴더는 [편집 > 설정]으로 설정 창을 연 후 왼쪽 하단에 있는 [Open Preferences Location] 버튼을 눌러 쉽게 이동할 수 있다.
- 표지 탬플릿 만들기
- 설정 폴더에
cover.xhtml이라는 파일을 추가한다
* 편집자가 자주 사용하는 표지 파일이면 된다
- 표지 파일을 메모장이나 텍스트 에디터로 열어 표지 파일 윛, 파일 크기 등을 수정한다.
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover</title>
</head>
<body>
<div style="text-align:
center; padding: 0pt; margin: 0pt;">
<svg
xmlns="http://www.w3.org/2000/svg" height="100%"
preserveAspectRatio="xMidYMid
meet" version="1.1"
viewBox="0 0 SGC_IMAGE_WIDTH
SGC_IMAGE_HEIGHT" width="100%"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="SGC_IMAGE_WIDTH" height="SGC_IMAGE_HEIGHT"
xlink:href="SGC_IMAGE_FILENAME"/>
</svg>
</div>
</body>
</html>
* SGC_IMAGE_FILENAME : 표지 파일 경로가 들어가야 하는 곳에 그대로 삽입한다.
* SGC_IMAGE_WIDTH : 표지의 너비를 설정하는 곳에 그대로 삽입한다.(옵션)
* SGC_IMAGE_HEIGHT : 표지의 높이를 설정하는 곳에 그대로 삽입한다.(옵션)
* 표지 탬플릿 예
아래 탬플릿은 표지 이미지를 상하좌우 중앙에 놓이게 만들어준다. Sigil 탬플릿과 달리 style.css 파일에 스타일을 지정하고 편집자의 탬플릿에는 스타일이 적용된 코드를 삽입해서 만들었다.
<?xml version="1.0" encoding="utf-8"
standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="ko" xmlns:epub="http://www.idpf.org/2007/ops"
xmlns:xml="http://www.w3.org/XML/1998/namespace">
<head>
<title></title>
<link
href="../Styles/style.css" rel="stylesheet"
type="text/css" />
<style type="text/css">
html, body { height:100%; margin: 0; padding: 0; }
</style>
</head>
<body>
<div
class="cover"><img alt="표지 중앙정렬 샘플"
class="cover" src="SGC_IMAGE_FILENAME"
/></div>
</body>
</html>
style.css
.cover {
width: 100%;
height : 100%;
text-indent : 0;
text-align : center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
}
img.cover {
width : 100%;
height : auto;
}
- 파일을 저장 후 Sigil의 Add Cover
기능을 이용하면 편집자가 만든 탬플릿으로 표지가 들어간다.
