전자책(epub) 제작 css - 글자크기 조정 font-size

epub전자책 제작을 위한 css실습입니다. 글자크기 조정에 대해 알아보겠습니다. 

 

속성

글자크기를 바꿔주는 css속성은 font-size입니다. 

 

속성값

속성값은 숫자를 쓰면 됩니다. 

단위를 em단위를 씁니다. 

em은 상대단위로 1em은 12pt와 같습니다. 

 

전자책 글자크기는 기본 em단위를 씁니다.

단말기의 크기가 다양하고 뷰어에서 글자를 상대적으로 키웠다 줄였다 하기 때문에 em단위를 씁니다. 

기본글자가 1em이라고 할때 2em은 1em의 2배크기입니다. 

글자크기를 줄이고 싶다면 1보다 작은 0.5em, 0.4em...이런 식으로 사용하면 됩니다. 

 

전자책에서 본문의 기본글씨크기로 가장 많이 쓰는 값은 1em입니다.

본문글자크기를 기준으로 제목은 1보다 큰 값으로 선택하시면 됩니다. 

 

CSS, HTML연습

css에는 아래와 같이 스타일을 만듭니다. 

 

.f1{

font-size: 1em;}

 

html에는 아래와 같이 적용합니다. 

<p class="f1">글자크기가 1em</p>

 

 

예제 

본문의 글자를 1em으로 제목을 1.2em으로 하는 전자책을 만들어 보겠습니다. 

 

css에는 

.title{font-size: 1.2em;}

.p1{font-size: 1em;}

 

html에는 

<p class="title">1. 제목</p>

<p class="p1">본문의 글자크기는 보통 1em을 사용합니다.</p>

 

이렇게 코드를 적습니다. 

 

위의 css와 html을 시길(Sigil)에서 보면 아래와 같습니다. 

시길 글자크기 변경 - css, html

시길 글자크기변경 - 미리보기

이렇게 적용하고 시길의 미리보기에서 보면 위와 같습니다.