posted by 내.맘.대.로 2014. 12. 12. 09:10

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

2. 제목 스타일 꾸미기

책의 제목 스타일은 다양하다. 여기서는 시중에 판매되고 있는 책의 제목 스타일을 CSS로 어떻게 표현할 수 있는지 설명을 하려고 한다. 전자책을 종이책과 똑같은 스타일로 맞추는 것은 권하지 않는다. 전자책과 종이책은 각각의 특성이 있기 때문에 똑같이 만들기 보다는 특성에 맞춰서 독자들이 편하게 읽을 수 있도록 편집을 해야한다. 

여기서 책의 제목 스타일을 그대로 구현하는 것도 책 스타일을 전자책에 옮기려는 목적에 있는게 아니고 CSS 스타일을 어떻게 적용하는지 설명을 위해서일 뿐이다. 



예제1) 

* 100명 중 98명이 헷갈리는 우리말 우리문장 중에서


▷ 위 스타일에서 필요한 속성

1. 원형 테두리가 있는 장 번호 : border, radious, background-color

2. 필기체 스타일의 글꼴 : font-family

3. 점선 밑줄 : border-bottom

4. 가운데 정렬 : text-align

* 이 외에 boder의 크기를 글자에 맞추기 위해 display 와 margin 속성이 사용된다.  


필요한 스타일이 정해졌다면 CSS로 각 스타일을 정리하고 적절한 값을 찾는다.

위 제목 스타일을 적용하기 위해서는 2개의 스타일이 필요하다. 하나는 원형의 장 번호, 다른 하나는 제목 텍스트의 스타일이다. 원형의 장 번호를 이미지로 처리하면 텍스트에 필요한 스타일만 적요하면 된다. 

CSS만으로 원형 장번호에 말풍선처럼 화살표를 넣기는 어렵다.말풍선 화살표가 필요하다면 이미지를 배경으로 사용하는게 좋다.



 CSS : Style.css 

h2 { 

font-family : 필기체;

border-bottom : dotted 2px #ff6633;

display : table;

margin-left : auto;

margin-right : auto;

text-indent : 0;

text-align : center;

}


div.ch_no{

display : table;

margin-left : auto;

margin-right : auto;

font-size : 2em;

text-align : center;

background: #ff6633;

width: 35px;

height : 35px;

border-radius: 50%;

}




 HTML : title.html 

<html>

<head>

<link href="../Styles/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="ch_no">1</div>


<h2>맞춤법이 뭐예요?</h2>

</body>

</html>



예제2)


▷ 위 스타일에서 필요한 속성

1. 글자 색 지정 : color

2. 아래쪽 점선 : border-bottom

* 이 외에 boder의 크기를 글자에 맞추기 위해 display 와 margin 속성이 사용된다. 


 CSS : Style.css 

h3 {

font-size : 1.4em;

color : #ff6633;


border-bottom : dotted 2px #ff6633;

display : table;

margin-left : auto;

margin-right : auto;


text-indent : 0;

}


 HTML : title.html 

<h3>맞춤법은 소리 나는 대로 적는 것이다?</h3>



예제3)



▷ 위 스타일에서 필요한 속성

1. 원 안에 든 글번호 : border, border-radious

2. 글번호 우측 정렬 : display : flex, flex-flow

2. 제목 줄 바꾸기 : display : block

3. 슬래시(/) 자동으로 넣기 : ::before

    * 이 외에 boder의 크기를 글자에 맞추기 위해 display 와 margin 속성이 사용된다. 


 CSS : Style.css 

div.title { /*div 태그로 만든 원형 글상자를 오른쪽 정렬 시킴*/

display: flex;

flex-flow: row-reverse wrap;

}


div.ch_no{ /*장 번호를 위한 원형 글상자*/

font-size : 1.5em;

text-align : center;

background: #aaaaaa;

width: 30px;

height : 30px;

border-radius: 50%;

}


h2 { /*장 제목*/

text-align : right;

}


h2::before{ /* 장 제목 앞에 슬래시'/'를 자동으로 추가*/

content : "/";

display : block;

}


 HTML : ch001.css 

<div class="title">

<div class="ch_no">1</div>

</div>

<h2>나의 돈 관리 능력은<br />몇점일까?</h2>



예제4)

아래 예제는 '예제3'에서 아래쪽에 본문과의 여백을 두는 스타일이다. 본문과 여백을 두는 스타일은 쓰임이 많기 때문에 따로 설명을 한다. 



▷ 위 스타일에서 필요한 속성

1. 여백 설정 : margin 혹은 margin-bottom

    * 제목이나 문단에 여백을 줄 때는 padding보다 margin을 사용하는 것이 좋다.


 CSS : Style.css 

div.title { /*div 태그로 만든 원형 글상자를 오른쪽 정렬 시킴*/

display: flex;

flex-flow: row-reverse wrap;

}


div.ch_no{ /*장 번호를 위한 원형 글상자*/

font-size : 1.5em;

text-align : center;

background: #aaaaaa;

width: 30px;

height : 30px;

border-radius: 50%;

}


h2 { /*장 제목*/

text-align : right;

margin : 0 0 10% 0; /* margin-bottom : 10% 혹은 margin-bottom 20px 사용 가능*/

}


h2::before{ /* 장 제목 앞에 슬래시'/'를 자동으로 추가*/

content : "/";

display : block;

}


 HTML : ch001.html 

<div class="title">

<div class="ch_no">1</div>

</div>

<h2>나의 돈 관리 능력은<br/>몇 점일까?</h2>


* 전자책은 스마트폰, 태블릿, PC 등 하나의 파일로 여러 기기에서 사용을 한다. 그래서 상하 여백을 둘 때 화면 크기를 고려해야 한다.

상하 여백을 비율(%, em)로 설정하면 화면 크기에 맞춰 간격이 조절된다. 아이패드 처럼 큰 화면에서는 상하 간격이 넓어지고, 스마트폰에서는 상하 간격이 줄어든다. 하지만 화면에 따라 간격이 항상 바뀌기 때문에 편집 의도와 다른 결과를 보여줄 수도 있다. 

