EPUB에서 꼭 알아야 할 HTML 기본 태그 & 문단 구조

전자책 EPUB 제작에서 가장 많이 쓰이는 건 사실 HTML + CSS입니다.

전자책을 만들다 보면 " 이거 그냥 워드 쓰듯 하면 되는 거 아냐?"라는 생각이 듭니다. 종이책은 인디자인, 워드로 레이아웃을 잡지만, EPUB은 결국 웹페이지처럼 태그와 스타일로 이루어져 있어요. HTML과 CSS로 뼈대를 만들고 꾸미는 방식입니다.

 

처음 보면 코드가 낯설 수 있지만, 막상 필요한 건 단순합니다. 책을 읽을 때 자주 보이는 제목, 문단, 목록, 인용문, 구분선 이 다섯 가지만 제대로 써도 전자책 구조가 깔끔해집니다.

 

EPUB 제작 시 꼭 알아야 할 HTML 기본 태그와 문단 구조를 정리합니다.

 

1. EPUB에서 자주 쓰는 HTML 태그

1) 제목 태그 (h1 ~ h3)

- h1 : 책 제목, 챕터 제목

- h2 : 소제목

- h3 : 더 작은 단락 구분

html

<h1> 제1장 전자책 시작하기</h1>
<h2> EPUB의 정의 </h2>
<h3> 포맷 비교 </h3>

👉 TIP: h1은 한 챕터에 한 번만 쓰는 게 좋아요. 뷰어에 따라 자동 목차가 생성되기도 합니다.

 

 

2) 문단 태그 (p)

워드에서 엔터 두 번 치는 것과 달리, EPUB은 반드시 <p>로 감싸야 문단이 인식됩니다.

- 줄마다 <br/> 남발은 금지

- 문단 단위로 <p>로 감싸야 가독성이 좋아집니다.

html

<p>전자책은 EPUB, PDF, MOBI 등 다양한 포맷으로 나뉩니다.</p>
<p>그중 EPUB은 가변 레이아웃을 지원해 글자 크기와 화면 크기에 유연합니다.</p>

👉TIP: 줄바꿈은 <br> 대신 CSS의 margin으로 조정하세요. 뷰어에 따라<br> 남발은 줄 간격이 망가질 수 있습니다.

 

 

3) 목록 태그 (ul/ol)

정보를 나열할 때는 리스트를 쓰는 게 깔끔합니다.

- 블릿 리스트 : <ul>

- 번호 리스트 : <ol>

html

<ul>
   <li>EPUB</li>
   <li>PDF</li>
   <li>MOBI</li>
</ul>

 

html

<ol>
   <li>EPUB</li>
   <li>PDF</li>
   <li>MOBI</li>
</ol>

👉TIP: <ol>을 쓰면 자동으로 번호가 매겨져요.

리스트 안에 다시 리스트를 넣는 중접도 가능하지만, 과하면 깨지기 쉽습니다. 

 

 

4) 인용문 (blockquote)

책 속에 긴 인용이나 강조 문장이 들어갈 땐 blockquote가 제격이에요.

html

<blockquote>
전자책의 가장 큰 장점은 '언제 어디서든 읽을 수 있다'는 점입니다.
</blockquote>

👉TIP: CSS로 테두리를 주면 깔끔한 강조 박스처럼 보입니다.

 

 

5) 구분선 (hr)

챕터와 챕터 사이, 이야기의 전환부에 많이 씁니다.

html

<hr />

👉 TIP: 단순한 회색 선부다 CSS로 굵기, 색상을 조정하면 개성이 살아납니다.

 

---

2. CSS로 문단 구조 다듬기

css

body {
line-height: 1.6;
font-size: 1rem;
font-family: sans-serif;
}

h1, h2, h3 {
page-break-after: avoid;
font-weight: bold;
}

p {
margin: 0 0 1em;
}

blockquote {
margin: 1em 0;
padding: .5em 1em;
border-left: 3px solid #999;
color: #7d4a4a;
}

hr {
border: none;
height: 1px;
background: #7d4a4a;
margin: 1.5em 0;
}

👉TIP

- page-break-before 속성을 쓰면 챕터마다 자동으로 새 페이지가 시작됩니다.

- 뷰어별 호환성을 생각해 page-break-*와 break-before/after를 같이 써두면 안전합니다.

css

h1 {
page-break-before: always;
break-before: page;
}

 

---

 

📌 page-break-* vs break-before/ager

전자책 EPUB에서 챕터를 나눌 때 주로 쓰는 CSS 속성이에요.

 

(1) 옛날 방식 (EPUB2 / 구버전 뷰어 호환)

css

h1 {
page-break-before: always;
page-break-after: avoid;
}

- page-break-* 속성은 오래된 CSS2 시절부터 있던 기능.

- Kindle, 구버전 Adobe digital editions 같은 옛 뷰어에서만 제대로 동작하는 경우 많음.

 

(2) 최신 방식 (EPUB3 / 최신뷰어)

css

h1 {
break-before: page;
break-after: avoid-page;
}

- CSS3에서 새로 생긴 속성.

- iBooks(애플북스), 리디북스, 구글 플레이북스 등 최신 뷰어에서 잘 지원.

 

✅ 왜 둘 다 쓰나? (=안전하다)

전자책은 독자가 어떤 뷰어로 볼지 알 수 없습니다. 

- Kindle : 옛날 방식(page-break-*)은 먹는데 break-before는 무시할 수도 있음.

- iBooks / 리디북스 : 최신 방식(break-before/after)은 잘 먹는데, page-break-*는 경고가 뜨거나 무시되기도 함.

 

❗ 그래서 두 개를 같이 선언해 두면...

- 옛 뷰어에서는 page-break-*가 적용되고,

- 최신 뷰어에서는 break-before/after가 적용되는 구조라서 호환성 안전장치가 됩니다.

 

---

 

📖 정리 예시

css

h1 {
page-break-before: always; /* 옛 뷰어용 */
break-before: page; /* 최신 뷰어용 */
}

👉 이렇게 하면 "챕터 제목(h1)"이 나오면 무조건 새 페이지에서 시작하게 보장됩니다.

 

✅ 한 줄 요약:

- page-break-* = 옛날 방식 (EPUB2, 구버전 뷰어용)

- break-before/after = 최신 방식(EPUB3, 신형 뷰어용)

- 두 개를 같이 써야 모든 기기에서 안전하게 챕터 구분이 보장된다. 

 

---

3. EPUB 제작 시 주의할 점

1) 태그는 단순하게 : <div> 보다는 <p>, <h2> 태그를 활용.

2) CSS 최소화 : 최신 기능(flex, grid)은 일부 뷰어에서 깨질 수 있음.

3) 본문은 문단 단위로 : 엔터로 줄 나누지 말고 <p> 태그 사용.

4) 강제 줄바꿈은 조심 : <br>보다는 margin / padding 활용.

5) 페이지 나눔(page-break) : 챕터 구분은 확실하게.

 

---

4. 정리

전자책 EPUB 제작에서 반드시 알아야 할 HTML 기본 태그와 문단 구조를 정리했습니다.

전자책은 "코드"라기보다 "글을 깔끔하게 정리한느 법"에 가까운 것같습니다.

 

 

---

 

👉 지난 글 : 무료 / 유료 폰트 선택 가이드

전자책 EPUB 제작, 무료 유료 폰트 선택 가이드

 

👉 다음 글 : EPUB 표 만들기