내맘대로의 EPUB 제작 가이드

1.2.1  CSS란?

인터넷과 웹이 보편화 되면서 HTML로 웹페이지를 만들 수는 없더라도 HTML이 무엇인지 정도는 누구나 알고 있다. 하지만 많은 사람들에게 CSS는 낯선 단어이다. CSS는 쉽게 설명하면 워드프로세서의 편집기능에 해당한다. 워드에는 글자 크기를 조절하고, 글자 색을 넣고, 상하좌우 여백을 지정하고, 왼쪽, 오른쪽 정렬을 하는 기능이 있는데 HTML에서는 이런 편집을 하기 위해 CSS를 사용한다. HTML에도 기본 속성이 있어 간단한 편집을 지원한다. 좌우 정렬이나 글자색 등을 HTML 기본 속성으로 설정할 수 있다. 하지만 기본 속성으로 표현을 하기에는 한계가 있다. 복잡한 편집이 어렵고 개별 태그에 속성을 하나씩 지정해야 하기 때문에 시간도 오래걸리며 통일된 편집을 유지하기도 어렵다.

CSS는 이런 태그별 속성 지정 방식의 한계를 극복하고 다양한 편집이 가능하도록 해준다. CSS를 사용하면  문서 전체를 일관된 형태로 편집할 수 있고, CSS파일을 변경하는 것 만으로 문서 전체의 편집을 수정할 수 있어 편집 시간이 절약된다. CSS를 표준화시키면 테마형태로 스타일을 만들어 놓고 여러 EPUB에 적용할 수 있다. 여행 테마, 자기계발 테마, 소설 테마를 만들어 놓고 책의 내용에 맞게 테마를 선택해서 편집할 수 있다. 또한 여행 테마를 선택하더라도 CSS 파일만 약간 수정하면 전체적인 분위기는 유지하면서 다른 느낌의 여행책을 만들 수도 있다. 

CSS를 간단히 정리하면?

1. CSS는 Cascading Style Sheet의 약자이다.

2. HTML로 만든 문서를 화면에 어떤 스타일로 표현할 것인지를 정의한다.

3. HTML로는 표현이 어려웠던 다양한 스타일을 적용할 수 있다.

4. CSS파일 하나로 여러개로 분리된 HTML에 스타일을 정의할 수 있고, CSS만 바꿔도 전체 스타일이 변경된다.

[글머리 숫자 목록]에 사용하는 태그

<ol><li>목록1</li><li>목록2</li></ol>

<ol>태그 그룹은 글머리 숫자가 붙은 목록을 표현할 때 사용한다. <ol>태그 단독으로 사용할 수 없고 목록을 표현하는 태그인 <li>태그와 반드시 함께 사용해야 된다. <ul>태그와는 달리 HTML4와 HTML5에서 type 속성을 지원하며 start 속성도 지원한다. HTML5에서는 오름차순 정렬인 reversed 속성이 새로 추가되었으나 지원하지 않는 브라우저가 많기 때문에 신중히 사용해야 한다. 

◈ <ol><li> 태그 문법◈

ol_li_tag_sample.html

□ 사용 가능한 속성

◆ 기본 제공되는 글머리 이외에 다양한 글머리 표현하기 --> 링크

<li> 태그를 쓰면 목록 앞에 글머리 기호나 숫자가 나온다. HTML의 속성으로는 이 글머리를 없애지 못하고, 글머리 모양도 한정적이다. 이를 해결하기 위해서는 CSS를 사용해야 한다. CSS를 사용하면 HTML에서 제공하는 기본 타입 외에 20여가지의 속성을 사용할 수 있고, 이미지로 자신만의 목록을 만들 수 있다.

자세한 설명은 링크를 참조하세요.

[글머리 기호 목록]에 사용하는 태그 

<ul><li>목록1</li><li>목록2</li></ul>

<ul>태그 그룹은 글머리 기호가 붙은 목록을 표현할 때 사용한다. <ul>태그 단독으로 사용할 수 없고 목록을 표현하는 태그인 <li>태그와 반드시 함께 사용해야 된다. HTML4에서는 type 속성을 지원해서 disc, square, circle 등 3가지 모양의 글머리를 지원하며 <li type="square">로 사용하면 되나  HTML5에서는 compact와 type 속성을 지원하지 않기 때문에 사용가능한 속성은 설명하지 않는다.

◈ <ul>, <li> 태그 문법◈

ul_li_tag_sample.html

◆ 참고 : list-style-type으로 다양한 글머리 표현하기

<li> 태그를 쓰면 목록 앞에 글머리 기호나 숫자가 나온다. HTML의 속성으로는 이 글머리를 없애지 못하고, 글머리 모양도 한정적이다. 이를 해결하기 위해서는 CSS를 사용해야 한다. CSS를 사용하면 HTML에서 제공하는 기본 타입 외에 20여가지의 속성을 사용할 수 있고, 이미지로 자신만의 목록을 만들 수 있다.

▷ 예제 : CSS로 글머리 기호 표현하기

▷ 결과

표현 가능한 글머리 기호는 http://www.w3schools.com/cssref/pr_list-style-type.asp 여기를 참고하세에요.

[목록]에 사용하는 태그 

<dl>...</dl>

<dt> ... </dt>

<dd> ... </dd>

<dl>태그 그룹은 사전처럼 용어를 설명할때 사용하는 태그이다. <dl>태그만 독립적으로 사용할 수 없고 용어(definition term)를 표현하는 <dt> 태그와 용어에 대한 설명(definition descriptxion)을 표현하는 <dd>가 한 쌍으로 사용된다. 

사전을 예로 들면 <dt>태그는 사전의 단어에 해당하는 부분이고, <dd>태그는 사전의 뜻풀이에 해당하는 부분이다.  <dd>태그는 <dl>태그보다 한 탭정도 들여쓰기가 된고  글머리 기호나 번호가 붙지 않는다.다.

◈ <dl>, <dt>, <dd> 태그 문법◈

dl_dt_dd_tag_sample.html