상하 여백을 고정값(px)으로 적용하면 제목과 본문 사이의 간격이 일정하게 유지된다. 하지만 화면 해상도에 따라 간격이 크게 벌어질 수 있고, 화면 크기에 따라 차이가 심하게 날 수 있다. 




예제5)

아주 간단하지만 많이 사용하는 스타일이다. 본문과 다른 글씨체를 사용하고, 위와 아래 여백을 둔다. 주의해야할 점은 들여쓰기이다. 기본 설정으로 들여쓰기가 되어 있으면 제목에도 영향을 줄 수 있다. 그렇기 때문에 제목에 들여쓰기를 할 것인지 확인하고 들여쓰기가 필요 없다면 들여쓰기 스타일을 빼줘야 한다.



▷ 위 스타일에서 필요한 속성

1. 글꼴 : font-family

2. 들여쓰기 설정 : text-indent

3. 상하 여백 : margin 혹은 margin-top, margin-bottom


 CSS : Style.css 

h3 {

font-family : "굴림";

text-indent : 0; /* 기본 들여쓰기가 되어 있어도 0으로 최화 됨. 들여쓰기를 원하면 지정할 수 있음.  */

margin : 10% 0 10% 0;

/* margin-top : 10%; margin-bottom : 10%; 여백 단위는 % 대신 px 등을 사용할 수 있음 */

}


 HTML : ch001.html 

<p>또 다른 주말에는 용서와.....</p>

<h3>결정적인 체험</h3>

<p>하루는 강사가 이런 말로...</p>




예제6)

아래같이 두단의 서로 다른 스타일 제목을 표현할 때는 <p> 태그로 묶은 후 다른 클래스로 스타일을 지정하는 방식을 많이 사용한다.


<p class="title_top">삶을 위한</p>

<p class="title_bottom">선택</p>


이렇게 표현을 하면 쉽게 스타일을 적용할 수 있는 반면, 제목 텍스트가 2개로 나뉜다는 문제점이 있다. 만약 이 페이지를 목차에 포함시키고 싶다면 어떻게 될까? 이 페이지의 목차는 '삶을 위한'이 된다. TOC를 수정한다 해도 권할 만한 방식은 아니다. 



▷ 위 스타일에서 필요한 속성

1. 글자색 : color

2. 줄바꿈 : display : block;


 CSS : Style.css 

h3 {

font-size : 1.4em;

margin-bottom : 10%;

}


.title {

display : block; /* br 태그를 쓰지 않고도 다음 줄로 내릴 수 있음 */

color : #777777;

}


 HTML : ch001.html 

<h3>삶을 위한 <span class="title">선택</span></h3>



** 시간이 오래 걸려 정리되는 대로 공개를 하겠습니다. 아래쪽도 계속 채울 예정입니다. **

예제7)

제목이나 제목 번호에 이미지로 글번호를 넣는 방법은 두가지이다. 하나는 이미지별로 번호를 넣어 사용하는 방식이다. 별다른 스타일을 적용할 필요 없어 편하긴 하지만, 목차가 100개쯤 되면 파일 용량도 커지고, 이미지가 많아 편집 시간이 오래 걸릴 수 있다. 

다른 하나는 배경에 이미지를 넣는 방식이다. 배경으로 이미지를 넣으면 이미지는 하나만 사용하고, 번호에 맞는 이미지를 찾는 시간도 절약할 수 있다. 하지만 편집이 복잡해 질 수 있기 때문에 글자를 확대/축소할 때 틀어질 수 있다.

이미지별로 글번호를 넣는 방법은 간단하기 때문에 여기서는 이미지를 배경으로 넣는 방법을 설명하겠다. 


▷ 위 스타일에서 필요한 속성

1. 배경이미지 : background-image

2. div 글상자에서 글자 정렬 : position, left, top


 CSS : Style.css 

div.bullet {

        background-image: url("bags.jpg");


        font-size : 35px;  /* 배경 이미지 크기는 고정이기 때문에 글자 크기를 조절할 수 없도록 px를 사용했다 */

        color : #FFFFFF;

            

        margin-left : auto;

        margin-right : auto;

        

        width: 67px;

        height : 80px;  

  }


  p.bulletNo { /* 글자의 위치를 고정시켜 화면 크기가 바뀌더라도 배치가 틀어지지 않는다 */

        position : relative; 

        left : 17px;

        top : 35px;

  }


  h2 {

        font-size : 1.5em;

        text-align : center;

  }


 HTML : ch001.html 

  <div class="bullet">

    <p class="bulletNo">01</p>

  </div>


  <h2>현명한 부모는 공부보다<br />

  운동을 먼저 시킨다</h2>



예제8)

아래 제목은 아주 단순하기 때문에 특별히 스타일을 적용할 필요는 없다. 그런데 제목 앞에 별표(★)가 있다. 제목에 항상 이런 특수한 기호나 단어가 들어간다면 CSS로 간단히 처리하는 방법이 있다. 제목을 쓸 때마다 별표를 하지 않아도 자동으로 추가되고, 표시를 변경할 때도 CSS만 수정하면 된다. 



▷ 위 스타일에서 필요한 속성

1. 앞쪽에 기호나 문장 삽입 :  ::before

* 뒤쪽에 들어가는 기호나 문장은 ::after를 사용한다.


 CSS : Style.css 

  h4 {

        font-size : 1.2em;

  }

  h4::before {

content : "★"; /* "참고", "주의!" 등 글자가 올 수도 있다 */

  }


 HTML : ch001.html 

  <h4>아이가 어릴수록 영수보다 운동을 시켜라</h4>



예제9)

