Wystan's tales

리스트와 표 작성은 더 이상 짜증나는 작업이 아닙니다. Textile을 사용하면 간단하게 입력할 수 있거든요.

먼저 순서 없는 리스트(Unordered List)를 만들어 볼까요? 리스트의 각 항목을 * 기호로 시작하면 됩니다. 아래 예처럼요.

* 리스트 항목 1
* 리스트 항목 2
** 리스트 항목 2-1
* 리스트 항목 3

<ul>
  <li>리스트 항목 1</li>
  <li>리스트 항목 2
    <ul>
      <li>리스트 항목 2-1</li>
    </ul>
  </li>
  <li>리스트 항목 3</li>
</ul>

* 기호와 항목 사이가 띄어쓰기 되어있는 것만 주의하시면 됩니다. 중첩된 리스트의 경우는 * 기호를 두 개 써주시면 XHTML 문법에 맞는 html 코드를 만들어 준답니다.

순서가 있는 리스트(Ordered List)도 같은 방법으로 만들 수 있습니다. * 기호 대신 # 기호를 써줘야 한다는 것 빼고요.

그럼 이번에는 순서 있는 리스트에 class, id 속성을 지정해 볼까요? CSS로 리스트의 모양을 조절할 수 있도록 말입니다.

#(someclass#someid) 리스트 항목 1
# 리스트 항목 2
## 리스트 항목 2-1
## 리스트 항목 2-2
# 리스트 항목 3

<ol class="someclass" id="someid">
  <li>리스트 항목 1</li>
  <li>리스트 항목 2
    <ol>
      <li>리스트 항목 2-1</li>
      <li>리스트 항목 2-2</li>
    </ol>
  </li>
  <li>리스트 항목 3</li>
</ol>

리스트를 시작하는 #, * 기호에 class나 id를 괄호 안에 넣어서 붙여주면 된답니다. 중첩된 리스트(리스트 항목 2-1)에는 ##(someclass) 처럼 class나 id를 적용할 수 없지만 아무 문제 없이 CSS를 적용할 수 있습니다. 예를 들어 다음과 같이 CSS를 작성하면 상위 리스트와 중첩된 리스트에 서로 다른 스타일의 항목 번호를 표시할 수 있습니다.

ol.someclass { list-style-type: upper-roman; }
ol.someclass li ol { list-style-type: lower-roman; }

그럼 리스트가 아래와 같이 화면에 표시됩니다.

리스트에 관해서는 더 설명드릴 내용이 없네요. 너무 간단하지요?

그러면 표 작성으로 넘어가볼까요? 일단 간단한 예로 시작하겠습니다.

|1행 1열|1행 2열|1행 3열|
|2행 1열|2행 2열|2행 3열|

<table>
  <tr><td>1행 1열</td><td>1행 2열</td><td>1행 3열</td></tr>
  <tr><td>2행 1열</td><td>2행 2열</td><td>2행 3열</td></tr>
</table>

리스트와 마찬가지로 너무 쉽습니다. | 기호로 각 항목을 묶어주면 표가 만들어지지요. 그런데 첫 번째 행은 나머지 행에 어떤 자료들이 들어가는지 알려주는 역할을 하는 경우가 많습니다. 그래서 그 행을 헤더로 만들어주면 CSS를 이용해서 표를 훨씬 보기 좋게 꾸밀 수 있지요.

|_. 1행 1열|_. 1행 2열|_. 1행 3열|
|2행 1열|2행 2열|2행 3열|

<table>
  <tr><th>1행 1열</th><th>1행 2열</th><th>1행 3열</th></tr>
  <tr><td>2행 1열</td><td>2행 2열</td><td>2행 3열</td></tr>
</table>

| 기호 다음에 _ 기호와 마침표를 이어서 쓰면 표의 헤더로 인식해서 자동으로 <td> 태그 대신 <th> 태그를 붙여줍니다.

이제 조금 복잡한 테이블을 만들어 보겠습니다. 두 개 이상의 셀을 가로나 세로 방향으로 병합한 테이블이지요.

|1행 1열|1행 2열|1행 3열|
|\2. 2행 1,2열|2행 3열|

