내맘대로의 EPUB 제작 가이드

1.2.2. CSS의 기본 구조

CSS는 HTML 태그나 클래스에 표현하고 싶은 스타일을 정의한다. 스타일을 지정받게 될 태그나 클래스를 선택자(Selector)라고 하고, 선택자 뒤에 지정할 속성과, 속성의 값을 대괄호{ }로 묶어 표현한다. 

CSS의 구조

하나의 선택자에 여러개의 속성을 정의할 수 있다. 글자 크기, 모양, 색 등 글자 속성, 상하좌우 정렬, 좌우 여백, 들여쓰기, 줄간격, 테두리, 배경색 등 문단 편집에 필요한 속성, 이미지, 동영상, MP3, 에니메이션 등 CSS로 표현할 수 있는 편집 형태는 다양하다.

CSS도 HTML처럼 여백이나 줄간격은 무시된다. 그래서 구조적으로 보기 좋게 편집이 가능하다. 아래 3개의 CSS는 모두 똑같은 스타일이 적용되지만 첫번째 보다 두번째가 알아보기 쉽다. 만약 여러사람이 사용하거나, 제3자가 스타일을 수정할 필요가 있다면 세번째처럼 설명을 추가할 수도 있다. “/*”와 “*/”사이에 있는 내용은 공백처럼 컴퓨터가 무시를 하기 때문에 CSS에 설명을 추가할 때 사용할 수 있다. 

속성을 한줄로 나열하게 되면 어떤 속성을 적용했는지 확인하기 어렵다. 속성을 한줄로 나열하기 보다는 아래처럼 한줄씩 줄바꿈을 해서 선택자에 어떤 속성이 적용되었는지 보기 편하게 정리하는 것이 좋다.

또한 아래처럼 /*설명*/을 붙여 각 선택자에 어떤 목적으로 속성을 적용했는지를 적어주거나 각 속성에 특이점이 있다면 어떤 특이점이 있는지 등을 설명해 주는 것이 좋다. 설명을 달아 두면 시간이 지나도 CSS를 알아보기 쉽고, 만약 제3자가 수정을 할 일이 생기더라도 처음 책을 편집한 사람의 의도를 쉽게 파악할 수 있게 된다. 

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

테이블/표에 사용하는 태그 

<table>...</table>

<tr> ... </tr>

<td> ... </td>

<table>태그 그룹은 표를 만들 때 사용한다. <table>태그는 단독으로 사용할 수 없고 <tr>과 <td>태그가 함께 사용한다. 하나의 <table></table>태그 사이에는 반드시 하나 이상의 <tr></tr>태그가 들어가야하며 <tr>태그 안에는 다시 <td></td>태그가 들어가야 한다. 

<tr></tr>은 행을 추가할 때 사용한다. 5행짜리 테이블을 만들기 위해서는 <table></table> 사이에<tr></tr>이 5개 있어야 한다.

<td>는 한 행을 몇개의 칸(열)으로 나눌지 결정한다.  열이 5개인 표를 만들고 싶으면 <tr></tr>안에 <td></td>가 5개 있어야 한다.

위의 예제처럼 2행, 2열, 총 4칸짜리 테이블을 만들기 위해서는 행을 그려주는 <tr>이 2번, 칸을 그려주는 <td>가 <tr>안에 각각 2번씩 4번 나와야 한다. 

테이블은 가로 2칸을 병합하거나 세로 2칸을 병합하는 등 좀 더 복잡한 구조를 가질 수 있다. 

테이블의 속성인 rowsapn과 colspan은  <td>태그에 사용하는 속성으로 행과 열을 병합할 때 쓴다. 행과 열을 병합할 때는 표의 정확한 구조를 파악하지 않으면 표가 제대로 그려지지 않을 수 있으니 주의해야 한다.

◈ <a href="URL"> </a> 태그 문법◈

table_tag_sample.html

□ 사용 가능한 속성