제목 스타일

H1(파트), H2(챕터), H3(소제목) — 전자책의 뼈대를 만드는 제목 CSS

H1 — 파트 페이지 (말풍선 뱃지)
#H1 #파트 #배경색 #말풍선
✓ ✓ ✓ ⭐
H1 — 파트 페이지 (원형 뱃지)
#H1 #파트 #배경색 #원형
✓ ✓ ✓
H1 — 파트 페이지 (잎사귀 뱃지)
#H1 #파트 #배경색 #잎사귀
✓ ✓ ✓
H1 — 파트 페이지 (그라데이션)
#H1 #파트 #그라데이션
△ ✓ ✓
H1 — 챕터 페이지 (숫자+라인)
#H1 #챕터 #라인
✓ ✓ ✓ ⭐
H1 — 파트 페이지 (타원형 뱃지)
#H1 #파트 #배경색 #타원형
✓ ✓ ✓
H1 — 파트 페이지 (이중 테두리)
#H1 #파트 #테두리 #이중선
✓ ✓ ✓
H1 — 챕터 (큰 숫자)
#H1 #챕터 #숫자 #모던
✓ ✓ ✓
H1 — 파트 페이지 (미니멀)
#H1 #파트 #미니멀 #심플
✓ ✓ ✓
H1 — 파트 페이지 (라인 뱃지)
#H1 #파트 #라인 #클래식
✓ ✓ ✓
H2 — 가운데 정렬 + 글자너비 밑줄
#H2 #가운데정렬 #밑줄
✓ ✓ ✓ ⭐
H2 — 버튼 스타일
#H2 #버튼 #테두리 #둥근모서리
✓ ✓ ✓
H2 — 좌측 포인트 (border-left)
#H2 #왼쪽정렬 #세로선
✓ ✓ ✓ ⭐
H2 — 전체너비 밑줄
#H2 #밑줄 #심플
✓ ✓ ✓
H2 — 배경 하이라이트
#H2 #배경색 #강조
✓ ✓ ✓
H2 — 상하 라인
#H2 #라인 #가운데정렬
✓ ✓ ✓
H2 — 가운데 + 짧은 장식선
#H2 #가운데정렬 #장식선
✓ ✓ ✓
H2 — 점선 밑줄
#H2 #밑줄 #점선
✓ ✓ ✓
H2 — 두꺼운 마커 밑줄
#H2 #밑줄 #마커 #강조
✓ ✓ ✓
H2 — 둥근 배경 (알약형)
#H2 #배경색 #둥근모서리 #알약
✓ ✓ ✓
H3 — 기본 소제목
#H3 #소제목 #심플
✓ ✓ ✓
H3 — 점 접두사
#H3 #장식 #기호
△ ✓ ✓
H3 — 배경 라벨
#H3 #배경색 #라벨
✓ ✓ ✓
H3 — 밑줄 소제목
#H3 #밑줄 #심플
✓ ✓ ✓
H3 — 좌측 포인트
#H3 #세로선 #왼쪽정렬
✓ ✓ ✓
H3 — 화살표 접두사
#H3 #장식 #기호 #화살표
△ ✓ ✓
H3 — 형광펜 밑줄
#H3 #형광펜 #밑줄 #강조
✓ ✓ ✓
H3 — 위쪽 가로선
#H3 #라인 #심플
✓ ✓ ✓
H3 — 테두리 소제목
#H3 #테두리 #태그
✓ ✓ ✓
H3 — 넓은 자간
#H3 #자간 #미니멀
✓ ✓ ✓
H1 — 파트 페이지 (말풍선 뱃지)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓ ⭐ 추천
CSS
body.part-page {
    background-color: #E8F5F0;   /* 배경색 — #뒤 6자리 컬러코드 */
    min-height: 100vh;
    margin: 0; padding: 0;
    text-align: center;
}
.part-spacer {
    height: 8em;                 /* 위치 조절 — 숫자↑ 아래로 내려감 */
}
.part-badge {
    display: block;
    width: 8em;
    font-size: 0.85em;
    color: #FFFFFF;
    background-color: #1A5C54;   /* 뱃지 배경색 */
    padding: 0.5em 2em;
    border-radius: 1.2em;        /* 둥글기 — 숫자↑ 더 둥글어짐 */
    letter-spacing: 0.15em;
    margin: 0 auto 2em auto;
    text-align: center;
    position: relative;
}
.part-badge::after {
    content: "";
    position: absolute;
    bottom: -10px; left: 50%; margin-left: -7px;
    border-width: 10px 7px 0 7px;
    border-style: solid;
    border-color: #1A5C54 transparent transparent transparent;
}
h1.part-main-title {
    font-size: 1.6em;           /* 제목 크기 — 숫자↑ 커짐 */
    color: #1A5C54;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    margin-bottom: 0.6em;
    border: none; padding: 0;
}
HTML
<body class="part-page">
  <div class="part-spacer"></div>
  <div class="part-badge">PART 1</div>
  <h1 class="part-main-title">감정의 뿌리를 찾아서</h1>
