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

워크시트 (활동지 표)

#표 #워크시트 #활동지

✓ ✓ ✓

목차 스타일

#목차 #TOC #링크

✓ ✓ ✓

구분선 (hr)

#구분선 #hr #섹션분리

✓ ✓ ✓

워크시트 (활동지 표)

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

질문 1

질문 2

교보 ✓ 리디 ✓ 알라딘 ✓

CSS

/* class="worksheet" 지정 필요 */
table.worksheet {
    width: 100%;                           /* 화면 너비에 맞춤 */
    border-collapse: collapse;             /* 테두리 합치기 */
    margin: 1.5em 0;
}
table.worksheet th {
    background-color: #F0FAF8;            /* 헤더 배경색 */
    color: #1A5C54;                        /* 헤더 글자색 */
    font-size: 1em;
    padding: 0.6em 0.8em;                /* 셀 여백 */
    border: 1px solid #BDDBD7;           /* 테두리 — 1px=두께, #색상 */
    text-align: center;
}
table.worksheet td {
    padding: 0.5em 0.8em;
    border: 1px solid #BDDBD7;
    color: #555555;
    line-height: 1.8em;
    text-align: left;
}
table.worksheet td:first-child,
table.worksheet th:first-child {
    width: 35%;                           /* 질문 열 너비 — 숫자↓ 좁아짐 */
}

HTML

<table class="worksheet">
  <tr>
    <th>질문</th>
    <th>나의 답</th>
  </tr>
  <tr>
    <td>오늘 가장 감사한 일은?</td>
    <td></td>
  </tr>
  <tr>
    <td>내일 꼭 하고 싶은 일은?</td>
    <td></td>
  </tr>
</table>

border-collapse: collapse — 셀 사이 간격을 없애고 테두리를 하나로 합칩니다. 표에는 필수입니다.

width: 100% — 표가 화면 전체 너비를 차지합니다.

워크시트(활동지)는 독자가 직접 채워넣을 수 있도록 빈 칸을 만들어두는 것이 포인트입니다.

💡 시길 팁시길 코드 뷰에서 table 태그를 직접 입력하세요. 북 뷰에서는 표 편집이 어렵습니다.

목차 스타일

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

1장

2장

3장

교보 ✓ 리디 ✓ 알라딘 ✓

CSS

/* class="toc" 지정 필요 */
.toc {
    padding: 1em 0;
    margin: 1em 0;
}
.toc a {
    display: block;                        /* 한 줄에 하나씩 */
    color: #1A5C54;                        /* 링크 색상 */
    text-decoration: none;                 /* 밑줄 제거 */
    padding: 0.4em 0;                     /* 항목 간격 */
    border-bottom: 1px solid #E8F5F0;     /* 구분선 */
    font-size: 1em;
    line-height: 1.6em;
}
.toc a:hover {
    color: #2FA599;                        /* 마우스 올렸을 때 색상 */
}

HTML

<div class="toc">
  <a href="chapter01.xhtml">1장. 감정의 뿌리를 찾아서</a>
  <a href="chapter02.xhtml">2장. 마음의 언어 배우기</a>
  <a href="chapter03.xhtml">3장. 치유의 첫 걸음</a>
</div>

display: block — 링크가 한 줄씩 표시됩니다.

text-decoration: none — 기본 밑줄을 제거합니다.

border-bottom — 얇은 구분선으로 항목을 분리합니다.

💡 시길 팁시길의 목차 자동 생성(도구 > 목차) 기능을 쓰면 HTML이 자동으로 만들어집니다. CSS만 추가하면 됩니다.

⚠️ 뷰어 참고전자책 뷰어는 자체 목차 기능이 있어서, 본문 목차는 꾸미기 용도입니다. 실제 이동은 뷰어 목차가 담당합니다.

구분선 (hr)

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

위 문단

아래 문단

교보 ✓ 리디 ✓ 알라딘 ✓

CSS

hr {
    border: none;                          /* 기본 선 제거 */
    border-top: 1px solid #BDDBD7;       /* 새 선 — 1px=두께, #색상 */
    margin: 2em auto;                     /* 위아래 여백 + 가운데 */
    width: 40%;                           /* 선 길이 — 숫자↑ 길어짐 */
}

HTML

<hr />

border: none — 브라우저 기본 구분선을 먼저 제거합니다.

border-top: 1px solid — 새로운 선을 위쪽에 그립니다.

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

💡 시길 팁시길 북 뷰에서 수평선은 삽입 메뉴에서 추가할 수 있습니다.

표 & 목차