사실 전자책에서 사용되는 코딩 태그는 생각보다 적습니다.
먼저 공간과 레이아웃을 구성하는 블록태그 그리고 그 안에서 특별한 부분을 꾸며주는 인라인 태그로 분류할 수 있는데,
블록태그는
글상자의 역할 또는 공간의 역할을 담당하는 디비젼태그 div가 있고, 단락의 역할을 하는 패러그래프 p태그 그리고 p태그와 같지만 목차의 속성을 가지고 있는 h1, h2,h3, h4, h5, h6 태그가 있습니다.
이 태그들을 이용해서 간단하게 본문의 레이아웃을 아래처럼 만들 수 있습니다.
<h1>대제목</h1>
<p>단락글</p>
<div><p>글상자 안의 단락글 </p> </div>
<p>단락글</p>
<h2>중제목</h2>
<p>단락글</p>
이를 쉽게 풀어서 설명하면 다음과 같습니다.
대제목
단락글
글상자 글상자 안의 단락글
단락글
중제목
단락글
이처럼 레이아웃구성을 만드는 태그들은 실제 용어와 잘 맞춤을 한다면 굳이 직접 코딩을 하지 않아도 충분히 표현할 수 있습니다. 전자책을 만들 수 있다는 거지요.
그래서 레이아웃을 담당하는 h1~6, p, div의 태그를 잘 알아야 합니다.
h1~6 제목- 글꼴, 글자 색상, 글자 크기, 행간, 자간 p 단락- 글꼴, 글자 색상, 글자 크기, 행간, 자간 div 글상자- 상자의 테두리, 상자의 배경색, 상자의 선모양, 상자의 선 두께, 상자의 선 색상
위의 스타일 정리처럼 해당 태그를 CSS로 꾸며 주어야 합니다. 그런데 우리는 윙크를 사용하니 윙크에서 "CSS생성" 버튼을 누르고 위의 속성을 따라서 입력만 하면 됩니다. 그리고 위의 태그들을 사용하는 스타일들을 윙크에서는 h스타일, div스타일, p스타일이라고 합니다.
h1~6태그를 사용한 스타일 작성법
먼저
주면됩니다. 이것은 표현법에 해당하니 다음 포스팅부터 설명하도록 하겠습니다.
지금까지 우리가 알아본 것은 블록태그에 대한 본문 스타일입니다.
이제 인라인태그에 대한 본문 스타일도 알아야겠지요.
문자- 글꼴, 크기, 글자 색상, 자간 단어- 글꼴, 크기, 글자 색상, 자간 밑줄- 글꼴, 크기, 글자 색상, 자간, 하단 선 색상, 하단 선 굵기, 하단 선 모양
몇가지 분류로 나누었지만 본문에서 특별한 기능을 담당하지 않고 꾸며주는 기능을 담당하는 인라인태그는 span입니다. 그래서 얘네들은 앞으로 span스타일 또는 문자스타일이라고 부르면 되겠습니다.