</body>

body.part-page — 파트 페이지 전용 배경색을 적용합니다. 전자책에서 파트(Part) 시작을 시각적으로 구분하는 용도입니다.

.part-badge::after — CSS 삼각형 기법으로 말풍선 꼬리를 만듭니다. border를 이용한 트릭입니다.

border-radius: 1.2em — 뱃지를 둥근 알약 모양으로 만듭니다.

💡 시길 팁파트 페이지는 별도 XHTML 파일로 만들어야 합니다. body에 class="part-page"를 적용하세요.
H1 — 파트 페이지 (원형 뱃지)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
body.part-page {
    background-color: #FDF6EC;   /* 배경색 */
    min-height: 100vh;
    margin: 0; padding: 0;
    text-align: center;
}
.part-spacer {
    height: 8em;                 /* 위치 조절 — 숫자↑ 아래로 내려감 */
}
.part-circle {
    width: 4em;
    height: 4em;
    line-height: 4em;            /* 세로 가운데 정렬 — height와 같은 값 */
    font-size: 0.85em;
    color: #FFFFFF;
    background-color: #8B5E3C;   /* 원형 배경색 */
    border-radius: 50%;          /* 원형 — 50%=완전한 원 */
    letter-spacing: 0.1em;
    margin: 0 auto 1.5em auto;
    text-align: center;
}
h1.part-main-title {
    font-size: 1.6em;            /* 제목 크기 — 숫자↑ 커짐 */
    color: #5D3A1A;
    letter-spacing: 0.08em;
    line-height: 1.5em;
    border: none; padding: 0;
}
HTML
<body class="part-page">
  <div class="part-spacer"></div>
  <div class="part-circle">PART 1</div>
  <h1 class="part-main-title">감정의 뿌리를 찾아서</h1>
</body>

border-radius: 50% — 요소를 완전한 원형으로 만듭니다. width와 height가 같아야 정원이 됩니다.

line-height: 4em — 원형 안에서 텍스트를 세로 가운데 정렬합니다. height와 같은 값으로 설정합니다.

💡 시길 팁원형 뱃지 안 글자가 길어지면 원 밖으로 삐져나갑니다. "PART 1" 같은 짧은 텍스트에 적합합니다.
H1 — 파트 페이지 (잎사귀 뱃지)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
body.part-page {
    background-color: #F9F5F0;   /* 배경색 */
    min-height: 100vh;
    margin: 0; padding: 0;
    text-align: center;
}
.part-spacer {
    height: 8em;                 /* 위치 조절 — 숫자↑ 아래로 내려감 */
}
.part-leaf {
    display: inline-block;
    font-size: 0.85em;
    color: #FFFFFF;
    background-color: #6B8E5A;   /* 뱃지 배경색 */
    padding: 0.5em 2em;
    border-radius: 0.3em 1.5em;  /* 잎사귀 모양 — 대각선 둥글기 */
    letter-spacing: 0.15em;
    margin: 0 auto 2em auto;
    text-align: center;
}
h1.part-main-title {
    font-size: 1.6em;            /* 제목 크기 — 숫자↑ 커짐 */
    color: #4A6341;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    border: none; padding: 0;
}
HTML
<body class="part-page">
  <div class="part-spacer"></div>
  <div class="part-leaf">PART 1</div>
  <h1 class="part-main-title">감정의 뿌리를 찾아서</h1>
</body>

border-radius: 0.3em 1.5em — 대각선 방향으로 둥글기를 다르게 주면 잎사귀 모양이 됩니다.

  • 2개 값: 왼쪽위+오른쪽아래 / 오른쪽위+왼쪽아래
  • 0.3em 1.5em = 살짝 둥근 + 많이 둥근 = 잎사귀
  • 1.5em 0.3em으로 바꾸면 반대 방향 잎사귀