아래처럼 제목 앞에 큰 이미지가 오고 이미지의 상하 중앙에 제목을 넣어야 하는 경우가 있다. 간단한 스타일이지만 복잡하게 생각하는 편집자들이 많이 있는 것 같다. div로 이미지를 감싸고 float을 써서 텍스트에 어울림 처리를 생각했다면 아래 스타일을 참고하기 바란다. 



▷ 위 스타일에서 필요한 속성

1. 이미지와 텍스트 상하 정렬 : vertical-align


 CSS : Style.css 

p.mtitle {

color : #5E6A70;

font-size : 1.1em;

padding : 1.3em 0em 0em 0px;

}

img.chakra{

vertical-align : middle;

padding : 0 10px 0 0;

}


 HTML : ch001.html 

  <p class="mtitle"><img class="chakra" src="../chakra.jpg" / alt="bullet">마시 시모프</p>



예제9)

아래 같은 편집은 전자책에서는 아주 까다롭다. 스타일 자체는 복잡하지 않은데 화면 크기도 제각각이고 글자 크기가 변경되기 때문에 본문 한줄만 이미지 아래에 걸치게 조절하기가 어렵다. 아래 코드는 글자 크기에 따라 처음 몇줄이 이미지 위에 걸치도록  했다. 글자 크기에 따라 이미지 위에 걸치는 본문 줄수가 1줄 ~ 3줄 이상이 될 수도 있다.


▷ 위 스타일에서 필요한 속성

1. 이미지 왼쪽으로 글자 배치 : float : left;


 CSS : Style.css 

img.bar {

float : left;

margin : 0;

padding : 0 10px 0 0;

}


h3 {

font-size : 1.5em;

margin-bottom : 280px; /* 이미지 세로 길이가 366px 이었기 때문에 본문이 이미지에 걸쳐질 수 있도록 아래쪽 여백을 조절했다 */

}

.chNo {

color : #AAAAAA;

font-size : 0.5em;

display : block;

}


 HTML : ch001.html 

<h3><img class="bar" src="../Images/bar.png"/><span class="chNo">두번째</span> 평생의 친구를 찾아라</h3>

<p>인생의 현자들을 만나 "오랫동안 행복한 결혼을 할 수 있었던 비결이 뭡니까?"하고 물었을 때 가장 먼저 나온 대답이 바로 "제일 친한 친구와 결혼을 했지."였다. 반대로 결혼에 실패한 사람들 중에는 이렇게 대답한 사람이 많았다. "우린 연인으로서는 좋았지만 친구가 되는 법을 알지 못했어."</p>


예제9)


아래 제목은 제목 아래에 이미지로 된 선이 그어져 있다. 이런 경우 간단히 표현을 하려면 이미지를 포기하고 비슷한 색으로 밑줄을 그어 주는 방법을 이용할 수 있다. 만약 밑줄 이미지가 편집에 중요하다면 이미지를 테두리로 표현할 수도 있다. 


▷ 위 스타일에서 필요한 속성

1. 텍스트 길이에 맞춰 글상자 크기 조절 : display : table;

2. 테두리 이미지 : border-image

3. 테두리 밑줄 : border-bottom


 CSS : Style.css 

h2.line { 

border-bottom : solid 2px #718F3F;

display : table;

}


h2.image { 

-webkit-border-image:url(underline.png) 0 0 5 0 round;

border-image:url(underline.png) 0 0 5 0 round;

display : table;

}


 HTML : ch001.html 

<h2 class="line">두번째 평생의 친구를 찾아라</h2>

<h2 class="image">두번째 평생의 친구를 찾아라</h2>


* border-image : border-image는 글상자 테두리를 이미지로 그려주는 스타일이다. 

border-image:url(underline.png) 0 0 5 0 round;

   앞쪽부터 이미지 url, 위 오른쪽 아래 왼쪽 테두리, 이미지 적용 방식으로 값을 지정한다. 


반응형
posted by 내.맘.대.로 2014. 10. 17. 10:00

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

 

이미지에 적용할 수 있는 스타일은 그리 많지 않다. CSS3를 활용하면 이미지 갤러리처럼 다양한 효과를 낼 수 있지만 일반적인 책 편집에는 간단한 스타일이 주로 사용된다. 

전자책 편집에서 많이 사용하는 스타일은 정렬과 float(HWP의 어울림 기능)이 있다. 

이미지 정렬 기능은 문단 정렬과 다르지 않다. 그래서 문단 정렬을 위해 만든 스타일을 그대로 사용할 수 있다. 만약 이미지에 테두리나 그림자를 두고 싶다면 border 속성을 사용할 수 있다.

 

▶ 문단 정렬 스타일 예시

.txt_center {

text-align : center;

}

.txt_right {

text-align : right;

}

.txt_left {    /* 기본 정렬이 왼쪽으로 되기 때문에 왼쪽 정렬은 없어도 된다 */

text-align : left;

}

.img_border {

 border : solid blue 2px;

margin : 0;

}


왼쪽 정렬  <p class="text_left"><img src="sample.jpg /></p>

가운데 정렬 및 테두리 <p class="text_center"><img class="img_border" src="sample.jpg /></p>

오른쪽 정렬 <p class="text_right"><img src="sample.jpg /></p>


전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다. float 스타일은 이미지에만 사용할 수 있는게 아니다. 문단의 왼쪽이나 오른쪽에 보충설명을 위한 텍스트상자를 넣고 싶을때도 유용하게 사용할 수 있다.

책을 편집하다 보면 이미지에 설명을 추가해야 하는 경우가 있다. 이때 caption 스타일을 미리 만들어 두명 유용하게 활용할 수 있다.


▶ float 스타일 예시

img {

width : 100%;  /*이미지가 할당한 영역보다 크다면 이미지 크기를 할당 영역에 들어가도록 해야함*/

}

.float_left {

float : left;

}

.float_right {

float : right;

border : solid 1px grey;

}

.txt_float_left {   /*float을 활용한 보충 설명용 텍스트 상자 */

float : left;

width : 30%;

border : solid 1px grey;

margin : 5px; /*테두리 바깥쪽 여백*/

padding : 10px;/*테두리 안쪽 여백*/

}

