내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
외부 스타일은 내부 스타일과 스타일을 만드는 방식은 동일하다. 다른 점은 내부 스타일은 HTML파일 안에 스타일이 정의되지만 외부 스타일은 별도의 CSS파일을 만든다는 점이다. [파일명.css] 처럼 .css 확장자가 붙은 스타일 파일을 만들고, 이 파일을 HTML 파일 안에 링크를 걸어 사용한다. 1.2.4장에서 설명했던 스타일은 외부 스타일로 아래처럼 적용할 수 있으며 내부 스타일과 동일한 결과가 적용된다.
파일명 : style.css로 저장
@font-face {
font-family:"기본글꼴";
src: url("../UnDotum.ttf");
}
h1 {
font-size : 2.0em;
text-align : center;
margin : 40px 20px 10px 20px;
}
p {
text-align: justify;
text-indent: 1em;
font-family:"기본글꼴";
font-size: 1em;
}
p.blue_color
{
color:blue;
}
.txt_red
{
color:red;
}
.txt_center {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>제목은 가운데 정렬의 큰 글씨체</h1>
<p> 본문은 기본글꼴에, 들여쓰기를 하고, 양쪽정렬이 되었으며 글자 크기는 기본 크기다. <span class="txt_red">기본크기란 뷰어(브라우저)가 기본으로 정한 크기를 말한다.</span> 뷰어가 12 point를 기본 글자 크기로 정했다면 1em은 12 point가 된다. 100%와 동일한 값이다. 글자 크기는 절대 크기인 픽셀(px) 단위 보다는 상대 크기인 em이나 %를 사용하는 것이 좋다. 전자책을 특정 기기, 예를 들면 4인치 아이폰 4s 처럼, 전용으로 만든다면 픽셀 단위여도 상관 없지만 다양한 4인치, 5인치, 10인치 등 디스플레이 크기가 다르고, 600*800, 768*1024, 1080p 등 해상도가 다양해 지면 절대 크기는 가독성을 떨어뜨릴 수 있다. 4인치의 600*800 해상도 기기에서는 12픽셀이 볼만한 크기지만, 4인치 1200*1600해상도라면 글자 크기가 1/4로 작아진다.
<p class="txt_center">p태그 스타일에 정렬만 '가운데center'가 된다. </p>
<p class="blue_color">p 태그 스타일에 글자 색만 파란색이 된다.</p>
<p class="txt_center blue_color">p태그 스타일에 가운데 정렬과 글자색 속성이 추가된다.</p>
<h1 class="blue_color">.txt_blue 클래스는 p태그 전용이기 때문에 h태그에는 적용되지 않는다</h1>
</body>
</html>
css sample_외부 스타일.zipHTML 문서의 헤더 사이에 있던 스타일을 style.css라는 파일로 만들어 별도로 저장하고, HTML 문서에는 별도로 저장한 CSS 파일을 링크로 연결했다.
<link href="style.css" rel="stylesheet" type="text/css" />
이렇게 하면 HTML 문서는 더 간결해진다. 그런데 문서를 간결하게 만들자고 파일을 두개로 나눌 필요가 있을까?
외부 스타일을 만드는 이유는 문서를 간결하게 정리하는데 있는게 아니다. 문서가 간결해 지는 것 외에도 아무 많은 이점이 있다.
1. 외부 스타일을 적용하면 문서가 간결해 진다.
- 1.2.4장의 내부 스타일 예제와 위의 예제를 비교해 보면 쉽게 이해할 수 있다. HTML 문서 내에 CSS가 들어가지 않는 것만으로도 문서가 훨씬 간결해진다.
2. 문서 내용을 여러개의 HTML 파일로 나누더라도 일관된 스타일을 적용할 수 있다.
- 내부 스타일을 적용하면 같은 내용이라도 스타일이 여러번 정의된다. 편집을 하다 보면 스타일을 수정하게 될 때가 있는데 HTML 파일을 하나씩 모두 수정해야 하는데 이런 과정을 반복하다 보면 스타일이 틀어지게 된다. 하지만 CSS파일을 사용하면 CSS 파일 하나만 수정하게 되고, 수정된 내용이 모든 HTML 파일에 적용되어 스타일이 항상 일관되게 유지된다.
3. CSS 스타일만 수정하면 모든 문서에 수정된 내용이 반영되기 때문에 편집이 쉬워진다.
- 각 챕터별로 HTML 파일로 나눠진 10개의 챕터로 된 책이 있다고 하자. 챕터의 제목을 다른 스타일로 바꿔야 할 경우 내부 스타일은 10번을 작업해야 한다. 하지만 CSS를 이용하면 한번의 작업으로 10개의 챕터를 모두 수정할 수 있다.
4. 문서의 양이 줄어들고 뷰어의 성능을 높일 수 있다.
- 뷰어는 문서를 열 때마다 스타일을 분석한다. 뷰어에서 가장 많은 부하가 걸리는 부분 중 하나가 이 스타일을 분석하는 작업이다. CSS를 이용하게 되면 뷰어는 한번만 스타일을 분석하면 되는데 내부 스타일을 이용하면 모든 스타일이 동일하더라도 챕터를 열 때마다 스타일을 분석하기 때문에 챕터가 열리는 속도가 느려질 수 있다.
5. 누구나 쉽게 스타일을 이해하고 편집할 수 있다.
- CSS로 스타일을 정리해 놓으면 책이 어떻게 편집됐는지 이해하기 위해 CSS 파일만 분석하면 된다. 모든 HTML 파일을 열어볼 필요 없이 CSS 파일만 확인하면 스타일이 어떻게 적용됐는지 확인할 수 있기 때문에 편집자가 바뀌더라도 스타일을 쉽게 수정할 수 있다.
6. 재활용이 가능하다.
- 출판사마다 고유의 편집 스타일을 갖고 있다. 그리고 분야별로 적용하는 스타일이 다르다. CSS를 이용하면 스타일을 템플릿화 시킬 수 있어 책에 일관된 스타일을 적용할 수 있게 된다. 책을 만들 때마다 새로 스타일을 조정할 필요 없이 CSS 파일로 정리된 스타일을 적용하기만 하면 된다. 물론 책의 내용에 따라 세부적인 스타일을 적용해야 한다면 그 책의 CSS 파일을 수정하면 된다. 또한 소설, 여행, 인문 등으로 템플릿을 만들어 관리한다면 성격이 다른 분야에 다른 스타일을 적용할 수 있기 때문에 편집 시간을 크게 줄일 수 있다.
이 외에도 외부 스타일의 장점은 많이 있지만 이정도만 해도 외부 스타일을 사용해야 하는 이유로 충분하리라 생각한다.
'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글
| 1.2.5.1 CSS 구성 요소 - 선택자(selector) (0) | 2014.08.06 |
|---|---|
| 1.2.4.3 CSS 스타일 적용방식 - 인라인 스타일 (0) | 2014.08.04 |
| 1.2.4.1 CSS 스타일 적용방식 - 내부 스타일 (0) | 2014.03.19 |
| 1.2.3 CSS 스타일 적용 (0) | 2014.02.18 |
| 1.2.2. CSS의 기본 구조 (0) | 2014.02.18 |