시길 CSS 가이드: 전자책 제작을 위한 CSS 복사 한 번이면 끝

본문 기본 — body + p

#body #기본 #줄간격

✓ ✓ ✓

p — 들여쓰기

#p #들여쓰기 #기본

✓ ✓ ✓

p.gothic — 고딕체 문단

#p #고딕 #class

✓ ✓ ✓

p.center — 가운데 정렬

#p #가운데정렬 #class

✓ ✓ ✓

p.small — 작은 글씨

#p #작은글씨 #class

✓ ✓ ✓

p.right — 오른쪽 정렬

#p #오른쪽정렬 #class

✓ ✓ ✓

본문 기본 — body + p

PC에서 보면 미리보기와 코드 복사가 더 편해요

첫째 문단

둘째 문단

교보 ✓ 리디 ✓ 알라딘 ✓

CSS

body {
    font-family: "KoPub Batang", serif;  /* 글꼴 — 바탕체 계열 */
    line-height: 1.8em;                   /* 줄 간격 — 숫자↑ 넓어짐 */
    color: #333333;                       /* 글자 색상 */
    padding: 1em;                         /* 여백 */
}
p {
    font-size: 1.0em;                     /* 글자 크기 — 숫자↑ 커짐 */
    line-height: 1.9em;                   /* 줄 간격 — 숫자↑ 넓어짐 */
    text-align: justify;                  /* 양쪽 정렬 */
    margin-bottom: 0.8em;                 /* 문단 간격 — 숫자↑ 넓어짐 */
}

HTML

<p>마음이 복잡할 때는 글을 쓰면 좋습니다.</p>
<p>두 번째 문단입니다. 줄 간격과 문단 간격을 확인해보세요.</p>

font-family: "KoPub Batang" — 전자책에서 가장 많이 사용되는 바탕체입니다. 교보/리디/알라딘 모두 내장 폰트로 지원합니다.

line-height: 1.8em — 줄 간격. 전자책에서는 1.7~1.9em이 가독성이 좋습니다.

text-align: justify — 양쪽 정렬. 전자책 본문의 기본입니다.

💡 시길 팁body 스타일은 CSS 파일 맨 위에 넣으세요. 모든 페이지에 공통으로 적용됩니다.

⚠️ 뷰어 참고줄 간격(line-height)은 뷰어 설정에서 사용자가 변경할 수 있습니다. 여기서 설정한 값은 기본값입니다.

p — 들여쓰기

PC에서 보면 미리보기와 코드 복사가 더 편해요

첫째 문단

둘째 문단

교보 ✓ 리디 ✓ 알라딘 ✓

CSS

p {
    text-indent: 1em;                     /* 첫 줄 들여쓰기 — 숫자↑ 많이 들어감 */
    text-align: justify;                  /* 양쪽 정렬 */
    line-height: 1.8em;
    margin-bottom: 0.5em;
}

HTML

<p>마음이 복잡할 때는 글을 쓰면 좋습니다. 생각을 정리하는 데 도움이 됩니다.</p>

text-indent: 1em — 각 문단의 첫 줄만 들여쓰기. 전통적인 서적 스타일입니다.

들여쓰기를 쓸 때는 margin-bottom을 줄이는 것이 자연스럽습니다.

💡 시길 팁시길에서 text-indent를 body p에 넣으면 모든 문단에 들여쓰기가 적용됩니다.

p.gothic — 고딕체 문단

PC에서 보면 미리보기와 코드 복사가 더 편해요

교보 ✓ 리디 ✓ 알라딘 ✓

CSS

/* class="gothic" 지정 필요 */
p.gothic {
    font-family: "KoPubDotum Medium", sans-serif;  /* 고딕체 */
    font-size: 0.95em;                    /* 글자 크기 */
    line-height: 1.7em;
    color: #444444;
}

HTML

<p class="gothic">안내사항이나 설명에 고딕체를 사용하면 바탕체 본문과 구분됩니다.</p>

font-family: "KoPubDotum Medium" — 코퍼브돋움. 전자책 뷰어에서 지원하는 대표 고딕체입니다.

본문은 바탕체, 안내/활동 페이지는 고딕체로 구분하면 읽기 편합니다.

⚠️ 뷰어 참고KoPubDotum Medium은 교보/리디 모두 내장 폰트. sans-serif를 fallback으로 넣으면 안전합니다.

p.center — 가운데 정렬

PC에서 보면 미리보기와 코드 복사가 더 편해요

교보 ✓ 리디 ✓ 알라딘 ✓

CSS

/* class="center" 지정 필요 */
p.center {
    text-align: center;                   /* 가운데 정렬 */
    margin: 1em 0;
}

HTML

<p class="center">- 끝 -</p>

text-align: center — 문단을 가운데 정렬합니다.

장 끝 표시, 시/인용문, 날짜 등에 주로 사용합니다.

p.small — 작은 글씨

PC에서 보면 미리보기와 코드 복사가 더 편해요

교보 ✓ 리디 ✓ 알라딘 ✓

CSS

/* class="small" 지정 필요 */
p.small {
    font-size: 0.85em;                    /* 글자 크기 — 숫자↑ 커짐 */
    color: #777777;                       /* 연한 색상 */
    line-height: 1.6em;
}

HTML

<p class="small">* 이 글은 개인적인 경험을 바탕으로 작성되었습니다.</p>

color: #777777 — 본문(#333)보다 연하게 하면 자연스럽게 부차적인 정보임을 알 수 있습니다.

p.right — 오른쪽 정렬

PC에서 보면 미리보기와 코드 복사가 더 편해요

교보 ✓ 리디 ✓ 알라딘 ✓

CSS

/* class="right" 지정 필요 */
p.right {
    text-align: right;                    /* 오른쪽 정렬 */
    margin: 1em 0;
}

HTML

<p class="right">2024년 봄, 서울에서</p>

저자 서명, 날짜, 장소 표시 등에 사용합니다.

프롤로그나 에필로그 끝에 넣으면 자연스럽습니다.

본문 스타일