.caption {

font-size :0.8em;

color : red;

text-align : center;

display :block;

}


▶ float 스타일 적용 결과

float:left 적용

float:right 적용

전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다. 

전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다. 


□ 이미지 정렬 코드 예시

<p class="float_left"><img src="sample.jpg" /><span class="caption">float:left 적용</span></p>

<p class="float_right"><span class="caption">float:right 적용</span><img src="sample.jpg" /></p>

<p>전자책을 편집할 때 정렬보다 더 많이.....</p>

<p>전자책을 편집할 때 정렬보다 더 많이.....</p>

<p class="txt_float_left">전자책을 편집할 때 정렬보다 더 많이.....</p>


전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다. 

전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다. 

전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다. 

전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다. 

전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다. 

전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다. 



이 외에도 이미지에 활용하기 좋은 스타일로 box-shadow가 있다. box-shadow는 이미지의 상하좌우에 그림자를 그려주는 스타일로 잘 활용하면 이미지에 멋진 효과를 줄 수 있다.


.img_shadow {

float :left;

box-shadow: 10px 15px 5px grey;

border : solid 1px grey;

}


    box-shadow는 테두리 주위에 그림자를 나타내 주는 스타일이다. 

    그림자 효과를 잘 활용하면 보다 입체적인 편집을 할 수 있다.









반응형
posted by 내.맘.대.로 2014. 10. 17. 10:00

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

지금까지 CSS의 구조와 전자책 편집에 많이 사용되는 CSS 속성을 살펴봤다. 여기에 설명된 내용만 이해하더라도 시중에 유통되는 수준으로 전자책을 편집할 수 있다. 제목과 소제목을 꾸미고, 본문과 인용구에 다른 스타일을 적용하고, 참고사항은 박스에 넣는 등의 편집을 하는 정도면 지금까지 설명한 스타일만으로 충분하다. 


앞으로는 지금까지 설명한 CSS 속성을 실제 편집에서 어떻게 활용하는지, 그리고 전자책 편집을 쉽게 하기 위한 템플릿을 어떻게 만드는지 설명하려고 한다. CSS  템플릿에 대해서는 [1.2.6.1 CSS 기초 - CSS 템플릿 기본 구조]에서 설명했듯이 하나만 제대로 만들어 두면 전자책 편집이 편해진다. 


CSS 탬플릿은 편집자가 자신의 편집 스타일에 맞게 만들면 된다. 정해진 룰은 없다. 필자가 좋아하는 편집 스타일은 EPUB을 편집할 때 불필요한 태그 사용을 최소로 하고, 편집 수정을 할 때 시간을 최대한 단축할 수 있는 방식이다. 이 방식은 화려한 편집을 하기에는 부족하지만 대부분의 뷰어에서 깔끔하게 보이고, 뷰어에서 도류도 적다는 장점이 있다. 


아래 예시는 필자가 Sigil에서 작업할 때 사용하는 기본 템플릿이다. 이 템플릿을 그대로 사용하는 경우는 거의 없다. 책에 따라 스타일을 조금씩 수정해야 하기 때문에 EPUB을 편집할 때 항상 조금씩 수정을 한다. 다른 편집자들도 이 템플릿을 토대로 자신만의 스타일을 만들 수 있을 것이다. 


* 스타일에 대한 설명은 CSS파일에 포함되서는 안된다. 아래 내용을 복사해서 사용하려면 설명 부분은 모두 지우기 바란다.  


▶CSS 기본 템플릿

폰트는 책에 따라 항상 바뀐다. 폰트가 더 추가될 수도 있고, 한 두 개의 폰트만 사용할 수도 있다. @font-face로 폰트를 지정할 때 font-family는 사용할 폰트의 목적에 맞게 지정해 주는게 좋다. 많은 편집자들이 font-family 이름을 폰트 파일 명으로 지정하는데 그러다보면 사용하지 않는 폰트가 추가되는 경우도 생기고 폰트가 어디에 사용됐는지 확인하기도 어렵다. 그리고 사용하지 않는 폰트는 CSS에서 삭제해 줘야하고, 시스템 폰트를 @font-face로 지정하려면 속성을 정확히 지정해 주는게 좋다. 아무런 속성 없이 시스템 폰트를 @font-face로 지정하는 편집자도 많은데 불필요한 쓰레기 데이터일 뿐이다. 

/* 폰트 추가 */

@font-face 

{

font-family: "본문";

src: url("../Fonts/UnBatang.ttf"); 

}


@font-face 

{

font-family:"제목"; 

src: url("../Fonts/NanumGothicBold.ttf");

}


* 속성은 body태그가 대신하기도 한다. HTML에서는 body 태그가 모든 다른 태그를 감싸고 있기 때문에 특정 스타일이 지정되지 않은 태그에 기본적으로 적용되는 태그이다. * 태그 역시 문서 전체에 영향을 주는 기본 스타일을 지정하는데 사용된다. 필자는 margin과 padding을 0으로 지정했지만 text-indent :1em; text-align :justify;등의 속성을 지정하기도 한다.

*

{  

padding:0;

margin: 0;

}


많은 편집자들이 제목 스타일을 클래스로 지정한다. 필자는 이를 불필요한 코드와 편집 작업을 추가하는 일이라 생각한다. HTML에는 제목과 관련된 태그가 h1 ~ h6까지 6개가 있다. 지금까지 EPUB을 편집하면서 이 6개의 태그를 모두 사용해 본 적은 단 한번도 없다. 제목, 부 제목, 장 제목, 절 제목, 절 안에 있는 소제목 등 제목을 아무리 많이 넣는다 해도 4단계 이상인 책은 찾기 어렵다. 제목 태그에 스타일을 적용하면 각 제목을 테그로만 묶으면 된다. 다른 클래스를 추가할 필요가 없다. Sigil등 편집기는 제목태그로 목차를 자동 편집하기 때문에 목차를 생성하기도 쉬워진다. 그리고 문서 코드를 열어보면 제목과 본문을 확실히 구분할 수 있다.

