내맘대로의 EPUB 제작 가이드

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

<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

□ 사용 가능한 속성