무직 탈출 전자책 출간 프로젝트 18일 차 - 시길에서 본문 페이지 스타일 정의하기

자! 무직 탈출 전자책 프로젝트 18일 차다. 지금이 11월 2일 오후 4시인데 현재 기온이 17도다. 밖에는 아직까지 허공에 날파리들이 날라다닌다. 

오늘은 '전자책에서 월세 받기 프로젝트' 책에서 아래와 같은 내용을 공부했다. 

• 본문 페이지 만들기 (h2 소제목에 스타일 입히기)
• 특정 글자에 span 태그로 스타일 입히기
• 본문에 이미지 넣기

아래에 오늘 공부한 위 3가지 내용중 첫 번째 항목만 간략히 정리해보겠다. 참고로 나머지 2개는 다음 포스팅에서 기록할 것이다.  

 

시길(Sigil)에서 본문 페이지 만들기

일단 아래를 좀 보자.

.....
[본문 전 속지]
[파트 1 본문을 위한 분할 페이지]
[파트 1 본문 내용]   <-- 오늘 볼 부분
[파트 2 본문을 위한 분할 페이지]
[파트 2 본문 내용]   <-- 오늘 볼 부분
[파트 3 본문을 위한 분할 페이지]
[파트 3 본문 내용]
.....

위에서 붉은 글씨로 '오늘 볼 부분'이라고 표시한 부분은 결국 아래와 같은 형식으로 구성이 될 것이다.

<h2>본문 소제목 1</h2>
<p> 본문 소제목 1 내용 어저꾸 저쩌구....</p>

<h2>본문 소제목 2</h2>
<p> 본문 소제목 2 내용 어저꾸 저쩌구....</p>

..... 

p 태그는 이미 css에 그 스타일을 정해놓았기 때문에 현 시점에서 그 부분을 건드릴 필요는 없다. 즉 여기서는 본문 소제목에 해당하는 h2 태그의 스타일만 정의해주면 된다는 소리.

결국 이미 만들어놓은 style0001.css 파일을 열어서 아래와 같은 코드를 정의해주면 된다는 거다.

h2{
font-family: ......
(중략)
text-shadow: 2px 5px 5px gray;
}

만약 본문 소제목(h2)보다 하위 목차가 있다면 h3, h4를 사용한 후 같은 방법으로 스타일을 지정해주면 된다. 

 

현재까지 진행 상황

1. 표지
2. 속표지
3. 작가 소개
[..... 작가 소개에 해당하는 텍스트 .....]
4. 프롤로그
[..... 프롤로그에 해당하는 텍스트 .....]
5. 일러두기
[..... 일러두기에 해당하는 텍스트 .....]
6. 본문 전 속지
[..... 본문 전 속지에 해당하는 텍스트 .....]
7. 분할 페이지 1
   본문 페이지 <-- 현재 보고 있는 부분
8. 분할 페이지 2
   본문 페이지 <-- 현재 보고 있는 부분
..... (이하 생략)

오늘은 여기까지!!!

무직 탈출 전자책 출간 프로젝트
다음회 보기>>

 

관련 글

무직 탈출 전자책 출간 프로젝트 전제 목록

손해평가사 도전 일기