h1{

/*책 제목 스타일*/

font-family : "제목";

font-size : 2em;

text-align : center;

margin : 20% 0 10% 0;

text-indent : 0em;

}


대제목과 소제목, 본문 사이의 간격을 두는 방식은 편집자의 스타일에 따라 다르다. 이 탬플릿에서는 margin을 이용해 상하여백을 일정 비율(%)로 뒀다. 이런 방식은 디스플레이의 크기에 따라 자동으로 여백이 조절된다는 장점이 있다. 본문과 제목의 여백을 두려고 <br />을 사용하면 스마트폰에서는 여백이 넓고 태블릿에서는 여백이 좁게 보일 수 있다. %를 사용하면 텍스트가 많이 들어가지 못하는 스마트폰에서는 여백이 적어 본문이 많이 보이고, 태블릿에서는 본문과 제목 사이의 간격이 넓게 벌어져 자연스러운 편집 효과를 줄 수 있다.  

h2{

/*부 제목 스타일*/

font-family : "제목";

font-size : 1.8em;

text-align : center;

margin : 20% 0 10% 0;

text-indent : 0em;

}


h3{

/*장 제목 스타일*/

font-family : "제목";

font-size : 1.4em;

text-align : left;

margin : 10% 0 10% 0;

text-indent : 0em;

}


제목에 테두리를 적용한 예를 보여주기 위해 border 관련 스타일을 몇개 추가했다. 제목 태그에도 테두리나 배경색 등 다양한 스타일 적용이 가능하다.

h4{

/*절 제목 스타일*/

font-family : "제목";

font-size : 1.2em;

text-align : right;

margin : 10% 0 5% 0;

text-indent : 0em;

/*테두리를 위해 추가한 스타일*/

padding : 10px 40px;

max-width : 300px;

border : 2px solid yellow;

border-radius : 25px;

box-shadow : 10px 10px 5px grey;

background-color : grey;

}


p태그는 본문에 사용한다. 그래서 p태그에 본문 스타일을 적용해 놓으면 편집의 90%는 끝난다. 다른 편집 없이 본문을 p태그로 묶기만 하면 편집이 끝이다. 그래서 소설처럼 편집이 많지 않은 책은 30분도 안걸려 편집을 끝낼 수 있다. 본문 스타일을 별도의 클래스로 만든다면 모든 본문에 클래스를 지정해야 하지만 p태그에 스타일을 지정하면 편집이 간단해진다. 

p{

font-family : "본문";

font-size : 1.2em;

line-height : 1.8em;

text-indent : 1em;

text-align : justify;

}


cite 태그는 짧은 인용이나 주석에 사용하는 HTML의 기본 태그다. 태그(tag)에서 (tag)처럼 단어에 간단한 설명이나 한자, 영문 표기를 하는 등에 사용할 수 있다. cite 대신 주석 클래스를 만들어서 표현할 수도 있지만 클래스 보다는 cite로 표현하는게 코딩이 훨씬 간단하다.

클래스를 사용할 때 코드 : <span class="annot">(tag)</span>

cite 태그를 사용할 때 코드 : <cite>(tag)</cite>

cite 태그는 p 태그의 안에 주로 사용하기 때문에 글꼴, 줄간격, 정렬 등 기본 스타일은 p태그를 따른다. 

cite{

/*짧은 인용문이나 주석 스타일 p태그 안에서 사용*/

font-size : 1em;

color : red;

}


blockquote 태그는 문장단위 인용에 사용하는 태그다. 이 역시 클래스로 표현할 수 있지만 blockquote를 사용하면 코딩이 간단해진다. 아래 스타일에서는 margin과 padding을 다른 방식으로 사용했다. 문단 전체를 왼쪽으로 들여쓰기 하기 위해 margin을 5% 줬다. 간격을 px로 줄 수도 있지만 스마트폰에서 5px는 본문과 구분이 되지만 태블릿에서 5px는 거의 구분이 되지 않기 때문에 %를 사용했다. 반면 padding은 px를 썼다. 테두리와 텍스트 사이에 여백이 없으면 아래처럼 답답한 느낌이 든다. 약간의 여백만 있어도 이런 문제는 해결되기 때문에 고정형인 px를 사용해서 여백을 뒀다. 

blockquote{

/*문장 인용*/

font-size : 1.2em;

line-height : 1.8em;

text-indent : 1em;

text-align : justify;

margin : 0 0 0 5%;

padding : 5px;

background-color : grey; 


}


strong 태그는 단어나 문장을 강조하기 위해 사용한다. 편집자가 원하는 스타일을 적용하면 되고 여기에서는 밑줄과 파란색 글자로 강조를 했다. 이 역시 p태그 안에서 주로 사용하기 때문에 p태그의 기본 스타일은 p태그의 스타일을 따른다. 역시 클래스를 이용해도 되지만 태그를 쓰면 코드가 간결해진다.  

strong {

/*단어나 문장의 강조

p태그 안에서 사용*/

text-decoration : underline;

color : blue;

}


윗첨자와 아랫첨자는 sup와 sub 태그를 그대로 사용해도 되지만 스타일을 적용해 원하는 대로 표현할 수도 있다. 클래스로 사용이 가능하다. 

sup{

/*윗첨자

p태그 안에서 사용*/

vertical-align: super;

font-size : 0.6em;

}


sub{

/*아랫첨자

vertical-align: sub;

font-size : 0.6em;

}


편집을 하다 보면 왼쪽, 오른쪽, 가운데 정렬이 필요할 때가 있다. 문단 정렬 역시 스타일을 지정해 두면 편하다. 문단 정렬을 할 때 text-indent : 0; 속성을 부여하는게 좋다. 들여쓰기가 기본으로 지정되어 있을 경우 가운데 정렬을 하면 들여쓰기 만큼 왼쪽으로 치우치게 된다. text-indent:0;을 지정하면 이런 문제를 해결할 수 있다. 

.txt_center {

text-align:center;

text-indent: 0px !important; /* 강제로 들여쓰기를 하지 않음 */

}


