전자책 ebook 만들기 3 (with sigil)
by kokh
표지 페이지 만들기
전자책 만들기 2 에서는
css 파일을 폴더에 삽입 방법과
표지 이미지를 폴더에 삽입하는 방법에 대해 알아보았습니다.
그러면 이제 이것들을 이용해 표지 페이지를 만들어보겠습니다.
지난 시간에 배운대로 실행한 대로라면
styles 폴더에 css파일이 들어있고,
images 폴더에 표지 이미지 파일이 들어가 있을 것입니다.
이제 Text 폴더에 있는 Section0001.xhtml 파일을 표지로 사용할 것입니다.
Text 폴더에 마우스를 올려놓고 우클릭을 하면 메뉴가 뜨는데 그 중 '이름바꾸기'를 클릭합니다.
이름을 cover로 바꿔줍니다.
그 다음 오른쪽에 소스창을 보면 이상한 영어들이 써 있지만 겁먹지 마시고 천천히 따라오시면 됩니다.
이제 지금 작성하는 내용이 들어갈 곳은 <body>와 </body> 사이입니다.
지금은 <p> </p>가 있는데,
p는 문단을 쓸 때 사용하므로 지워주고 <div></div>를 입력합니다.
앞으로 이미지나 다른 개체를 삽입할 때에는 무조건 div 태그를 이용합니다.
이건 꼭 잊지 마시기 바랍니다.
<div>와 </div> 사이에 커서를 놓고,
엔터를 두 번 눌러 <div> 와 </div> 사이에 빈 칸을 하나 만들어줍니다.
커서가 빈 칸에 있는 채로 파일추가 버튼을 클릭합니다.
파일추가 창이 뜨고,
우리가 EPUB 파일 안에 삽입한 이미지 파일이 쭉 뜨는데,
이번에는 1개만 넣었기 때문에 하나밖에 없습니다.
이미지를 클릭해주고, 바로 확인 버튼을 누릅니다.
이미지가 삽입된 것을 확인할 수 있습니다.
오른쪽 미리보기 창에 표지 이미지가 보일 것입니다.
하지만...
이럴 경우 자동으로 좌측 정렬이 되기 때문에
화면이 큰 단말기에서 이용하면 표지가 왼쪽으로 쏠리게 됩니다.
늘 중앙에 출력되도록 해줍시다.
커서를 이미지 태그가 끝나는 />뒤에 바로 두고
메뉴 창에서 가운데 정렬 버튼을 눌러줍니다.
그러면 style="text-align: center; 속성이 생깁니다.
오른쪽 미리보기 창(단축키F10)을 보면 가운데 정렬이 되어있는 것을 확인하실 수 있습니다.
이렇게 해서 표지 페이지가 만들어졌습니다.
참고로, 이 표지 이미지의 크기는 따로 설정하지 않았습니다.
700*1000 픽셀이기 때문에 웬만한 단말기에서는 꽉 차게 보일 겁니다.
만약 이보다 작은 디스플레이를 가진 단말기에서 열더라도
요즘 뷰어는 대부분 자동으로 화면에 맞춰 큰 이미지를 리사이징하기 때문에
굳이 크기 설정을 하실 필요는 없습니다.
하지만 어디까지나 표지만 그렇습니다.
내용에 삽입되는 이미지는 편집에 맞게 크기 설정을 해줘야 합니다.
이것은 나중에.
다음시간에는...
삽입한 CSS 파일을 적용시키는 작업을 하겠습니다.
'프로젝트 > 전자책 만들기(with sigil)' 카테고리의 다른 글
| 전자책 ebook 만들기 2(with sigil) (0) | 2021.05.24 |
|---|---|
| 전자책 ebook 만들기 1 (with Sigil) (0) | 2021.05.23 |
블로그의 정보
ASLANLION
kokh