내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
CSS는 태그 내에 직접 적용하는 인라인 스타일, 꾸미고자 하는 HTML문서에 스타일을 지정하는 내부 스타일, 별도의 CSS파일을 만들어 모든 문서에 적용할 수 있는 외부 스타일 이렇게 세가지 방식으로 적용을 할 수 있다. 아래에 보이는 샘플은 이중 내부 스타일로 CSS를 적용한 모습이다. 스타일은 헤더<head>...</head> 사이에 스타일 태그<style>...</style>로 묶어 지정할 수 있다. 이렇게 지정된 스타일은 해당 HTML 문서 전체에 영향을 주게 된다.
<!DOCTYPE html>
<html>
<head>
<style type="text/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;
}
</style>
</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_내부 스타일.zip스타일을 하나씩 살펴 보도록 하자.
먼저 제목을 표현하는 <h1> 태그의 스타일은 선택자를 태그로 지정했다.
h1 {
font-size : 2.0em;
text-align : center;
margin : 40px 20px 10px 20px;
}
이 의미는 문서에서 사용하는 <h1>...</h1>태그에는 별도의 스타일을 지정하지 않아도 글자 크기 2.0em, 가운데 정렬, 위쪽 40픽셀, 오른쪽 20픽셀, 아래쪽 10픽셀, 왼쪽 20픽셀의 간격을 띄운 스타일을 지정한다는 의미이다. 따라서 문서를 작성할 때 제목의 스타일을 신경쓰지 않고 <h1>...</h1>태그만 사용해도 이 스타일이 항상 적용된다.
아래 나오는 <p>태그도 마찬가지이다.
p {
text-align: justify;
text-indent: 1em;
font-family:"기본글꼴";
font-size: 1em;
}
문서를 작성할 때 가장 많이 쓰는 태그가 <p>태그이다. 문서의 본문은 주석을 달거나 인용구를 넣는 등 본문과 구분이 필요하지 않는 이상 동일한 스타일이 적용된다. 그리고 이런 문단이 수백, 수천개가 나올 수 있다. 매번 문단을 추가할 때마다 스타일을 지정해야 한다면 아주 귀찮고 힘든 작업이 될 것이다. 그래서 문단 태그인 <p>태그에 스타일을 한번 지정함으로써 문단마다 스타일을 지정하는 수고를 덜 수 있다.
CSS에서 <p>태그의 속성을 정의했기 때문에 아무런 속성을 지정하지 않아도 양쪽정렬에 들여쓰기 1em(글자 한자 크기), 글꼴은 기본글꼴, 글자 크기는 1em으로 지정된다. 이렇게 문단에 기본 스타일을 적용해서 문서를 작성하다 보면 인용구나 주석처럼 본문과 다른 스타일을 적용해야 할 필요가 있다. 이때 사용할 수 있는 속성이 클래스(class="선택자")이다.
class는 혼자서 사용할 수 없고 다른 태그의 속성으로만 적용할 수 있다. 이때 사용하는게 <span>태그이다. <span> 태그는 그 자체로는 아무런 속성을 갖고있지 않다. 대신 어떤 속성이든 전달하는 역할을 한다. 특정 태그가 아닌 임의의 속성을 지정하기 위해서는 [.선택자]를 사용한다. 앞에 점[.]을 찍고 표현하고자 하는 선택자의 이름을 지정한 후 속성을 지정하면 된다. 이렇게 지정된 선택자는 어떤 태그에서도 사용할 수 있다.
.txt_red
{
color:red;
}
<span class="txt_red">기본크기란 뷰어(브라우저)가 기본으로 정한 크기를 말한다.</span>
CSS에서 글자 색을 빨간색으로 지정한 .txt_red 선택자의 속성을 <span>태그가 문단 내에 그대로 전달을 하기 때문에 <p>태그의 기본 속성에 빨간색 속성이 더해져서 <span>태그로 묶인 부분만 빨간색으로 표현된다.
스타일을 지정하다 보면 특정 태그에만 스타일이 적용되야하는 경우가 있다. 이럴 경우 선택자 앞에 적용되야 하는 태그를 붙여 [태그.선택자]로 이름을 만든 후 스타일을 부여하면 된다.
p.blue_color
{
color:blue;
}
이렇게 태그가 지정된 선택자는 다른 태그에서는 적용되지 않는다.
<p class="blue_color">p 태그 스타일에 글자 색만 파란색이 된다.</p>
<h1 class="blue_color">.txt_blue 클래스는 p태그 전용이기 때문에 h태그에는 적용되지 않는다</h1>
이 문서를 브라우저로 열어보면 <p> 태그는 파란색으로 표현되지만 <h1>태그는 파란색이 적용되지 않는 것을 볼 수 있다. 이런 형식은 특정 태그에서만 약간 다른 스타일을 적용하고 싶을 때 사용할 수 있다.
p.blue_color { color:blue; font-size:0.8em;}
h1.blue_color { color:blue; font-size:1.2em;}
이렇게 지정한다면 둘다 파란색을 표현하는 속성은 같지만 제목에는 글자 크기를 크게, 본문에는 글자 크기를 작게 꾸밀 수 있다.
끝으로 스타일은 여러개를 중복해서 사용할 수 있다. 가운데 정렬에 파란색으로 편집을 하고 싶다면 아래처럼 두개의 속성을 한번에 적용하면 된다. 원하는 스타일이 서로 다른 클래스로 지정되있다면 두 속성을 합한 새로운 클래스를 만들 필요 없이 class="선택자 선택자 선택자 선택자" 이렇게 중복으로 선택자를 사용하면 된다. 이때 선택자와 선택자는 공백으로 구분하면 된다.
<p class="txt_center blue_color">p태그 스타일에 가운데 정렬과 글자색 속성이 추가된다.</p>
헤더에 스타일을 지정하다 보면 스타일이 많아져 문서가 복잡해 지거나 문서의 양이 늘어날 수 있다. 내부 스타일을 사용하면 모든 HTML 문서에 동일한 내용을 반복해서 넣어야 하기 때문에 화면에 보이는 내용은 얼마 안되도 스타일 때문에 문서의 크기가 수십에서 수백 킬로바이트까지 늘어날 수 있다. 실제로 유통사에서 판매되는 책 중에 이런 EPUB들이 상당수 존재한다.
편집기를 사용할 경우 동일한 스타일이 반복해서 만들어지는 경우도 있다. 텍스트의 양만으로는 100kb도 안될 정도의 분량인데 200kb ~ 300kb 이상 더 심한 경우는 1mb가 넘는 경우가 있는데 이런 문서를 열어보면 대부분 WYSIWYG 방식1의 저작도구로 편집한 경우가 많다. 이런 EPUB은 동일한 스타일의 CSS가 아래 예처럼 무한히 반복되어 불필요하게 용량을 늘리고 뷰어의 속도를 느리게 하거나 오류가 나게 된다. 이는 편집기의 문제이기 보다는 편집기에만 의존하는 편집자의 잘못이다. 아무리 뛰어난 편집기라 하더라도 이런 문제를 해결할 수는 없다. 따라서 편집자가 CSS와 HTML을 제대로 알고 있어야 제대로 된 EPUB을 제작할 수 있다.
잘못된 CSS 스타일 지정
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face {
font-family:"기본글꼴";
src: url("../UnDotum.ttf");
}
h1.title01 {
font-size : 2.0em;
text-align : center;
margin : 40px 20px 10px 20px;
}
p.text01 {
text-align: justify;
text-indent: 1em;
font-family:"기본글꼴";
font-size: 1em;
}
p.text02 {
text-align: justify;
text-indent: 1em;
font-family:"기본글꼴";
font-size: 1em;
}
p.text03 {
text-align: justify;
text-indent: 1em;
font-family:"기본글꼴";
font-size: 1em;
}
p.text04 {
text-align: justify;
text-indent: 1em;
font-family:"기본글꼴";
font-size: 1em;
}
h1.title02 {
font-size : 2.0em;
text-align : center;
margin : 40px 20px 10px 20px;
}
</style>
</head>
<body>
<h1 class="title01">제목은 동일한 스타일로 적용되어 있지만 다른 선택자가 적용되어 있다.</h1>
<p class="text01">모든 P태그는 동일한 스타일이지만 다른 선탁자가 적용되어 있다.</p>
<p class="text02">모든 P태그는 동일한 스타일이지만 다른 선탁자가 적용되어 있다.</p>
<p class="text03">모든 P태그는 동일한 스타일이지만 다른 선탁자가 적용되어 있다.</p>
<p class="text04">모든 P태그는 동일한 스타일이지만 다른 선탁자가 적용되어 있다.</p>
<h1 class="title02">제목은 동일한 스타일로 적용되어 있지만 다른 선택자가 적용되어 있다.</h1>
</body>
</html>
- 위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 이는 편집 명령어를 입력하여 글꼴이나 문장 형태를 바꾸는 방식과 구별된다. 현재 대부분의 워드 프로세서는 위지위그 방식을 쓰고 있으나 HTML이나 TeX는 편집 명령어를 통해 편집하는 방식을 고수하고 있다. 이는 문서의 호환성, 범용성 때문이다. http://ko.wikipedia.org/wiki/%EC%9C%84%EC%A7%80%EC%9C%84%EA%B7%B8 [본문으로]
'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글
| 1.2.4.3 CSS 스타일 적용방식 - 인라인 스타일 (0) | 2014.08.04 |
|---|---|
| 1.2.4.2 CSS 스타일 적용방식 - 외부 스타일 (0) | 2014.03.19 |
| 1.2.3 CSS 스타일 적용 (0) | 2014.02.18 |
| 1.2.2. CSS의 기본 구조 (0) | 2014.02.18 |
| 1.2.1 CSS란? (0) | 2014.02.18 |
ol_li_tag_sample.html