전자책을 구성하는 파일은 xhtml파일로 구성된다. Sigil을 실행하면 초기화면에 다음과 같은 소스가 뜬다.
1,2,4번 라인은 반드시 필요하다. 하지만, epub 오류검사를 무사히 통과하려면 페이지마다 최소한 위 내용이 반드시 들어있어야 한다. 9번줄에 내용을 입력하게 된다. 문서의 구조가 html5이지만, 공통요소인 html문법을 먼저 배우기로 한다. 어차피 작가 블로그를 생성하려면 html은 벗어날 수가 없다.
html
html문서는 다음과 같은 구조가 기본이다.
<html> </html>
이것만 입력하고 확장자를 index.html과 같이 .html로 끝나는 파일을 만든 후 웹브라우저에서 열면 오류없이 빈화면이 뜬다.
head / title
head tag는 문서에 대한 기본정보를 담아놓기 위한 태그이다. 이 안에는 나중에 설명할 문서제목, 스타일, 스크립트와 같은 것들이 들어간다. 예를 들어, 문서의 제목을 지정하고 싶으면 다음과 같이 위 소스에 다음 두 번째 줄을 추가하면 된다.
<html> <head><title>임시제목</title></head> </html>
그러면 웹브라우저 제목표시줄이나 문서탭에 임시제목이라는 글자가 나타난다. 전자책의 경우 리더기가 보여주는 페이지 바탕에 현재 읽고 있는 책의 Chapter나 Section을 나타낼 때 이 부분을 설정하면 된다.
body
아래와 같이 입력하면 내용입력을 위한 준비가 끝난다.
<html> <head><title>임시제목</title></head> <body> </body> </html>
이 상태에서 아무거나 입력해도 상관없다
<html>
<head><title>임시제목</title></head>
<body>
아무거나 입력
</body>
</html>
웹브라우저를 새로고침하면 그러면 화면에 아무거나 입력이라는 문자가 나타날 것이다.
p
html문서의 작성은 구조적으로 잘 이루어져야 한다. 최소한 문단과 문단은 구분해줘야 한다. 글의 내용상 하나의 문단에 포함되는 것은 <p>와 </p>로 감싸주는 것이 바람직하다. 그래야 책 전체의 스타일을 바꾸거나 할 때 나중에 문제가 생기지 않는다.
<html> <head><title>임시제목</title></head> <body> <p>html문서의 작성은 구조적으로 잘 이루어져야 한다. 최소한 문단과 문단은 구분해줘야 한다.</p> <p>글의 내용상 하나의 문단에 포함되는 것은 p태그로 감싸줘야 한다. </p> </body> </html>
위와 같이 입력하고 웹브라우저 창을 작게 띄우면 다음과 같이 문단 안에서의 줄간격과 문단과 문단사이의 줄간격이 차이가 나도록 문서가 배치되는 것을 확인할 수 있다.
'HTML CSS etc' 카테고리의 다른 글
| Google Code Prettify (0) | 2019.03.23 |
|---|---|
| 전자책 출판을 위한 HTML - 05 - 특수문자 입력법 (0) | 2018.10.19 |
| 전자책 출판을 위한 HTML - 04 - align, width (0) | 2018.10.17 |
| 전자책 출판을 위한 HTML - 03 - 주석(comment) (0) | 2018.10.15 |
| 전자책 출판을 위한 HTML - 02 - br, h1, h2, h3, ..., h6, hr (0) | 2018.10.14 |