.txt_left {

text-align:left;

text-indent: 0px !important; /* 강제로 들여쓰기를 하지 않음 */}

}


.txt_right {

text-align:right;

text-indent: 0px !important; /* 강제로 들여쓰기를 하지 않음 */

}


이미지를 어울림 처리하기 위한 스타일이다. 이미지를 왼쪽이나 오른쪽에 배치하고 이미지 옆으로 텍스트가 나오게 하려면 float 속성을 적용해야 한다.

.img_left {

float : left; /* 이미지를 문단의 왼쪽에 배치 */

text-align : center;

}


.img_right {

float : right; /* 이미지를 문단의 오른쪽에 배치 */

text-align : center;

}


표지이미지에 사용할 수 있는 스타일이다.많은 전자책 파일이 중앙정렬을 해도 오른쪽으로 약간 치우치거나 정렬을 하지 않아 왼쪽에 붙는 경우가 많다. 뷰어의 기본 여백으로 인해 화면에 가득 차지 않는 경우도 있다. 이런 부분들을 고려해서  표지이미지가 화면의 중앙에 가득 차도록 보여주는 스타일이다.


p.cover { /* p 태그 대신 div 태그를 사용할 수 있음 */

text-indent : 0;

text-align : center;

width : 100%;

margin : 0;

padding : 0;

}

img.cover{

width : 100%;

margin : 0;

padding : 0;

}


반응형
posted by 내.맘.대.로 2014. 9. 24. 16:33

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

전자책을 편집할 때 여백은 다양한 목적으로 활용할 수 있다. 제목과 본문을 구분하기 위해 간격을 띄거나 인용구를 구분하기 위해 들여쓰기를 하는데 사용할 수도 있다. HTML에서는 내어쓰기 태그가 없지만 여백과 함께 text-indent를 사용하면 내어쓰기 효과를 낼 수도 있다. 상하좌우 여백을 조절해서 책의 느낌을 바꿀 수도 있고, 테두리를 그릴 때는 내용이 테두리에 달라붙지 않게 여백을 두기도 한다.


여백에 사용하는 태그는 margin과 padding이 있다. margin과 padding은 전혀 다른 속성을 갖고 있지만 이를 구분하지 않고 쓰는 경우가 많다. 


▶ margin : 테두리 바깥쪽 여백 --> margin : 30px;


▶ padding : 테두리 안쪽 여백 --> padding :30px;


HTML 태그를 써서 글을 작성하면 눈에 보이지 않는 가상의 글상자가 만들어 진다. margin은 이 글상자와 글상자 사이의 간격을 의미하고, padding은 글상자 안쪽 여백을 의미한다. 

첫번째 글상자는 바깥쪽 테두리와 안쪽 테두리 사이에 여백이 생긴 것을 볼 수 있다. 이는 안쪽 글상자의 margin이 30px 적용됐기 때문이다. 

두번째 글상자는 안쪽 글상자와 글상자 안에 있는 텍스트 사이에 여백이 30px 생겼다. 대신 바깥쪽 글상자와 안쪽 글상자 사이에 간격은 전혀 없다.(자세히 보면 파란 테두리 바깥으로 회색 점선을 볼 수 있다)


▶ margin : 테두리 바깥쪽 여백 --> margin : 10px;

▶ margin : 테두리 바깥쪽 여백 --> margin : 10px;


▶ padding : 테두리 안쪽 여백 --> padding :10px;

▶ padding : 테두리 안쪽 여백 --> padding :10px;


만약 문단 태그<p>에 margin과 padding으로 각각 여백을 준다면, 눈에 보이지 않더라도 저렇게 테두리가 쳐 지고, 테두리를 기준으로 margin은 테두리 바깥쪽, padding은 테두리 안쪽에 여백이 생긴다. 아래는 위 예제에서 배경색과 테두리만 없앤 결과이다. 


▶ margin : 테두리 바깥쪽 여백 --> margin : 10px;

▶ margin : 테두리 바깥쪽 여백 --> margin : 10px;


▶ padding : 테두리 안쪽 여백 --> padding : 10px;

▶ padding : 테두리 안쪽 여백 --> padding : 10px;


테두리와 배경색을 없애면 margin과 padding이 똑같은 스타일이 적용된 것 처럼 보인다. 그래서 둘을 서로 구분하지 않고 사용하는 경우가 많은데 테두리를 그렸을 때 결과를 보면 둘은 전혀 다른 스타일임을 알 수 있다. 


margin과 padding은 상, 하, 좌, 우 여백을 구분해서 적용할 수 있다. margin, padding 속성으로 네 영역에 각각 여백을 적용할 수도 있고, margin-top, margin-right, margin-bottom, margin-left 태그로 원하는 영역에 한정해서 여백을 지정하는 태그도 있다. 


▶ margin: 10px;

     - 상, 하, 좌, 우 모두 10px씩 여백을 준다.


 margin : 10px 5px 10px 5px;

    - 상 10px, 우 5px, 하 10px, 좌 5px로 앞쪽부터 시계 방향으로 상, 우, 하, 좌 여백을 의미한다.


 margin : 10px 5px;

    - 상하 10px, 좌우 5px 여백을 준다. 


 margin-left : 10px;

    - 왼쪽에 10px 여백을 준다.


 margin : 0px 0px 0px 10px;

    - 왼쪽에 10px 여백을 준다. 




paddin도 동일한 규칙이 적용된다. 


** 참고 : 여백과 관련된 Tip : http://epubguide.net/38



반응형
posted by 내.맘.대.로 2014. 9. 12. 09:30

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