H1 — 파트 페이지 (그라데이션)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 △ 리디 ✓ 알라딘 ✓
CSS
body.part-page {
    background: linear-gradient(  /* 그라데이션 — 위→아래 색 전환 */
        180deg,                    /* 방향 — 180=위→아래, 90=왼→오른 */
        #D4EFE6 0%,               /* 시작 색상 (민트) */
        #FDF6EC 100%              /* 끝 색상 (베이지) */
    );
    min-height: 100vh;
    margin: 0; padding: 0;
    text-align: center;
}
.part-spacer {
    height: 10em;                /* 위치 조절 — 숫자↑ 아래로 내려감 */
}
.part-sub {
    font-size: 0.9em;            /* 부제 크기 */
    color: #7A9E8E;
    letter-spacing: 0.2em;       /* 자간 — 숫자↑ 벌어짐 */
    margin: 0 0 0.5em 0;
}
h1.part-main-title {
    font-size: 1.8em;            /* 제목 크기 — 숫자↑ 커짐 */
    color: #2C6E5E;
    letter-spacing: 0.1em;
    line-height: 1.6em;
    border: none; padding: 0;
}
HTML
<body class="part-page">
  <div class="part-spacer"></div>
  <p class="part-sub">PART 1</p>
  <h1 class="part-main-title">감정의 뿌리를 찾아서</h1>
</body>