<table>
  <tr><td>1행 1열</td><td>1행 2열</td><td>1행 3열</td></tr>
  <tr><td colspan="2">2행 1,2열</td><td>2행 3열</td></tr>
</table>

|1행 1열|/2. 1,2행 2열|1행 3열|
|2행 1열|2행 3열|

<table>
  <tr><td>1행 1열</td><td rowspan="2">1,2행 2열</td><td>1행 3열</td></tr>
  <tr><td>2행 1열</td><td>2행 3열</td></tr>
</table>

셀을 가로 방향(colspan 태그)으로 병합할 때에는 | 기호 다음에 백슬래시(\)와 병합할 셀의 개수를 이어서 써주면 됩니다. 세로 방향(rowspan)이라면 백슬래시를 그냥 슬래시(/) 기호로 바꿔주시기만 하면 됩니다. 마침표와 띄어쓰기 한 칸을 잊지마세요. 그래야 Textile이 그 셀을 특별한 처리가 필요한 셀이라고 인식한답니다.

표에 자료를 입력했으니 스타일을 입힐 수 있도록 class와 id를 지정해 봐야겠지요? 이렇게 하시면 됩니다.

table(someclass#someid).
|1행 1열|1행 2열|1행 3열|
|2행 1열|2행 2열|2행 3열|

<table class="someclass" id="someid">
  <tr><td>1행 1열</td><td>1행 2열</td><td>1행 3열</td></tr>
  <tr><td>2행 1열</td><td>2행 2열</td><td>2행 3열</td></tr>
</table>

table 태그에 class와 id를 지정했습니다. 이 table 태그는 p 태그처럼 꼭 필요한 경우가 아니면 생략할 수 있기 때문에 앞선 예에서는 볼 수 없었답니다. 그럼 table 태그는 class, id 지정 말고 또 어떤 경우에 사용할까요?

table{border:1px solid black}.

<table style="border:1px solid black;">

지난 글에서 다루었던 ‘인라인 스타일’을 적용시킬 때에도 사용할 수 있습니다. 물론 ‘의미있는 마크업’을 위해서는 class와 id를 사용하는 것이 좋겠지요. class와 id는 테이블 전체 뿐 아니라 특정한 행이나 셀에도 부여할 수 있습니다.

table(tableclass).
(rowclass). |1행 1열|1행 2열|1행 3열|
|(cellclass). 2행 1열|2행 2열|2행 3열|

<table class="tableclass">
  <tr class="rowclass"><td>1행 1열</td><td>1행 2열</td><td>1행 3열</td></tr>
  <tr><td class="cellclass">2행 1열</td><td>2행 2열</td><td>2행 3열</td></tr>
</table>

그럼 CSS를 이용해서 표를 자유롭게 꾸밀 수 있습니다. 예를 들어서 첫 번째 행의 배경색과 2행 1열의 글자 색을 바꿔보겠습니다.

table.tableclass tr.rowclass { background-color: #aaa; }
table.tableclass tr td.cellclass { color: red; }

아래 표에서 배경색과 글자색이 바뀌는 것을 확인할 수 있습니다. 물론 이 표의 실제 CSS는 조금 더 복잡하지만 배경색과 글자색은 위 CSS 규칙과 동일합니다.

1행 1열	1행 2열	1행 3열
2행 1열	2행 2열	2행 3열

이렇게 해서 Textile로 리스트와 표를 작성하는 법을 알아봤습니다. 개인적으로는 이 부분이 Textile의 편리함을 가장 잘 보여준다고 생각한답니다. 복잡한 표를 제외하고는 그냥 눈에 보이는대로 작성하면 되니까요.

이제 Textile에 관해서 대부분 설명했네요. 다음 글에서 html 코드를 그대로 출력하는 방법과 인용문을 표시하는 방법을 알아보고 몇 가지 기타 태그 사용법을 정리하는 것으로 Textile 사용법에 관한 글을 끝맺을까 합니다.

Textile 관련 글 안내

1. 시작하기
2. 링크와 한글 입력
3. 이미지 태그
4. 리스트와 표
5. 코드 출력과 인용문
6. 각주와 약어