1.2.7.1 CSS 템플릿 활용하기 - 표지 이미지 스타일

기본 탬플릿은 말 그대로 가장 기본이 되는 스타일이다. 기본 탬플릿으로 전자책을 만들면 나쁘진 않지만 그저 그런 정도의 결과물 밖에 얻을 수 없다. 기본 탬플릿은 초콜릿을 만들 때 쓰는 몰드 역할을 한다. 프랄린의 모양을 예쁘게 잡아 주지만 초콜릿을 녹여 몰드에 넣고 찍어내면 아무 의미가 없다. 프랄린의 진짜 가치는 프랄린 안에 들어가는 필링(프랄린 초콜릿 안에 들어있는 부드럽고 다양한 맛을 내는 재료)에 있기 때문이다.

기본 탬플릿은 틀에 불과하다. 이 틀을 어떻게 변형시키느냐에 따라 다양한 스타일을 얻을 수 있다. 이번 챕터에서는 몇가지 예를 통해 기본 탬플릿을 활용하는 방법을 설명하려고 한다.



1. 표지 이미지 스타일

표지는 여러가지 스타일이 필요하지 않다. 거의 모든 EPUB 책에서 표지에 이미지를 넣기 때문에 표지이미지를 뷰어에서 가장 잘 표현해 줄 수 있는 스타일이면 된다. 
EPUB 편집자마다 사용하는 표지 이미지 스타일이 다양하게 있는데 대부분 스타일 없이 삽입하거나 가운데 정렬을 하는 정도이다. 필자가 주로 사용하던 스타일도 좌우 가운데정렬이었다. 사용하는 속성은 조금씩 다르겠지만 유통중인 EPUB은 대부분 이런 스타일을 적용한 것으로 보인다. 

예제1) 일반적인 표지 이미지 스타일


 CSS : Style.css 

.cover {

text-indent : 0;

text-align : center;

margin : 0;

padding : 0;

width : 100%;

}


img {

width : 100%;

margin : 0;

padding : 0;

}


 HTML : Cover.html 

<p class="cover"><img alt="표지이미지" src="../Images/cover.jpg" /></p>


이 스타일은 이미지가 가로 가운데 정렬이 되고, 화면 크기에 맞춰 이미지가 확대된다. 그러나 세로는 항상 위쪽에 붙기 때문에 뷰어가 세로로 길어질 경우 이미지가 위쪽으로 치우치게 된다. 최근에 나오는 모바일 기기들은 3:4 비율은 거의 없고 9:16 이상의 비율을 갖는 경우가 많아 이미지가 위쪽으로 치우치면 좋아보이지 않는다. 그래서 상하 좌우 가운데 정렬이 되도록 하는 스타일을 소개한다. 이 스타일은 필자가 만든게 아니고 넥서스 출판사에서 만든 EPUB의 표지이미지 스타일을 참고한 것임을 밝힌다. 


예제2) 상하 좌우 가운데 정렬된 표지 이미지 스타일


 CSS : Style.css 

div..cover {

width: 100%;

height: 100%;

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;

}


 HTML : Cover.html 

<html>

<head>

<style>

html, body { height : 100%; margin : 0; padding : 0; }

</style>

</head>

<body>

<div class="cover"><img alt="표지이미지" src="../Images/cover.jpg" /></div>

</body>

</html>


* 표지 이미지를 화면에 가득 채우기 위해 페이지 전체 높이(height)를 100%로 줘야 한다. 그래서 html과 body에 스타일을 지정했다. 하지만 html과  body에 스타일을 지정하는건 표지에 한정되어 있기 때문에 인라인 스타일이나 내부 스타일로 지정을 하였다. 



설정

트랙백

댓글


티스토리 툴바