linear-gradient(180deg, #D4EFE6, #FDF6EC) — 위에서 아래로 색이 서서히 변합니다.

  • 180deg = 위에서 아래. 90deg로 바꾸면 왼쪽에서 오른쪽
  • 색상 2개를 바꾸면 전혀 다른 분위기가 됩니다
⚠️ 뷰어 참고교보문고에서 그라데이션이 안 보일 수 있습니다. 안 보이면 첫 번째 색상이 단색 배경으로 적용됩니다.
H1 — 챕터 페이지 (숫자+라인)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓ ⭐ 추천
CSS
.chapter-header {
    text-align: center;
    margin: 6em 0 3em 0;         /* 위 여백 — 숫자↑ 더 아래로 */
    padding: 0;
}
.chapter-number {
    font-size: 0.85em;           /* 숫자 크기 */
    color: #999999;              /* 숫자 색상 */
    letter-spacing: 0.2em;       /* 자간 — 숫자↑ 벌어짐 */
    margin-bottom: 0.8em;
}
.chapter-line {
    border: none;
    border-top: 1px solid #CCCCCC; /* 가로선 — 1px=두께, #색상 */
    width: 40%;                  /* 선 길이 — 숫자↑ 길어짐 */
    margin: 0.8em auto;
}
h1.chapter-title {
    font-size: 1.5em;            /* 제목 크기 — 숫자↑ 커짐 */
    color: #333333;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    border: none; padding: 0;
    margin: 0;
}
HTML
<div class="chapter-header">
  <p class="chapter-number">CHAPTER 1</p>
  <hr class="chapter-line" />
  <h1 class="chapter-title">감정의 뿌리를 찾아서</h1>
</div>

letter-spacing: 0.2em — 영문 CHAPTER의 자간을 넓혀 고급스러운 느낌을 줍니다.

width: 40% — 가로선이 화면의 40%만 차지합니다. 100%로 바꾸면 전체 너비 선이 됩니다.

hr 태그를 활용한 깔끔한 가로선입니다. 소설, 에세이 등에 잘 어울립니다.

💡 시길 팁div.chapter-header로 감싸면 챕터 시작 페이지를 하나의 블록으로 관리할 수 있습니다.
H1 — 파트 페이지 (타원형 뱃지)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
body.part-page {
    background-color: #F5EDE3;   /* 배경색 */
    min-height: 100vh;
    margin: 0; padding: 0;
    text-align: center;
}
.part-spacer {
    height: 8em;                 /* 위치 조절 — 숫자↑ 아래로 내려감 */
}
.part-oval {
    display: inline-block;
    font-size: 0.85em;
    color: #FFFFFF;
    background-color: #A0522D;   /* 뱃지 배경색 */
    padding: 0.4em 2.5em;       /* 좌우 넓게 → 타원형 */
    border-radius: 2em;          /* 둥글기 — 2em이면 완전 타원 */
    letter-spacing: 0.15em;
    margin: 0 auto 2em auto;
    text-align: center;
}
h1.part-main-title {
    font-size: 1.6em;            /* 제목 크기 — 숫자↑ 커짐 */
    color: #6B3A20;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    border: none; padding: 0;
}
HTML
<body class="part-page">
  <div class="part-spacer"></div>
  <div class="part-oval">PART 1</div>
  <h1 class="part-main-title">감정의 뿌리를 찾아서</h1>
</body>

border-radius: 2em — 좌우 padding이 넓고 border-radius가 크면 타원형이 됩니다.

말풍선 뱃지에서 삼각형 꼬리(::after)를 빼면 이 타원형이 됩니다. 더 깔끔한 느낌입니다.

H1 — 파트 페이지 (이중 테두리)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
body.part-page {
    background-color: #F8F4F0;   /* 배경색 */
    min-height: 100vh;
    margin: 0; padding: 0;
    text-align: center;
}
.part-spacer {
    height: 8em;                 /* 위치 조절 — 숫자↑ 아래로 내려감 */
}
.part-double {
    display: inline-block;
    font-size: 0.85em;
    color: #5B4A3F;
    padding: 0.5em 2em;
    border: 3px double #5B4A3F;  /* 이중 테두리 — double=이중선 */
    letter-spacing: 0.15em;
    margin: 0 auto 2em auto;
    text-align: center;
}
h1.part-main-title {
    font-size: 1.6em;            /* 제목 크기 — 숫자↑ 커짐 */
    color: #5B4A3F;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    border: none; padding: 0;
}
HTML
<body class="part-page">
  <div class="part-spacer"></div>
  <div class="part-double">PART 1</div>
  <h1 class="part-main-title">감정의 뿌리를 찾아서</h1>
</body>

border: 3px double #5B4A3F — 이중선 테두리를 만듭니다.

  • double = 이중선. solid(실선), dashed(점선)로 변경 가능
  • 3px = 최소 3px 이상이어야 이중선이 보임

격식 있는 느낌을 줍니다. 에세이, 인문서적에 잘 어울립니다.

H1 — 챕터 (큰 숫자)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
.chapter-header {
    text-align: center;
    margin: 5em 0 3em 0;         /* 위 여백 — 숫자↑ 더 아래로 */
}
.chapter-big-number {
    font-size: 3em;              /* 숫자 크기 — 숫자↑ 커짐 */
    color: #E0E0E0;              /* 숫자 색상 — 연하게 */
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1em;
    margin-bottom: 0.2em;
}
h1.chapter-title {
    font-size: 1.4em;            /* 제목 크기 — 숫자↑ 커짐 */
    color: #333333;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    border: none; padding: 0;
    margin: 0;
}
HTML
<div class="chapter-header">
  <p class="chapter-big-number">01</p>
  <h1 class="chapter-title">감정의 뿌리를 찾아서</h1>
</div>

큰 숫자를 연한 색으로 크게 넣어 모던한 느낌을 줍니다.

font-size: 3em — 본문의 3배 크기. 시각적 포인트가 됩니다.

color: #E0E0E0 — 연한 회색으로 배경처럼 깔립니다. 진한 제목과 대비됩니다.

H1 — 파트 페이지 (미니멀)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
body.part-page {
    background-color: #FFFFFF;
    min-height: 100vh;
    margin: 0; padding: 0;
    text-align: center;
}
.part-spacer {
    height: 12em;                /* 위치 조절 — 숫자↑ 아래로 내려감 */
}
.part-label {
    font-size: 0.75em;          /* 라벨 크기 */
    color: #AAAAAA;
    letter-spacing: 0.4em;      /* 자간 — 넓게 벌려서 고급스럽게 */
    margin: 0 0 1.5em 0;
}
h1.part-main-title {
    font-size: 1.8em;            /* 제목 크기 — 숫자↑ 커짐 */
    color: #333333;
    letter-spacing: 0.15em;
    line-height: 1.6em;
    font-weight: normal;         /* 굵기 없음 — 가벼운 느낌 */
    border: none; padding: 0;
}
HTML
<body class="part-page">
  <div class="part-spacer"></div>
  <p class="part-label">PART 1</p>
  <h1 class="part-main-title">감정의 뿌리를 찾아서</h1>
</body>

장식 없이 넓은 여백과 자간만으로 고급스러운 느낌을 줍니다.

letter-spacing: 0.4em — 영문 라벨의 자간을 크게 벌립니다.

font-weight: normal — 제목의 굵기를 없애 가벼운 인상을 줍니다.

에세이, 시집 등 감성적인 책에 잘 어울립니다.

H1 — 파트 페이지 (라인 뱃지)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
body.part-page {
    background-color: #F8F4F0;   /* 배경색 */
    min-height: 100vh;
    margin: 0; padding: 0;
    text-align: center;
}
.part-spacer {
    height: 8em;                 /* 위치 조절 — 숫자↑ 아래로 내려감 */
}
.part-bar {
    display: inline-block;
    font-size: 0.85em;
    color: #5B4A3F;
    padding: 0.4em 2em;
    border-top: 1px solid #5B4A3F;    /* 위쪽 선 */
    border-bottom: 1px solid #5B4A3F; /* 아래쪽 선 */
    letter-spacing: 0.2em;
    margin: 0 auto 2em auto;
    text-align: center;
}
h1.part-main-title {
    font-size: 1.6em;            /* 제목 크기 — 숫자↑ 커짐 */
    color: #5B4A3F;
    letter-spacing: 0.08em;
    line-height: 1.5em;
    border: none; padding: 0;
}
HTML
<body class="part-page">
  <div class="part-spacer"></div>
  <div class="part-bar">PART 1</div>
  <h1 class="part-main-title">감정의 뿌리를 찾아서</h1>
</body>

위아래 선만 있는 뱃지입니다. 배경색이 없어서 가볍고 클래식한 느낌입니다.

border-top + border-bottom — 좌우는 열려있고 위아래만 선이 있습니다.

letter-spacing: 0.2em — 넓은 자간으로 격식 있는 느낌을 줍니다.

H2 — 가운데 정렬 + 글자너비 밑줄
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓ ⭐ 추천
CSS
h2 {
    font-family: 'KoPubDotum Medium';  /* 글꼴 — 고딕 계열 */
    font-size: 1.5em;                  /* 글자 크기 — 숫자↑ 커짐 */
    margin: 2.5em 0 1em 0;            /* 위아래 여백 — 위2.5 아래1 */
    text-align: center;                /* 가운데 정렬 */
    color: #1A5C54;                    /* 글자 색상 */
    line-height: 1.5em;
    letter-spacing: 0.05em;            /* 자간 — 숫자↑ 벌어짐 */
}
h2 span {
    border-bottom: 1px solid #BDDBD7; /* 밑줄 — 1px=두께, #색상 */
    padding-bottom: 0.3em;            /* 글자↔밑줄 간격 */
    padding-left: 1.5em;             /* 밑줄 좌우 여유 */
    padding-right: 1.5em;
    display: inline-block;            /* 글자 너비만큼만 밑줄 (필수) */
}
HTML
<h2><span>1장. 감정의 뿌리를 찾아서</span></h2>

text-align: center — 글자를 가운데 정렬합니다.

border-bottom: 1px solid #BDDBD7 — 글자 아래에 실선 밑줄을 긋습니다.

  • 1px = 밑줄 두께. 2px로 바꾸면 더 굵어짐
  • solid = 실선. dashed로 바꾸면 점선
  • #BDDBD7 = 밑줄 색상 (연한 민트색)

display: inline-block — 핵심! 밑줄이 글자 너비만큼만 들어갑니다.

💡 시길 팁h2에 span을 일괄 적용하려면 정규식(Ctrl+H):
찾기: <h2>(.*?)</h2>
바꾸기: <h2><span>\1</span></h2>
⚠️ 뷰어 참고교보에서는 h2 자체에 border-bottom을 넣으면 화면 끝까지 밑줄이 갑니다. 반드시 span으로 감싸야 합니다.
H2 — 버튼 스타일
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h2.new {
    display: inline-block;
    font-family: 'KoPubDotum Medium';
    font-size: 1.5em;                 /* 글자 크기 — 숫자↑ 커짐 */
    color: #000;
    padding: 0.4em 0.8em;            /* 안쪽 여백 — 숫자↑ 넓어짐 */
    margin-top: 3em;
    margin-bottom: 2em;
    border: 2px solid #603E01;       /* 테두리 — 2px=두께, #색상 */
    border-radius: 0.3em;            /* 둥글기 — 숫자↑ 더 둥글어짐 */
    background-color: #F6F1EA;       /* 배경색 */
}
HTML
<h2 class="new">감정 일기 쓰기</h2>

display: inline-block — 버튼처럼 글자 크기만큼만 배경이 적용됩니다.

border: 2px solid #603E01 — 테두리선. 두께, 스타일, 색상 순서입니다.

border-radius: 0.3em — 모서리를 둥글게. 숫자를 키우면 더 둥글어집니다.

H2 — 좌측 포인트 (border-left)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓ ⭐ 추천
CSS
h2 {
    font-size: 1.5em;                  /* 글자 크기 — 숫자↑ 커짐 */
    border-left: 4px solid #2FA599;   /* 왼쪽 세로선 — 4px=두께, #색상 */
    padding-left: 0.6em;             /* 선↔글자 간격 */
    text-align: left;                  /* 왼쪽 정렬 */
    color: #1A5C54;
    margin: 2em 0 0.8em 0;
}
HTML
<h2>1장. 감정의 뿌리를 찾아서</h2>

border-left: 4px solid #2FA599 — 글자 왼쪽에 세로 포인트 선을 넣습니다.

  • 4px = 선 두께. 숫자를 키우면 더 굵어짐
  • #2FA599 = 선 색상 (민트 계열)

padding-left: 0.6em — 선과 글자 사이 간격입니다.

💡 시길 팁가운데 밑줄 스타일과 달리 span으로 감쌀 필요 없어서 HTML이 더 간단합니다.
H2 — 전체너비 밑줄
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h2 {
    font-size: 1.5em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #333333;                    /* 글자 색상 */
    border-bottom: 2px solid #DDDDDD; /* 밑줄 — 2px=두께, #색상 */
    padding-bottom: 0.4em;            /* 글자↔밑줄 간격 */
    margin: 2em 0 1em 0;
}
HTML
<h2>1장. 감정의 뿌리를 찾아서</h2>

border-bottom: 2px solid #DDDDDD — h2 태그 전체 너비에 밑줄이 들어갑니다.

"글자너비 밑줄"과 달리 span으로 감쌀 필요가 없어서 HTML이 간단합니다.

밑줄이 화면 끝까지 가는 걸 원하면 이 스타일, 글자 너비만큼만 원하면 span 방식을 선택하세요.

H2 — 배경 하이라이트
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h2 {
    font-size: 1.3em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #2D2D2D;                    /* 글자 색상 */
    background-color: #F0F7F5;        /* 배경색 — 연한 민트 */
    border-left: 5px solid #2FA599;   /* 왼쪽 굵은 선 — 5px=두께 */
    padding: 0.6em 0.8em;            /* 안쪽 여백 */
    margin: 2em 0 1em 0;
}
HTML
<h2>1장. 감정의 뿌리를 찾아서</h2>

좌측 포인트(border-left)에 배경색을 추가한 스타일입니다. 제목이 더 눈에 띕니다.

background-color: #F0F7F5 — 연한 배경색으로 영역을 강조합니다.

padding: 0.6em 0.8em — 배경색 안쪽에 여유 공간을 줍니다. 배경이 있으면 padding이 특히 중요합니다.

H2 — 상하 라인
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h2 {
    text-align: center;                /* 가운데 정렬 */
    font-size: 1.3em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #555555;                    /* 글자 색상 */
    border-top: 1px solid #CCCCCC;    /* 위쪽 선 — 1px=두께, #색상 */
    border-bottom: 1px solid #CCCCCC; /* 아래쪽 선 */
    padding: 0.5em 0;                 /* 글자↔선 간격 */
    margin: 2em 0 1em 0;
}
HTML
<h2>1장. 감정의 뿌리를 찾아서</h2>

제목 위아래에 가로선을 넣어 구분감을 줍니다. 심플하면서도 세련된 스타일입니다.

border-top + border-bottom — 두 줄을 모두 적용합니다.

padding: 0.5em 0 — 위아래 여백으로 선과 글자 사이 간격을 줍니다.

H2 — 가운데 + 짧은 장식선
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h2 {
    text-align: center;                /* 가운데 정렬 */
    font-size: 1.5em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #333333;
    margin: 2.5em 0 0.3em 0;
    letter-spacing: 0.05em;
}
.title-line {
    width: 3em;                        /* 선 길이 — 숫자↑ 길어짐 */
    border-top: 2px solid #2FA599;    /* 장식선 — 2px=두께, #색상 */
    margin: 0.5em auto 1em auto;     /* 위 0.5 = 제목↔선 간격 */
}
HTML
<h2>1장. 감정의 뿌리를 찾아서</h2>
<div class="title-line"></div>

제목 아래에 짧은 장식선을 별도로 넣습니다. 제목과 선 사이에 여유 공간이 있어 세련된 느낌입니다.

width: 3em — 짧은 선. 5em으로 바꾸면 더 길어집니다.

별도 div를 사용하므로 선 위치를 자유롭게 조절할 수 있습니다.

H2 — 점선 밑줄
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h2 {
    font-size: 1.5em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #555555;                    /* 글자 색상 */
    border-bottom: 2px dashed #CCCCCC; /* 점선 밑줄 — dashed=점선 */
    padding-bottom: 0.4em;            /* 글자↔밑줄 간격 */
    margin: 2em 0 1em 0;
}
HTML
<h2>1장. 감정의 뿌리를 찾아서</h2>

border-bottom: 2px dashed — 실선 대신 점선을 사용합니다.

  • dashed = 점선 (- - -)
  • dotted = 도트 (. . .)
  • solid = 실선 (───)

부드러운 인상을 줍니다. 에세이, 수필집에 잘 어울립니다.

H2 — 두꺼운 마커 밑줄
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h2 {
    text-align: center;                /* 가운데 정렬 */
    font-size: 1.5em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #333333;
    margin: 2.5em 0 1em 0;
}
h2 span {
    display: inline-block;
    border-bottom: 4px solid #E8A87C; /* 두꺼운 밑줄 — 4px, 따뜻한 오렌지 */
    padding-bottom: 0.15em;          /* 글자↔밑줄 간격 (좁게) */
    padding-left: 0.3em;
    padding-right: 0.3em;
}
HTML
<h2><span>1장. 감정의 뿌리를 찾아서</span></h2>

마커펜으로 밑줄 친 듯한 두꺼운 밑줄입니다.

border-bottom: 4px solid #E8A87C — 1px(가늘게)과 비교하면 4px는 확 눈에 들어옵니다.

padding-bottom: 0.15em — 간격을 좁게 해서 글자에 바짝 붙은 마커 느낌입니다.

색상을 #FFF3B0(노랑)으로 바꾸면 형광펜 느낌이 됩니다.

H2 — 둥근 배경 (알약형)
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h2 {
    display: inline-block;             /* 글자 너비만큼만 배경 */
    font-size: 1.3em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #FFFFFF;                    /* 글자 색상 */
    background-color: #2FA599;        /* 배경색 */
    padding: 0.4em 1.5em;            /* 안쪽 여백 */
    border-radius: 2em;              /* 완전 둥근 알약 모양 */
    margin: 2em 0 1em 0;
}
HTML
<h2>1장. 감정의 뿌리를 찾아서</h2>

알약형 배경의 제목입니다. 기존 "버튼 스타일"과 비교하면:

  • 버튼 스타일: 약간 둥근 모서리(0.3em) + 테두리
  • 알약형: 완전 둥근(2em) + 배경색만

border-radius: 2em — 숫자가 충분히 크면 완전한 알약/캡슐 모양이 됩니다.

H3 — 기본 소제목
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h3 {
    font-size: 1.2em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #555555;                    /* 글자 색상 — 본문보다 약간 연하게 */
    margin: 1.5em 0 0.6em 0;          /* 위아래 여백 */
    line-height: 1.5em;
}
HTML
<h3>감정의 종류 알아보기</h3>

color: #555555 — H2보다 연한 색상으로 시각적 위계를 만듭니다.

H3는 단순하게 유지하는 것이 좋습니다. 장식이 많으면 H2와 구분이 어려워집니다.

H3 — 점 접두사
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 △ 리디 ✓ 알라딘 ✓
CSS
h3 {
    font-size: 1.1em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #333333;                    /* 글자 색상 */
    margin: 1.5em 0 0.5em 0;
}
h3::before {
    content: "●";                     /* 접두사 기호 — ◆ ▶ ■ 등으로 변경 */
    color: #2FA599;                    /* 기호 색상 */
    font-size: 0.6em;                 /* 기호 크기 — 숫자↑ 커짐 */
    margin-right: 0.5em;
    vertical-align: middle;
}
HTML
<h3>감정의 종류 알아보기</h3>

::before — CSS로 글자 앞에 자동으로 기호를 넣습니다. HTML을 수정하지 않아도 됩니다.

content: "●" — 넣을 기호를 지정합니다. 다른 기호로 바꿔보세요:

  • ● 검은 원
  • ◆ 다이아몬드
  • ▶ 화살표
  • ■ 사각형
⚠️ 뷰어 참고교보문고에서 ::before가 안 될 수 있습니다. 안 되면 HTML에 직접 ● 을 넣으세요.
H3 — 배경 라벨
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h3 {
    display: inline-block;             /* 글자 너비만큼만 배경 */
    font-size: 1em;                    /* 글자 크기 — 숫자↑ 커짐 */
    color: #FFFFFF;                    /* 글자 색상 */
    background-color: #7A6B5D;        /* 배경색 */
    padding: 0.3em 0.8em;            /* 안쪽 여백 */
    border-radius: 0.2em;            /* 둥글기 — 숫자↑ 더 둥글어짐 */
    margin: 1.5em 0 0.5em 0;
}
HTML
<h3>감정의 종류 알아보기</h3>

display: inline-block — 배경색이 글자 너비만큼만 적용됩니다.

color: #FFFFFF — 어두운 배경 위에 흰 글자로 대비를 줍니다.

작은 라벨/태그 느낌의 소제목입니다. 색상을 바꾸면 카테고리별 구분에도 활용할 수 있습니다.

H3 — 밑줄 소제목
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h3 {
    font-size: 1.1em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #333333;
    border-bottom: 1px solid #DDDDDD; /* 밑줄 — 1px=두께, #색상 */
    padding-bottom: 0.3em;            /* 글자↔밑줄 간격 */
    margin: 1.5em 0 0.5em 0;
}
HTML
<h3>감정의 종류 알아보기</h3>

소제목 아래에 가는 밑줄을 넣어 구분감을 줍니다.

H2에도 비슷한 스타일이 있지만, H3는 크기와 색상을 더 연하게 해서 위계를 구분합니다.

H3 — 좌측 포인트
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h3 {
    font-size: 1.1em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #333333;
    border-left: 3px solid #E8A87C;   /* 왼쪽 세로선 — 3px=두께, #색상 */
    padding-left: 0.5em;             /* 선↔글자 간격 */
    margin: 1.5em 0 0.5em 0;
}
HTML
<h3>감정의 종류 알아보기</h3>

H2의 좌측 포인트와 같은 원리지만, 선을 더 가늘게(3px) 하고 따뜻한 색상을 사용합니다.

H2와 같은 스타일을 쓰되, 두께와 색상으로 위계를 구분하는 방법입니다.

H3 — 화살표 접두사
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 △ 리디 ✓ 알라딘 ✓
CSS
h3 {
    font-size: 1.1em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #333333;
    margin: 1.5em 0 0.5em 0;
}
h3::before {
    content: "▸";                     /* 화살표 기호 — ▸ ▹ ► 등 변경 가능 */
    color: #E8A87C;                    /* 기호 색상 */
    margin-right: 0.4em;
}
HTML
<h3>감정의 종류 알아보기</h3>

점 접두사(●)와 같은 원리이지만, 화살표로 방향감을 줍니다.

content: "▸" — 다른 화살표로 바꿀 수 있습니다:

  • ▸ 작은 삼각형
  • ▹ 빈 삼각형
  • ► 큰 삼각형
  • → 화살표
⚠️ 뷰어 참고교보문고에서 ::before가 안 될 수 있습니다. 안 되면 HTML에 직접 ▸ 을 넣으세요.
H3 — 형광펜 밑줄
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h3 {
    font-size: 1.1em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #333333;
    margin: 1.5em 0 0.5em 0;
}
h3 span {
    border-bottom: 3px solid #FFF3B0; /* 형광펜 밑줄 — 3px=두께, #노랑 */
    padding-bottom: 0.1em;           /* 글자↔밑줄 간격 (좁게) */
}
HTML
<h3><span>감정의 종류 알아보기</span></h3>

노란 형광펜으로 밑줄 친 듯한 소제목입니다.

border-bottom: 3px solid #FFF3B0 — 연한 노랑색 두꺼운 밑줄이 형광펜 느낌을 줍니다.

색상을 바꾸면 다른 형광펜이 됩니다: #D4F0D4(초록), #FFD4D4(분홍), #D4E4FF(파랑)

💡 시길 팁span 일괄 적용: 찾기 <h3>(.*?)</h3> → 바꾸기 <h3><span>\1</span></h3>
H3 — 위쪽 가로선
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h3 {
    font-size: 1.1em;                  /* 글자 크기 — 숫자↑ 커짐 */
    color: #333333;
    border-top: 2px solid #E8E8E8;    /* 위쪽 선 — 2px=두께, #색상 */
    padding-top: 0.5em;              /* 선↔글자 간격 */
    margin: 1.5em 0 0.5em 0;
}
HTML
<h3>감정의 종류 알아보기</h3>

소제목 위에 가로선을 넣어 이전 내용과 구분합니다.

border-top은 밑줄(border-bottom)과 반대로 위쪽에 선을 그립니다.

새로운 소주제가 시작됨을 시각적으로 알려줍니다.

H3 — 테두리 소제목
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h3 {
    display: inline-block;             /* 글자 너비만큼만 테두리 */
    font-size: 1em;                    /* 글자 크기 — 숫자↑ 커짐 */
    color: #555555;
    border: 1px solid #CCCCCC;        /* 테두리 — 1px=두께, #색상 */
    padding: 0.2em 0.6em;            /* 안쪽 여백 */
    border-radius: 0.2em;            /* 둥글기 */
    margin: 1.5em 0 0.5em 0;
}
HTML
<h3>감정의 종류 알아보기</h3>

"배경 라벨"과 비교하면:

  • 배경 라벨: 어두운 배경 + 흰 글자 (강한 강조)
  • 테두리 소제목: 테두리만 + 원래 글자색 (부드러운 강조)

내용에 따라 강한/부드러운 강조를 선택하세요.

H3 — 넓은 자간
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
h3 {
    font-size: 1em;                    /* 글자 크기 — 숫자↑ 커짐 */
    color: #999999;                    /* 글자 색상 — 연한 회색 */
    letter-spacing: 0.3em;            /* 자간 — 숫자↑ 벌어짐 */
    margin: 1.5em 0 0.5em 0;
}
HTML
<h3>감정의 종류 알아보기</h3>

letter-spacing: 0.3em — 글자 사이를 넓게 벌려 고급스러운 느낌을 줍니다.

color: #999999 — 연한 색상과 넓은 자간의 조합이 미니멀한 인상을 줍니다.

에세이, 시집 등 감성적인 책에 잘 어울립니다. 실용서보다는 문학 장르에 추천합니다.