전자책을 PDF 형식으로 제작할 경우 한글이나 워드 혹은 파워포인트를 이용해 일반 문서 작성하듯 만들면 되지만 EPUB 형식으로 제작할 경우는 기본적인 HTML & CSS를 알고 있어야 합니다. 저도 전자책을 만들다가 필요한 것이 있으면 인터넷을 뒤져서 필요 정보를 찾고 있습니다. 오늘은 HTML & CSS에 대한 가장 기초적인 내용부터 살펴보겠습니다.
1. 웹표준 이해하기
HTML & CSS에 대해 살펴보기 전에 "웹표준"에 대해 먼저 알아보겠습니다. 인터넷을 통해 특정 사이트에 접속을 했을 때 어떤 운영 체제나 브라우저를 사용하더라도 접속한 사람에게 동일한 형태(결과물)을 보여줘야 합니다. 이를 위해 W3C 라는 단체에서 권고한 표준 안을 이용하여 웹페이지를 만드는 것을 의미하며, 웹에서 표준적으로 사용되는 기술이나 규칙을 의미합니다. W3C를 주축으로 애플, 모질라, 구글, 오페라 등의 웹브라우저 벤더가 함께 연구하여 차세대 웹표준안인 HTML5(hyper Text Markup Language 5)를 발표했는데 기존 div 요소 외에 새로운 구조 요소에는 header, footer, aside, figure, section, article 등이 포함되어 있다고 합니다.
웹페이지를 구성하는 기본 언어는 HTML, CSS, javascript이 있는데 HTML은 집을 지을 때 골격을 짓는 것과 같은 역할입니다. CSS는 디자인적인 부분을 채워주는 역할을 하는데 예를 들어 글꼴이나 색상, 크기 등을 지정해주거나 선을 넣을 경우 선의 굵기나 모양 등을 지정해 줄 수 있습니다. 웹페이지에서 javascript는 동작을 표현하게 되는데, 텍스트 중심의 전자책을 만들 경우 기본적인 HTML & CSS 정도만 이해해도 제작이 가능합니다.
2. 전자책 제작을 위한 HTML & CSS 구조 이해하기
sigil 프로그램을 실행하여 커버(cover)를 등록한 후 cover 영역의 코드보기를 확인하면 아래와 같이 나타납니다.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover</title>
</head>
<body>
<p style="margin:0px; padding:0px;"><img style="width:100%;" alt="cover" src="../Images/cover.jpg"/></p>
빨간 부분은 커버 이미지를 넣으면서 나타난 코드입니다.
<body>
</body>
</html>
utf-8는 Unicode Transformation Format-8의 약자로 국제표준코드를 의미합니다. 영어에서 대문자의 문자 코드값과 소문자의 문자 코드값이 다른데, 이런 문자 코드값이 총 집합된 것으로 웹상에서는 utf-8를 사용한다고 합니다. 또 !DOCTYPE은 문서 타입을 의미하는 것인데 <head> 윗 부분은 자동으로 입력되어 있으므로 굳이 외우고 있을 필요는 없습니다.
위에 보이는 코드의 구조를 보면
<html> <head> </head> <body> </body> </html> 로 되어 있습니다. 모든 html 태그는 <>로 감싸있는 것을 알 수 있고 두 개씩 짝을 이루고 있습니다. 물론 뒤에서 설명하겠지만 단독으로 쓰이는 태그도 있으나 대부분 "시작하는 태그"와 "마침 태그"가 함께 쓰입니다(보는 것 처럼 마침태그는 앞에 /를 넣어주면 됩니다). 전자책을 작성하다가 무엇인가를 지울 때 시작태그만 지우면 오류표시가 나는데 이때 앞 뒤를 살펴보고 짝을 이루는 마침태그를 지워주면 오류표시가 사라집니다.
<head>와 </head> 는 문서의 머릿말 같은 역할을 한다고 보면되는데 전자책의 경우 주로 스타일 시트 파일을 작성한 후이 사이에 넣어줄 수 있습니다. "스타일 시트"는 글꼴, 글색상, 자간, 행간 등을 지정한 후 "문서 전체에 일괄" 적용하고 싶을 경우 사용합니다. 그리고 전자책을 출판을 위해 작성한 원고는 모두 <body>와 </body> 태그 안에 들어갑니다.
HTML을 표기하는 방법은 <시작 태그 속성 = “속성에 적용될 값“> 내용 </종료태그>로 표기하며 화면에 보여지는 부분은 태그 사이에 넣은 "내용" 부분입니다. 예를 들어 <p style = “background-color:skyblue;”> 배경 스타일 지정 </p> 로 코드가 작성되어있다면 "배경 스타일 지정"이 화면에 보이게되고 이 문장에 대한 스타일을 style = “background-color:skyblue;”라고 지정해 준것입니다. 물론 <head>와 </head>사이에 <p>에 대한 스타일을 작성 후 전체 적용해 주면되는데 특정 부분의 문장이나 단어만 빨강색으로 강조한다든지 글의 크기를 키운다든지 할 경우 <body></body> 안에 있는 각 태그에서 따로 지정해 줄 수 있습니다.
CSS는 Cascading Style Sheets의 약자로 HTML에서 지원하지 못하는 행간, 자간, 단어사이 간격, 배경이미지, 위치조정과 같은 다양한 디자인 기능을 제공할 수 있습니다. CSS는 선택자 {속성:속성값;}의 형식으로 작성하며, 문서에 적용하는 방식은 크게 세 가지 유형이 있습니다.
- 첫째로 앞서 본것처럼 HTML 태그 요소 안에 Style 속성을 넣어줄 수 있습니다. 예를 들어 <p style="color:red; line-height:200%;">과 같이 속성(color나 line-height)을 넣고 콜론 : 과 세미콜론 ; 사이에 원하는 속성값(red 혹은 200%)을 지정하면 됩니다.
- 둘째로 <head>와 </head> 사이에 link 태그를 이용하여 css 파일을 연결하는 방식으로 스타일을 지정해줄 수 있습니다. 아래는 전자책의 파일 중 styles폴더안에 "Style0001"을 작성 후 <head>와 </head> 사이에 link 태그를 통해 스타일을 적용한 예입니다.
<head> <link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/> </head>
- 셋째로는 <head>와 </head> 사이에 style 태그를 이용해 CSS를 적용할 수 있습니다. 예를 들어 아래 작성된 것을 보면 <style>과 </style> 사이에 있는 li, ul, a의 경우 { } 사이에 속성과 속성값이 적용되어 화면에 노출됩니다.
<head>
<style type="text/css">
li{display : inline;}
ul{padding: 20px; background-color:#ff0000;}
a{padding:10px 70px; color:#ffffff;}
a:hover{background-color:#000000;}
</style>
</head>
또 코드를 입력한 후 특정 태그나 스타일 속성이 무엇을 의미하는지 자료를 남겨두고 싶을 경우가 있습니다. 이때 사용할 수 있는 것이 주석표시입니다. HTML에서는 <!-- -->, CSS에서는 /* */로 표시할 수 있는데, 코드에 <!-- 문서 작성 -->, /*이미지 정렬 */라고 작성할 경우 실제 웹 화면에는 글자가 보이지 않고 코드 보기에서만 이것이 보이므로 내가 이 코드가 무엇을 의미하는지 참고하고 싶거나 작성된 것 중 일부를 삭제하는 대신 감추고 싶은 것이 있을 때 사용하면 됩니다.
3. 단독 태그(<br>과 <img>) 알아보기
HTML 태그는 대부분 시작태그와 마침태그가 짝을 이루어 작성된다고 했습니다. 같이 짝을 이루어 작성되는 태그는 다음포스팅에서 알아보도록 하고 이번에는 단독으로 사용되는 태그 중 자주 사용되는 두 가지를 알아보도록 하겠습니다.
- 전자책에서 흔히 볼 수 있는 것이 <br> 태그 입니다. 코드를 작성하다가 enter 키를 치고 문단을 바꿔도 웹화면에는 문단이 다음 줄로 넘어가지 않습니다. 이 경우 enter 키의 역할을 해주는 것이 <br> 태그입니다.
- <img> 태그는 이미지를 삽입할 때 쓰는 태그입니다. 속성 태그를 통해 크기 조절, 테두리 설정 등이 가능합니다. 표기 방법은 </img src=“이미지 저장 주소 URL” >로 작성할 수 있고 border 속성을 통해 이미지 테두리를 설정할 수 있으며 alt 속성은 이미지를 찾을 수 없을 때 이미지에 대한 설명을 글로 작성한 부분입니다.
전자책의 코드에서 일부 가지고온 예인데 <img style="width:100%;" alt="cover" src="../Images/cover.jpg"/>가 의미하는 것을 살펴봅시다. img의 style이 지정되어 있는데 첫 번째는 width(너비)를 웹화면에 100% 채워서 보여달라는 의미이며 두번째 alt는 커버 이미지가 없을 경우 (안보일 경우) 웹화면에 cover라고 표기해 달라는 의미입니다. 마지막의 src는 이미지의 저장 경로를 보여주고 있습니다.
오늘은 여기까지 알아보도록 하겠습니다. 감사합니다^^
'전자책' 카테고리의 다른 글
| 1인 전자책 출판을 위한 HTML & CSS 이해하기(3) : font와 Text 속성 및 글꼴 설치 (0) | 2023.02.05 |
|---|---|
| 1인 전자책 출판을 위한 HTML & CSS 이해하기(2) : 주요 HTML 태그 중심으로 (0) | 2023.02.05 |
| 전자책(E북) 만들기 : sigil 다운로드 & 화면 구성 이해하기 (0) | 2023.01.31 |
| 캔바로 전자책 북커버(책표지) 만들기 (2) | 2023.01.30 |
| 나의 첫 전자책, 무료 온라인쇼핑몰 만들기, 전자책 유통 (0) | 2023.01.25 |
댓글