티스토리 뷰
안녕하세요 탐구소년입니다.
프로그래밍언어인 HTML과 CSS 코딩을 통해 전자책을 제작할 수 있는 프로그램인 시길(sigil)에 대한 글을 조금씩 올리다 보니, 어느 순간부터는 HTML과 CSS의 코딩 방법에 대한 설명을 따로 해야 할 필요를 많이 느꼈습니다. 지금까지는 그때그때 필요한 내용만 설명해가면서 글을 작성했었는데, 점점 그러기가 힘이 들어지고 있거든요. 그래서 앞으로는 시간이 날 때마다 HTML/CSS 언어에 대한 글을 조금씩 올려보려고 하는데요(난이도 최하부터 시작). 오늘은 그 첫번째 게시글로써 HTML에 대한 소개를 먼저 조금 해보려고 합니다. 그럼 바로 시작하겠습니다.
HTML이란?
- 웹사이트를 나타낼 때 쓰이는 웹 문서를 작성하기 위해 존재하는 고유한 문서 형식입니다. 전자책 또한 전자 기기를 통해 표시되는 일종의 웹 문서라고 할 수 있기 때문에 이 HTML 언어를 사용해서 제작합니다.
- HTML은 텍스트 뿐만 아니라 이미지, 웹사이트 링크 등 여러가지 요소를 다루고 표시할 수 있는 형식입니다(전자책에도 이미지, 링크 등을 추가할 수가 있습니다).
- 문서 편집을 통해 HTML 파일의 코드를 작성하면, 똑같은 파일이 웹 브라우저나 전자책 뷰어에서는 코드를 통해서 만들어진 화면이 표시됩니다.
문서 편집을 통해 작성한 HTML 코드
전자책 뷰어로 봤을 때 표시되는 화면
HTML 문서의 기본이 되는 태그
- HTML은 웹 문서에서 어디가 어떤 부분인지를 표시하기 위해 태그(tag)라는 약속된 표기법을 사용해 마크업(markup)을 하는 언어입니다.
- 태그는 < 로 시작해서 >로 끝나는 것이 기본 형태이며, 여는 태그와 닫는 태그로 구분됩니다. 여는 태그로 시작해서 닫는 태그로 끝나는 부분이 하나의 태그 영역이 되며, 각 태그 영역은 하나의 역할을 담당합니다.
- 태그는 일반적으로 영문 소문자를 사용합니다.
전자책 HTML 문서의 기본 구조
시길(sigil)을 사용해 새 전자책 파일을 열면 다음과 같은 문서 구조가 제공됩니다.
이는 HTML 코드의 기본 구조로써, 10번째 줄과 12번째 줄의 <body>~</body> 태그 사이에 들어가는 내용이 바로 전자책의 내용이 되는 것입니다. <body>가 여는 태그이고 </body>가 닫는 태그로, 그 사이가 바로 전자책의 진짜 몸통이 되는 것입니다. <body>~</body>를 제외한 나머지 부분은 모두 HTML 문서의 기본 세팅을 위한 코드로, <body>~</body>를 제외한 다른 부분은 가급적 수정하지 않는 편이 좋습니다. 예외가 있다면, <title>~</title> 부분은 페이지의 제목을 표시하는 영역으로써 제작자가 알아보기 쉽도록 해당 제목을 써두는 경우가 많이 있습니다.
여기까지 해서 HTML에 대한 간단한 소개를 작성해보았습니다. 다음 순서는 아마도(!) 텍스트 관련 태그들에 대한 글이 될 것 같습니다. 그럼 오늘은 이만 하도록 하고, 마무리하도록 하겠습니다. 감사합니다.
'e-book > e-book coding' 카테고리의 다른 글
| EPUB 전자책 코딩을 위한 HTML : 특정 문단 및 영역만 글자 크게 만들기 (6) | 2020.08.25 |
|---|---|
| EPUB 전자책 코딩을 위한 HTML : 텍스트 꾸미기, 이미지, 링크 (3) | 2020.06.08 |
| EPUB 전자책 코딩을 위한 HTML : 텍스트 관련 태그 (10) | 2020.05.31 |