내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
1.2.3 CSS 스타일 적용
스타일은 HTML 태그에 적용하는 방식(인라인 스타일:Inline style), HTML 문서에 적용하는 방식(내부 스타일:Internal Style), CSS파일을 따로 만들어 적용하는 방식(외부 스타일 : External Style) 이렇게 3가지 방식으로 적용이 가능하다.
만약 한 문서에 3개의 스타일을 모두 적용했다면 1순위 인라인 스타일 > 2순위 내부 스타일 > 3순위 외부 스타일 의 순서로 서로 스타일이 적용된다. 예를 들어 인라인 스타일에 글자색을 ‘빨강'으로 놓고 외부 스타일에 ‘노랑'을 지정했다면 인라인 스타일에서 지정한 ‘빨강'이 글자색이 된다.
인터넷 브라우저에서는 외부 스타일 다음에 브라우저의 기본 스타일이 적용되는데 전자책 뷰어는 뷰어에 따라 다르다. 어떤 뷰어는 CSS를 모두 받아주지만 일부 뷰어는 CSS를 무시하는 경우가 있어 CSS 스타일이 제대로 표현되지 않을 수 있다. 또한 사용자가 스타일을 편집할 수 있게 한 뷰어라면 외부 스타일이 무시될 수 있다. 따라서 스타일을 적용할 때에는 어떤 뷰어에서 사용할 것인가도 고려해야 한다.
□ 인라인 스타일
인라인 스타일은 HTML 태그에 직접 스타일을 적용하는 방식이다.
<p style=”font-size:1.2em; color:blue;”>글자크기 1.2em, 글자색 파랑</p>
인라인 스타일은 모든 태그에 스타일을 적용해야 하기 때문에 작업 시간도 많이 걸리고, 문서 전체 스타일에 통일을 주기 어려워 사용하지 않는다. 하지만 특수한 편집이 필요할 때 유용하다.
빨강 12px,파랑 16px,검정 20px,
이런 내용이라면 편집자는 글자 색과 글자 크기가 변하지 않고 그대로 보여지기를 원할 것이다. 이 편집을 외부 스타일로 지정했다면 사용자가 글자 크기를 변경하거나 색을 변경할 때 함께 변경될 수 있다. 이럴 때 인라인 스타일을 사용한다면 외부에서 어떤 스타일 변화가 있더라도 글자 크기와 글자색이 바뀌지 않고 항상 같은 모습으로 표현된다.(일부 뷰어에서는 스타일을 완전히 무시하는 경우가 있어 인라인 스타일도 적용되지 않을 수 있다.)
□ 내부 스타일
내부 스타일은 HTML문서의 <header>에 CSS를 정의하는 방식이다.
<html>
<header>
<style>
p { color:blue; font-size:1em;}
</style>
</header>
<body>
<p>본문</p>
</body>
</html>
내부 스타일은 HTML 문서 전체에 적용되기 때문에 인라인 스타일보다 편집이 쉽다. 하지만 10개의 챕터를 10개의 HTML 파일로 나눈 책이라면 각 파일마다 스타일을 부여해야 하고, 편집을 수정 할때도 10개의 파일을 모두 수정해야 한다.
내부 스타일은 하나의 HTML 파일에 모든 내용이 다 들어가고 스타일이 2~3개 정도로 적은 경우에는 간편하게 사용할 수 있지만 정의해야 할 스타일이 많거나 파일이 여러개인 경우에는 사용하지 않는 것이 좋다.
□ 외부 스타일
외부 스타일은 스타일 시트 파일(파일명.css)을 만들어 스타일을 정의하고, 이 파일을 HTML 문서에 링크로 연결해 사용하는 방식이다. 책을 편집할 때 가장 많이 사용하는 방식이며, 대부분의 뷰어도 외부 스타일을 사용할 것을 권장하고 있다.
/* style.css 파일 */
p{
color:blue;
font-size:1em;
}
h1 {
font-family:"강조글꼴";
text-align: center;
margin: 2em 0 2em 0;
}
CSS 스타일을 별도의 파일로 만든다 - style.css
<html>
<header>
<style>
<link rel="stylesheet" type="text/css" href="style.css">
</style>
</header>
<body>
<h1> 제목 </h1>
<p>본문</p>
</body>
</html>
html 문서에 CSS 파일을 연결해서 스타일을 지정한다.
외부스타일을 이용하면 문서를 여러개의 파일로 나눠도 전체에 동일한 스타일을 적용할 수 있고, 스타일을 수정할 때도 CSS파일만 수정하면 되서 작업 시간을 줄일 수 있다. 또한 하나의 CSS파일 안에 여러 스타일을 정의하고, 이를 전체 문서에 적용할 수 있기 때문에 파일 용량도 줄일 수 있고, 관리도 편하다.
'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글
| 1.2.4.3 CSS 스타일 적용방식 - 인라인 스타일 (0) | 2014.08.04 |
|---|---|
| 1.2.4.2 CSS 스타일 적용방식 - 외부 스타일 (0) | 2014.03.19 |
| 1.2.4.1 CSS 스타일 적용방식 - 내부 스타일 (0) | 2014.03.19 |
| 1.2.2. CSS의 기본 구조 (0) | 2014.02.18 |
| 1.2.1 CSS란? (0) | 2014.02.18 |