전자책을 만들다 보면 상자 안에 문단이나 본문을 넣어 다른 내용과 구분을 해야 할 때가 있다. 이 글에서도 코드는 본문과 구분할 수 있도록 네모난 글상자를 만들고 그 안에 코드를 작성한다. 상자를 만드는 방식에는 테두리와 글상자가 있다(테두리, 글상자는 설명을 돕기 위해 임의로 정한 이름임). 테두리는 텍스트 주위에 선을 그어 네모난 상자를 만드는 것이고, 글상자는 네모난 개체를 만들고 그 안에 텍스트를 채워 넣는 방식이다. 테두리는 텍스트에 종속되기 때문에 텍스트가 사라지면 테두리도 함께 사라지지만, 글상자는 텍스트와 독립돼 있는 완성된 개체기 때문에 텍스트가 없어도 글상자는 사라지지 않는다. 


▶ 테두리 예제

<p style="border: 1 solid red;">테두리는 문단 주위에 선을 그리는 것으로 문단과 하나로 움직인다. 문단 내용이 사라지면 테두리도 함께 사라진다.</p>


테두리는 문단 주위에 선을 그리는 것으로 문단과 하나로 움직인다. 문단 내용이 사라지면 테두리도 함께 사라진다.


▶ 글상자 예제

<div style="border: 1 solid red;">

<p>글상자는 테두리와 달리 하나의 독립된 개체다. 사각형의 상자를 먼저 만들고 그 안에 내용을 채워 넣기 때문에 내용이 사라져도 글상자는 사라지지 않는다.</p>

</div>


글상자는 테두리와 달리 하나의 독립된 개체다. 사각형의 상자를 먼저 만들고 그 안에 내용을 채워 넣기 때문에 내용이 사라져도 글상자는 사라지지 않는다.


테두리와 글상자 예제를 보면 결과가 동일하고 테두리를 그리기 위해 사용하는 CSS 속성도 같다. 다만 테두리는 <p>태그에 바로 속성을 적용하고, 글상자는 <div>태그에 테두리를 적용한 후 그 안에 <p>태그를 넣은 차이만 있을 뿐이다. 


테두리는 한 문단을 상자 안에 넣을때 간단하게 사용할 수 있다. 위 예에서 처럼 자주 반복되지 않고 한 문단으로 끝나는 상자를 만들 때 테두리 클래스를 만들어 두면 편집을 쉽게 할 수 있다.


글상자는 한번에 여러 문단에 테두리를 치거나 반복적으로 테두리를 적용해야 할 때 사용할 수 있다. 이 문서에서 태그를 표현하기 위해 자주 사용하는 테두리는 모두 글상자로 만들었다.


▶ 테두리와 글상자 비교


<p style="border: 1 solid red;">테두리는 한 문단씩 적용된다</p>

<p style="border: 1 solid red;">테두리는 한 문단씩 적용된다</p>

<p style="border: 1 solid red;">테두리는 한 문단씩 적용된다</p>

<div style="border: 1 solid red;">

<p>여러 문단에 테두리를 적용하고 싶다면 글상자를 이용한다. </p>

<p>여러 문단에 테두리를 적용하고 싶다면 글상자를 이용한다. </p>

<p>여러 문단에 테두리를 적용하고 싶다면 글상자를 이용한다. </p>

</div>


테두리는 한 문단씩 적용된다

테두리는 한 문단씩 적용된다

테두리는 한 문단씩 적용된다

여러 문단에 테두리를 적용하고 싶다면 글상자를 이용한다.

여러 문단에 테두리를 적용하고 싶다면 글상자를 이용한다.

여러 문단에 테두리를 적용하고 싶다면 글상자를 이용한다.


테두리를 이용하면 한 문단을 상자에 넣을 수 있지만 여러 문단을 넣을 수는 없다. 반면 글상자는 <div>태그로 여러 문단을 하나의 상자에 넣을 수 있다. 테두리와 글상자는 쓰임이 다르기 때문에 전자책을 편집할 때 필요에 따라 선택해서 사용하면 된다. 

반응형
posted by 내.맘.대.로 2014. 8. 20. 16:39

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

글꼴(폰트) 속성은 텍스트 속성에 포함될 수 있지만 부가적인 설명이 필요해서 별도로 정리한다.

글꼴 속성은 크게 두 부분으로 이루어진다. 하나는 글꼴 자체를 지정하는 @font-face, 그리고 글꼴을 꾸미는 font-family, src, font-style 속성 등이다. font-face 앞에는 @ 표시가 붙어 다른 속성과 구별된다.

 

@ font-face {

font-family : font_name_01;    /* 사용할 글꼴 이름 */

src : url(../Fonts/font_name_01.ttf);    /* 글꼴이 있는 경로 */

}


@ font-face {

font-family : font_name_02;    /* 사용할 글꼴 이름 */

src : url(../Fonts/font_name_02.ttf);    /* 글꼴이 있는 경로 */

font-style : normal;         /* 폰트 스타일. 한글 폰트에서는 사용하지 않음  */?

font-weight : bold;         /* 폰트의 두께. 지원하지 않는 폰트가 많음 */

}


@font-face는 사용할 글꼴의 위치와 글꼴의 이름을 정하고 글꼴에 부가적인 속성(스타일, 두께)을 지정하는 속성이다. @font-face에 사용할 수 있는 하위 속성으로 글꼴 이름과 위치를 지정하는 font-family,src와 글꼴에 속성을 부여하는 font-style, font-weight 등의 부가 속성이 있는데 한글 글꼴에는 적용되지 않는 경우가 많아 부가적인 속성은 거의 사용하지 않는다. 


CSS 파일에는 1개 이상의 @font-face가 올 수 있다. 여러개의 글꼴을 사용하는 책이라면 사용하는 글꼴 갯수만큼 @font-face가 와야한다.


