자! 무직 탈출 전자책 프로젝트 17일 차다. 10월 초에 한 이틀 비가 신나게 오더니 그전까지는 좀 더웠고 그 후부터는 다소 쌀쌀해졌다. 어제는 선풍기를 켰다가 오늘은 온풍기를 켜야 하는 기후로 변하고 있다.
오늘은 '전자책에서 월세 받기 프로젝트' 책에서 분할 페이지 만드는 법에 대해서 배웠다. 아래에 간략히 정리해보겠다.
전자책에서 분할 페이지란?
일단 분할 페이지가 무엇인지 알아야 한다. 분할 페이지는 본문을 파트 1, 파트 2, 파트 3.... 이렇게 몇 개의 파트로 나눌 때 그 파트가 시작됨을 알리는 일종의 속지다.
위 사진에서 '봄봄1'이라고 적힌 게 본문 파트 1을 위한 분할 페이지이고 마찬가지로 '봄봄2'라고 적힌 게 본문 파트 2를 위한 분할 페이지다.
그러니까 지난 글에서 정리했던 본문 전 속지와 유사한 역할을 한다고 보면 될 것이다. 즉 언급한 부분만 알기 쉽게 정리하면 아래와 같다.
[본문 전 속지]
[파트 1 본문을 위한 분할 페이지]
[파트 1 본문 내용]
[파트 2 본문을 위한 분할 페이지]
[파트 2 본문 내용]
[파트 3 본문을 위한 분할 페이지]
[파트 3 본문 내용]
.....
이 책이란 게 알맹이는 본문일 텐데 그 본문을 감싸고 있는 껍질들이 참 많다는 생각이 든다. 위에서 굵은 글씨로 표현한 부분이 본문인데 그 전과 후로 감싸고 있는 속지나 페이지 등이 참 많다.
시길(Sigil)에서 분할 페이지 만들기
분할 페이지에서 id를 활용한 배경색 지정
위 사진을 보면 '봄봄1' '봄봄2' 모두 배경색이 입혀진 것을 알 수 있다. 배경색 설정을 간략히 설명하면 아래와 같다.
<body id = "abc">
#abc{
background-color:rgb(xxx,xxx,xxx);
}
body 태그에 id로 이름을 정해주고 그 이름에 해당하는 속성은 #을 이용해서 스타일시트에 그 속성을 정해준다.
분할 페이지에서 class를 활용한 텍스트 속성 지정
위 사진을 보면 '봄봄1' '봄봄2'에 해당하는 텍스트들이 화면 위에서 40퍼센트 정도 떨어진 곳에 위치해 있고 흰색 텍스트에 흰색 밑줄로 설정된 것을 알 수 있다. 이러한 속성은 아래와 같은 방법을 이용했다.
<p class="def">
.def{
각종 속성 정의...
}
p 태그에 class로 이름을 정해주고 그 이름에 해당하는 속성은 점(.)을 이용해서 스타일시트에 지정해준다.
클래스와 아이디의 차이는 뭘까?
id나 class나 대동소이한 것 같은데 구분하는 이유가 궁금하다. 지금 보고 있는 책은 html, css 강의용 책이 아니라 거기에 대한 언급은 없다. 나도 거기서 더 파고 들어갈 필요는 없는 것 같다. 그냥 그렇게 쓰는가 보다 하고 넘어가자.
현재까지 진행 상황
1. 표지
2. 속표지
3. 작가 소개
[..... 작가 소개에 해당하는 텍스트 .....]
4. 프롤로그
[..... 프롤로그에 해당하는 텍스트 .....]
5. 일러두기
[..... 일러두기에 해당하는 텍스트 .....]
6. 본문 전 속지
[..... 본문 전 속지에 해당하는 텍스트 .....]
7. 분할 페이지 1
8. 분할 페이지 2
..... (이하 생략)
오늘 배운 분할 페이지 1과 분할 페이지 2의 사이사이에 드디어 본문이 들어가게 될 것 같다. 책의 다음 부분에 거기에 대한 설명이 있더라. 오늘은 여기까지!
무직 탈출 전자책 출간 프로젝트
다음회 보기>>
관련 글
'도전일기 (2019년 이후) > 전자책 출간하기' 카테고리의 다른 글
| 무직 탈출 전자책 출간 프로젝트 18일 차 - 시길에서 본문 페이지 스타일 정의하기 (0) | 2022.11.02 |
|---|---|
| 무직 탈출 전자책 출간 프로젝트 16일 차 - 일러두기와 본문 전 속지 (1) | 2022.09.21 |
| 무직 탈출 전자책 출간 프로젝트 15일 차 - 시길에서 CSS 적용 2단계부터 나머지까지 (0) | 2022.09.11 |
| 무직 탈출 전자책 출간 프로젝트 14일 차 - 시길에서 CSS 적용 1단계 (0) | 2022.09.07 |
| 무직 탈출 전자책 출간 프로젝트 13일 차 - 시길에서 속표지 설정하기 (0) | 2022.08.29 |