작업 가이드

시길에서 전자책을 만들 때 알아두면 좋은 실전 가이드

시길에서 class 지정하기

같은 h2라도 챕터 제목과 활동 제목은 다르게 보여야 합니다.
class를 사용하면 태그에 '이름표'를 붙여 각각 다른 스타일을 적용할 수 있어요.

1

class가 필요한 이유

전자책에서 h2를 한 가지 스타일만 쓰는 경우는 드물어요.

  • 챕터 제목 — 가운데 정렬, 큰 글씨
  • 활동 제목 — 배경색 있는 버튼 스타일
  • 인터뷰 제목 — 좌측 포인트, 작은 글씨

이걸 구분하려면 각 h2에 class라는 이름표를 붙여야 합니다.

2

시길에서 class 추가하기

시길의 코드 뷰(Code View)에서 태그에 class를 추가합니다.

변경 전 <h2>1장. 감정의 뿌리를 찾아서</h2>
↓
변경 후 <h2 class="chapter">1장. 감정의 뿌리를 찾아서</h2>

class 이름은 영어 소문자로, 의미가 통하는 이름을 사용하세요.

3

CSS에서 class 사용하기

CSS에서는 태그 뒤에 .class이름을 붙여서 스타일을 지정합니다.

/* 챕터 제목 */
h2.chapter {
  font-size: 1.5em;
  text-align: center;
  color: #1A5C54;
}

/* 활동 제목 */
h2.activity {
  font-size: 1.3em;
  background-color: #2FA599;
  color: #FFFFFF;
  padding: 0.5em 1em;
}

h2.chapter = "class가 chapter인 h2에만 적용"이라는 뜻이에요.

4

자주 쓰는 class 이름

용도추천 class사용 예
챕터 제목chapter<h2 class="chapter">
소제목sub<h3 class="sub">
활동/워크시트activity<h2 class="activity">
좌측 포인트accent<h2 class="accent">
인용문 박스quote<blockquote class="quote">
팁 박스tip-box<div class="tip-box">
체크리스트checklist<ul class="checklist">

이름은 자유롭게 바꿀 수 있어요. 중요한 건 CSS와 HTML의 class 이름이 일치하는 것!

CSS 테스트에서 직접 해보기 →