font-family는 글꼴의 이름을 정하는 속성이다. 많은 편집자들이 글꼴의 이름을 글꼴 파일 이름과 동일하게 지정하는데 이는 고쳐야 할 습관이다. 보다 명확한 CSS를 만들기 위해서는 글꼴의 이름만 봐도 어떤 목적으로 사용되는지를 알 수 있도록, 혹은 어떤 글꼴인지 명확히 알 수 있도록 이름을 지어야 한다. 

예를 들어 코펍폰트로 전자책을 만든다고 하면 


@font-face {

font-family :kopubbatangmedium; 

src : url(kopubbatangmedium.ttf); }


처럼 글꼴 명을 그대로 적을 경우 폰트 이름도 길어질 뿐 아니라 무슨 용도로 사용하는지 파악하기도 힘들다. 

책을 만들때 바탕체를 은바탕, 나눔바탕, 코펍바탕 등 서로 다른 글꼴을 쓰는 경우는 드물기 때문에 아래처럼 간단하게 이름을 정하는게 더 명료하다.


@font-face {

font-family :바탕; /* 혹은 '코펍바탕' 처럼 어떤 폰트인지 알 수 있게 해도 좋다 */

src : url(kopubbatangmedium.ttf); }


글꼴 이름을 사용 목적에 맞게 지정하는 것도 좋다. 만약 제목, 본문, 주석 3개의 글꼴을 사용하고 서로 섞어 쓰지 않는다면 글자 그대로 "본문 글꼴", "제목글꼴", "주석 글꼴" 처럼 사용 목적에 따라 이름을 지정해도 된다. 단, 글꼴 이름을 정할 때 띄어쓰기를 한다면 반드시 따옴표("본문 글꼴")로 묶어 하나의 글꼴 이름이라는 것을 표시해야 한다. 


@font-face {

font-family :"본문 글꼴"; /* 띄어쓰기를 한다면 반드시 따옴표로 묶어준다. */

src : url(kopubbatangmedium.ttf); }


src : url(글꼴 파일 경로)은 사용하고자 하는 글꼴 파일의 경로를 정해주면 된다. CSS 파일과 글꼴 파일이 같은 경로에 있다면 글꼴 파일명을 넣어주면 되고 서로 다른 경로에 있다면 글꼴 파일이 위치한 경로를 입력해 주면 된다. EPUB은 콘텐츠 파일이 있는 OEBPS 폴더가 루트(root)폴더다. 만약 글꼴 파일 위치가 [ EPUB > OEBPS > Fonts >글꼴.ttf ]라고 한다면 경로는 [ ../Fonts/글꼴.ttf ]가 된다.


글꼴은 OTF, TTF, WOFF 등 여러 종류가 있는데 가급적이면 OTF나 TTF 글꼴을 사용하도록 하고 용량이 큰 묶음 글꼴보다는 용량이 작은 개별 글꼴을 사용하는게 좋다. 나눔글꼴이나 코펍폰트 등은 Bold, Medium, Light 등을 폰트 하나에 넣지 않고 개별 폰트로 나눴다. 전자책은 용량이 낮은 사양의 기기부터 PC까지 다양한 환경을 지원해야 하기 때문에 저사양의 기기에 맞춰 제작해야한다. 


p {

font-family : 글꼴이름;  /* @font-face에서 지정한 글꼴 이름 */

font-size : 1em;           /* em, %, px 등을 쓸 수 있으나 가변 사이즈(em, %) 사용 권장 */

}


font-family는 @font-face에서도 사용하지만 선택자에서도 사용된다. @font-face에서 사용할 때는 글꼴의 이름을 지정할때 쓰이고 선택자에서 사용할 때는 지정된 이름의 글꼴을 적용하기 위해 사용한다. 


만약 font-family로 글꼴을 지정했는데 @font-face에서 이름을 정하지 않았다면 기본 글꼴이 지정된다. 기본 글꼴 중에 시스템에서 이름이 지정된 경우도 있다. 굴림, 바탕 등은 시스템에 동일한 글꼴 이름이 있을 경우 @font-face에서 지정하지 않아도 적용될 수 있다. 다만 시스템에 따라 큰 차이가 있기 때문에 @font-face로 이름을 지정한 후 font-family를 사용하는게 좋다.


font-size는 글꼴의 크기를 지정할 때 사용한다. font-size에는 em, %, px 등의 값이 올 수 있다. 하지만 글꼴의 크기를 뷰어의 설정에서 조정하는 경우가 많기 때문에 크기를 변경할 수 있는 가변 사이즈(em, %) 사용을 권장한다. 뷰어에 따라 처리하는 방식이 다른데 일부 뷰어는 강제로 px를 뷰어 설정에 맞추는 경우가 있고, px는 글자 크기를 변경하지 않을 수도 있다. 그래서 px를 사용하게 되면 일부 글자가 아주 작거나 아주 크게 나올 수 있다. 

1em과 100%는 기기의 기본 글꼴 크기에 맞춰진다. 1em이나 100%를 기준으로 하면 크기나 해상도에 관계 없이 가독성이 보장된다. 하지만 px로 크기를 맞추면 5인치의 고해상도 기기에서는 글자가 아주 작게 표현되고, 10인치의 저해상도에서는 글자가 아주 크게 표현되는 등 일정한 크기를 보장할 수 없기 때문에 글자 크기가 내용에 직접적인 영향을 주는 경우가 아니라면 px는 피하는게 좋다.



p { 

font-style : italic;

font-weight : 200;


이 두 속성 외에 글꼴을 꾸며주는 몇가지 속성이 있는데 한글 글꼴에서는 사용하지 않는다. 그리고 한 글꼴에 medium, light, bold 등 여러 서체가 들어가면 글꼴 파일의 용량이 커져 파일 하나에 하나의 속성만 넣어 글자 용량을 줄인 글꼴 파일을 많이 사용해서 font-weight 속성을 적용해도 본문에서 변화가 없는 경우가 많다. 모든 기기에서 동일한 스타일로 보이도록 하고 싶다면 이런 속성은 피하는게 좋다. 


반응형