전자책에서 제목과 소제목 꾸미기 – Heading 태그 활용법

전자책에서 **제목(Heading)**은 단순한 꾸밈 요소를 넘어서, 책의 구조를 잡고 목차를 만드는 핵심 역할을 합니다.
HTML에는 <h1>부터 <h6>까지 여섯 단계의 제목 태그가 있습니다.

보통 전자책에서는 <h1>, <h2>, <h3> 정도까지만 주로 사용합니다.

 

 

1. 제목 태그 기본 구조

아래는 CSS를 적용하지 않은 상태의 제목 태그입니다. 크기 차이만 있을 뿐, 특별한 꾸밈이 없습니다.

html

<h1>제1장 전자책의 시작</h1>
<h2>1.1 HTML 구조 이해하기</h2>
<h3>1.1.1 본문과 문단 태그</h3>

👉 숫자가 작을수록 더 큰 제목, 숫자가 커질수록 작은 제목입니다.
👉 <h1>은 책의 대제목, <h2>는 장 제목, <h3>는 절 제목처럼 계층 구조를 표현합니다.

 

 

2. CSS로 제목 꾸미기

제목 태그는 그냥 쓰면 기본 크기와 굵기만 적용되지만, CSS로 스타일을 주면 훨씬 눈에 잘 들어옵니다.

계층별로 크기와 색, 여백이 달라져 훨씬 가독성이 좋아졌습니다.

css

h1 {
font-size: 1.5em;
text-align: center;
color: darkblue;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}

h2 {
font-size: 1.3em;
color: #333333;
margin-top: 20px;
margin-bottom: 10px;
}

h3 {
font-size: 1.1em;
color: #666666;
margin-top: 15px;
margin-bottom: 5px;
}

👉 적용 결과:
<h1>: 큰 제목, 중앙 정렬 + 밑줄
<h2>: 중간 제목, 진한 색
<h3>: 작은 제목, 회색으로 구분

 

 

3. 목차(TOC)와의 연결

전자책 뷰어의 **자동 목차(TOC)**는 이 제목 태그를 기준으로 만들어집니다.
따라서 시각적으로만 크기를 키우는 것이 아니라, 반드시 <h1>, <h2> 같은 정식 태그를 사용해야 목차가 제대로 생성됩니다.

예를 들어, <p class="big">처럼 문단에 스타일만 주면 목차에는 반영되지 않습니다.

 

 

📌 시행착오
저는 초기에 제목 태그 대신 <p>에만 굵기와 크기를 줬다가, 목차가 전혀 생성되지 않아 책 전체 구조를 다시 짠 적이 있습니다.
그 경험 이후로는 반드시 제목 계층을 정확히 쓰고, CSS로만 꾸밈을 주는 습관을 들였습니다.

 

---

 

✅ 오늘의 정리
- 제목 태그 <h1> ~ <h6>는 전자책의 구조와 목차 생성을 위해 꼭 필요하다.
- CSS를 활용하면 크기, 색, 여백을 자유롭게 조정할 수 있다.
- 목차 자동 생성은 반드시 <h1>, <h2> 같은 정식 제목 태그를 써야 가능하다.

 

 

---

👉 지난 글 :  css 텍스트 꾸미기

CSS로 텍스트 꾸미기 – 글자 크기, 색상, 줄 간격, 여백 설정하기

 

👉 다음 글 :  이미지 삽입과 스타일링

전자책에서 이미지 삽입과 스타일링 – 깨짐 없이 적용하기