무직 탈출 전자책 출간 프로젝트 15일 차 - 시길에서 CSS 적용 2단계부터 나머지까지

자! 무직 탈출 전자책 출간 프로젝트 15일 차다. 어제가 추석이었다. 오늘은 구름이 좀 낀 선선한 날씨이다. 명절 다음날이고 해서 하루 더 쉴까 하다가 컴퓨터 앞에 앉아서 교보문고 이북 리더기 프로그램을 구동했다. 

오늘은 CSS 적용하기 1단계를 기록한 지난 포스팅에 이어서 '전자책으로 월세 받기 프로젝트' 책에서 CSS 적용하는 법 2단계부터 그 나머지 부분을 모두 읽었다.  아래에 간략히 정리해보겠다.

 

시길(Sigil)에서 CSS 적용을 위한 준비 2단계 - Fonts 폴더에 사용할 폰트 추가하기

시길 프로그램의 왼쪽에 위치한 Fonts 폴더를 우클릭한 후 기존 파일 추가를 클릭해서 일전에 작업 폴더에 넣어둔 나눔 명조, 나눔 명조 엑스트라 폰트를 선택한다. 

 

시길(Sigil)에서 CSS 적용을 위한 준비 3단계 - 스타일 시트 만들기

시길 프로그램의 왼쪽에 위치한 Styles 폴더를 우클릭한 후 '빈 스타일시트를 추가' 메뉴를 선택한다. 그러면 해당 Styles 폴더에 Style0001.css 파일이 생성된다. 

 

시길(Sigil)에서 CSS 적용을 위한 준비 4단계 - 스타일 시트에 폰트 선언하기

Style0001.css 파일에 @font-face {... 중략...} 형식의 문장을 이용해 나눔 명조와 나눔 명조 엑스트라 폰트를 사용할 것임을 선언한다.

 

시길(Sigil)에서 CSS 적용을 위한 준비 5단계 - 섹션과 스타일 시트 연결하기

시길 프로그램의 왼쪽에서 작가 소개와 프롤로그 이후의 전체 텍스트를 담고 있는 섹션을 우클릭한 후 'Stylesheet를 연결' 메뉴를 선택한다. 그리고 Style0001.css 파일을 선택한다. 이후 섹션 파일의 head 태그 사이에 <link~>로 시작하는 문장이 삽입되었는지 확인한다. 

 

시길(Sigil)에서 CSS 적용을 위한 준비 6단계 - 섹션 분리하기

<h1> 목차 </h1>
<p> 본문 </p> <-- 

 위의 ' <-- ' 부분에 커서를 둔 후 메뉴의 Split 버튼을 누르는 방식으로 하나의 섹션에 담겨 있던 각각의 목차와 본문 부분을 모두 개별 섹션으로 분리시켜준다.

 

시길(Sigil)에서 CSS 적용을 위한 준비 7단계 - 목차 태그와 본문 태그에 스타일을 적용시킨다

Style0001.css 파일을 연 후 각각의 목차 태그 즉 h1~h6에 해당하는 스타일을 입력한다. 그 후 본문 태그에 해당하는 p 태그의 스타일도 정의해준다. 

 

현재까지 진행 상황

1. 표지
2. 속표지 
3. 작가소개
[..... 작가 소개에 해당하는 텍스트 ......]
4. 프롤로그
[..... 프롤로그에 해당하는 텍스트 ......]  
5. 본문
[..... 본문에 해당하는 텍스트 .....]

..... (이하 생략)

 

3번부터 5번을 거쳐 마지막 텍스트까지 CSS를 이용해 스타일을 일괄적으로 적용하는 것을 배웠다.  오늘 정리한 내용은 다소 복잡해 보인다. 나중에 실제로 전자책을 만들 때 책을 다시 한 번 정독해야 할 필요성을 느낀다. 오늘은 여기까지!