전자책을 만들다 보면 가장 많이 듣게 되는 단어가 바로 HTML입니다.
많은 분들이 “나는 프로그래머도 아닌데, HTML 같은 건 어려워서 못해요”라고 말하시곤 하죠.
저도 처음에는 그랬습니다. 그런데 막상 배우고 나니, 전자책에 필요한 HTML은 홈페이지 전체를 코딩하는 수준이 아니라, 단순히 뼈대를 세우는 수준이더라고요.
즉, HTML은 우리가 책을 짓기 위해 세우는 건물의 기초 골조 같은 개념입니다.
벽지나 가구(=CSS, 디자인)를 입히기 전에, 기둥과 벽체(=HTML)만 먼저 세워두는 것이죠.
1. HTML이 왜 중요한가?
전자책은 사실상 작은 웹사이트 하나를 압축해 놓은 파일입니다.
실제로 ePub 파일 확장자를 .zip으로 바꿔서 열어보면, 여러 개의 HTML 문서와 CSS, 이미지 폴더가 들어있습니다.
그 안에서 HTML은 페이지의 구조를, CSS는 디자인을 담당하는 식이에요.
그래서 HTML을 전혀 모르면 전자책 제작 과정에서 계속 막히게 됩니다.
하지만 걱정할 필요 없습니다. 전자책에서 다루는 HTML은 딱 기본만 알면 충분합니다.
2. HTML 기본 구조 (전자책용)
전자책에 쓰이는 HTML 문서는 보통 아래와 같은 기본 형태를 갖습니다.
html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>문서 제목</title>
<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<p>본문 내용이 들어갑니다.</p>
</body>
</html>
이 구조를 한 줄씩 뜯어보겠습니다.
3. 코드 한 줄씩 이해하기
1) <?xml version="1.0" encoding="utf-8"?>
→ 이 문서가 XML/HTML 형식이며, 문자 인코딩은 UTF-8이라는 선언입니다.
전자책 뷰어가 글자를 올바르게 표시하기 위한 기본 설정이죠.
2) <!DOCTYPE html … >
→ “이건 HTML 문서다”라고 뷰어에게 알려주는 부분입니다.
전자책에서는 XHTML 1.1 규격을 주로 사용합니다.
3) <html> … </html>
→ 문서 전체를 감싸는 태그. 책의 본문부터 이미지, 링크까지 모든 요소가 여기 안에 들어갑니다.
4) <head> … </head>
→ 문서의 제목, CSS 연결, 메타데이터가 들어가는 공간.
독자가 직접 보는 부분은 아니지만, 책 전체의 설정 파일 같은 역할을 합니다.
- <title> : 문서 제목
- <link> : CSS 스타일시트 연결
5) <body> … </body>
→ 실제 독자가 읽는 본문이 들어갑니다.
<p> (문단), <h1> (제목), <img> (이미지), <a> (링크) 등 거의 모든 콘텐츠는 이 영역에 들어가죠.
4. 전자책에서 지켜야 할 규칙
1) 태그는 반드시 열고 닫아야 합니다.
→ <p>본문</p> 형태로 시작과 끝이 있어야 오류가 없습니다.
2) 빈 태그도 닫는 슬래시(/)가 필요합니다.
→ <br>이 아니라 <br/>, <img>가 아니라 <img /> 형태. (전자책 규격은 엄격합니다.)
3) CSS는 head 안에서 link로 연결하는 방식이 가장 깔끔합니다.
HTML에 직접 디자인을 넣을 수 있지만, 그렇게 하면 문서가 지저분해지고 유지보수가 어렵습니다.
5. 경험에서 나온 팁
저는 처음 전자책을 만들 때 Word 파일에서 그대로 붙여넣기를 했는데, 내부에 복잡한 태그들이 한가득 따라와서 화면이 완전히 망가졌던 적이 있습니다.
그때 알게 된 건, 코드는 단순할수록 전자책이 안정적이다는 사실이에요.
그래서 지금은 반드시 메모장에 한 번 붙여넣어 서식을 모두 지우고, 깨끗한 텍스트 상태에서 Sigil이나 PageEdit에 옮겨 작업합니다. 이 습관만으로도 오류가 크게 줄어듭니다.
✅ 오늘의 정리
- HTML은 전자책의 뼈대이자 구조를 담당하는 언어
- 기본 구조는 DOCTYPE → html → head → body 순서로 이루어짐
- 태그는 반드시 열고 닫아야 하고, 빈 태그도 슬래시(/)를 붙여줘야 함
- 복잡한 서식은 오류의 원인 → 최대한 심플하게 유지할 것
👉 지난 글 : 전자책 만들기 준비물
전자책 만들기, 준비물은 이것만 챙기면 충분합니다 (Sigil 설치)
전자책 제작, 막연하게 어렵게 느껴지시죠? 사실 시작 단계에서 필요한 건 생각보다 단순합니다. 저도 처음 전자책을 만들 때 “이거 프로그램이 엄청 복잡한 거 아닌가?” 하고 겁먹었는데, 막
gardengreem.tistory.com
👉 다음 글 : HTML 태그 10가지
전자책 만들 때 꼭 알아야 할 HTML 태그 10가지
지난 글에서 전자책의 뼈대가 되는 HTML 기본 구조를 살펴봤습니다. 이제 본격적으로, 전자책을 만들 때 자주 쓰이는 실전 태그들을 알아볼 차례입니다. 사실 HTML에는 수십 가지 태그가 있지만,
gardengreem.tistory.com
'디자인 실무 > 전자책' 카테고리의 다른 글
| 전자책 디자인의 시작, CSS 기초 완전 정리 (0) | 2025.09.30 |
|---|---|
| 전자책 만들 때 꼭 알아야 할 HTML 태그 10가지 (0) | 2025.09.29 |
| 전자책 만들기, 준비물은 이것만 챙기면 충분합니다 (Sigil 설치) (2) | 2025.09.28 |
| 전자책, 대체 뭘까? (처음부터 차근차근 정리해봅니다) (2) | 2025.09.28 |
| EPUB 표 만들기, 깨지지 않는 Table 구조 & 스타일 (0) | 2025.09.27 |
