HTML이 전자책의 뼈대라면, CSS는 그 위에 입히는 인테리어입니다.
벽돌만 쌓여 있던 집에 색을 칠하고, 가구를 놓고, 조명을 다는 과정이라고 보시면 됩니다.
저도 처음 전자책을 만들 때는 CSS가 가장 낯설었어요. “프로그래밍 언어인가?”라는 생각도 들었죠. 그런데 막상 배우다 보니, CSS는 엄청 복잡한 게 아니라 글자 크기, 색, 여백 같은 ‘꾸밈’만 담당하는 언어라는 걸 알게 됐습니다.
1. CSS란?
- Cascading Style Sheets의 줄임말
- HTML로 만든 문서에 색상, 글꼴, 여백, 정렬 같은 스타일을 입히는 언어
- 전자책(ePub)에서 가독성과 디자인을 책임지는 핵심 요소
👉 HTML이 없다면 책이 아예 만들어지지 않겠지만, CSS가 없다면 책은 흑백 워드 문서처럼 밋밋하게만 보일 겁니다.
2. CSS를 적용하는 3가지 방법
전자책에서 CSS를 적용하는 방법은 세 가지가 있습니다.
1) 인라인 스타일 (inline style)
→ HTML 태그 안에 직접 스타일을 넣는 방법
html
<p style="color: blue; font-size: 14px;">이 문장은 파란색입니다.</p>
간단하지만 코드가 지저분해지고, 수정이 힘듭니다.
2) 내부 스타일 (internal style)
→ HTML 문서의 <head> 안에 <style> 태그로 작성
html
<style>
p { color: green; }
</style>
이 문서 안에서만 적용됩니다.
💻 스타일 예시)
<head>
<title>테스트 문서</title>
<style type="text/css">
p { color: green; font-size: 1.2em; }
</style>
</head>
<body>
<p>이 문장은 초록색으로 표시됩니다.</p>
<p>시길 프로그램에서 바로 확인해보세요.</p>
</body>
→ 이렇게 해야 Sigil의 **미리보기(BookView/PageEdit)**에서 스타일이 정상적으로 보입니다.
📌 중요한 포인트
(1) <body> 안에 반드시 <p> 문단이 있어야 → 스타일이 적용된 걸 확인할 수 있습니다.
(2) <style> 태그는 <head> 안에 넣어야 합니다.
(3) 전자책은 XHTML 1.1 규격을 따르기 때문에, 반드시 type="text/css" 속성을 붙이는 게 안전합니다.
(4) <p> 외에도 <h1>, <div> 같은 다른 태그에 스타일을 지정해두고 확인할 수도 있습니다.
3) 외부 스타일 (external style)
→ 별도의 CSS 파일(.css)을 만들어 연결하는 방법
html
<link href="../Styles/style.css" type="text/css" rel="stylesheet" />
전자책 제작에서는 이 방법을 가장 권장합니다.
→ 수정도 쉽고, 여러 HTML 문서에 한 번에 적용할 수 있어서 효율적입니다.
→ 별도의 CSS 파일(.css)을 만들어 연결하는 방법 (전자책 제작에서 가장 권장)
① CSS 파일 만들기 (style.css)
/* style.css */
p {
color: blue;
font-size: 1.1em;
line-height: 1.6;
}
h1 {
text-align: center;
color: darkred;
}
② HTML 파일에서 불러오기 (chapter1.xhtml)
<head>
<title>제1장 테스트</title>
<link href="../Styles/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>전자책 CSS 외부 스타일 예시</h1>
<p>이 문장은 파란색으로 표시됩니다.</p>
<p>줄 간격도 넓게 적용된 걸 볼 수 있습니다.</p>
</body>
📍 Sigil에서 chapter1.xhtml을 열고 미리보기로 확인하면,
- 제목 <h1>은 중앙 정렬 + 빨간색
- 본문 <p>는 파란색 + 줄간격 1.6 으로 표시됩니다.
3. 꼭 알아야 할 CSS 선택자
CSS는 무엇을 꾸밀지(선택자) 와 **어떻게 꾸밀지(속성)**의 조합입니다.
1) 태그 선택자
css
p { font-size: 12pt; }
→ 모든 <p> 문단에 글자 크기 12pt 적용
2) 클래스 선택자
css
.highlight { color: red; }
→ <span class="highlight"> 부분에만 빨간색 적용
3) 아이디 선택자
css
#title { text-align: center; }
→ <h1 id="title"> 부분만 중앙 정렬
👉 전자책에서는 주로 태그 선택자 + 클래스 선택자 조합을 가장 많이 씁니다.
4. CSS로 자주 쓰는 속성
전자책 꾸밈에서 꼭 필요한 속성 몇 가지만 정리해보겠습니다.
1) 글꼴
css
p { font-family: "나눔명조", serif; }
2) 글자 크기
css
p { font-size: 1em; }
3) 색상
css
h1 { color: #333333; }
4) 줄 간격
css
p { line-height: 1.6; }
5) 여백
css
p { margin: 10px 0; }
👉 전자책은 가독성이 최우선이므로, 지나친 장식보다는 깔끔하고 눈에 잘 들어오는 스타일이 좋습니다.
📌 시행착오
처음에는 CSS를 욕심내서 화려하게 꾸며봤습니다. 배경색을 넣고, 다양한 글꼴을 불러오고, 심지어 그림자 효과까지.
그런데 실제 전자책 뷰어에서 열어보니 전혀 의도대로 나오지 않거나, 아예 오류가 나기도 했습니다.
그때 깨달은 건 전자책 CSS는 단순할수록 좋다는 사실이었습니다.
뷰어마다 지원하는 CSS 범위가 달라서, 복잡한 효과는 깨지기 쉽거든요.
✅ 오늘의 정리
- CSS는 전자책의 디자인과 가독성을 담당한다.
- 인라인/내부/외부 스타일 방식이 있지만, 외부 CSS 파일 연결이 가장 효율적이다.
- 자주 쓰는 선택자(태그, 클래스, 아이디)와 기본 속성(글꼴, 크기, 줄 간격, 여백)을 익혀두면 충분하다.
- 전자책 CSS는 단순하고 깔끔할수록 좋다.
👉 지난 글 : HTML 태그 10가지
전자책 만들 때 꼭 알아야 할 HTML 태그 10가지
지난 글에서 전자책의 뼈대가 되는 HTML 기본 구조를 살펴봤습니다. 이제 본격적으로, 전자책을 만들 때 자주 쓰이는 실전 태그들을 알아볼 차례입니다. 사실 HTML에는 수십 가지 태그가 있지만,
gardengreem.tistory.com
👉 다음 글 : CSS 속성 심화
CSS 선택자와 속성 심화, 실전 스타일링 예시
지난 글에서 CSS의 기본적인 적용 방법을 살펴봤습니다. 오늘은 그 연장선으로, CSS 선택자와 속성을 조금 더 깊게 다뤄보겠습니다. 전자책에서는 복잡한 웹사이트만큼의 화려한 스타일은 쓰지
gardengreem.tistory.com
'디자인 실무 > 전자책' 카테고리의 다른 글
| CSS로 텍스트 꾸미기 – 글자 크기, 색상, 줄 간격, 여백 설정하기 (0) | 2025.10.01 |
|---|---|
| CSS 선택자와 속성 심화, 실전 스타일링 예시 (0) | 2025.09.30 |
| 전자책 만들 때 꼭 알아야 할 HTML 태그 10가지 (0) | 2025.09.29 |
| 전자책의 뼈대, HTML 기본 구조 제대로 이해하기 (0) | 2025.09.29 |
| 전자책 만들기, 준비물은 이것만 챙기면 충분합니다 (Sigil 설치) (2) | 2025.09.28 |
