Textile 시작하기

Textile은 ‘가벼운 마크업 언어’입니다. 여기서의 ‘가볍다’는 표현은 ‘간단한 문법’, ‘쉬운 태그 입력’, ‘사용자 친화적인 코드’ 등의 의미를 내포합니다. 즉 간단하고 쓰기 쉬운 마크업 언어라는 것이죠.

Textile은 Dean Allen에 의해 PHP로 개발되었으며, 펄, 파이썬, 루비, 자바 등으로 다양하게 컨버전되었습니다. Textile이 Textpattern에 포함된 것은 어찌보면 당연한 일입니다. 왜냐하면 Textpattern의 개발자가 앞서 말한 Dean Allen이기 때문이지요. 또한 워드프레스 사용자들도 Textile Wrapper 플러그인을 설치하면 Textile로 글을 쓸 수 있습니다.

Textile의 문법이 html보다 쉬운건 사실이지만 html 태그에 익숙한 분들이라도 어느 정도 연습을 해야만 쓸 수 있습니다. 새로운 문법을 배우는 것이니까요. 하지만 이지윅이 아닌 텍스트 입력 방식을 선호하는 분들께는 충분히 배울 만한 가치가 있답니다.

문법을 연습할 가장 좋은 장소는 Threshold State의 Textile 페이지입니다. 페이지 왼쪽의 도움말을 참고해서 글을 입력하면 변환된 html 코드와 그 출력 결과를 볼 수 있습니다.

문법에 관한 보다 자세한 설명은 Textile Reference 페이지를 참고하시면 됩니다.

그럼 Textile Reference의 글을 참고해서 몇 가지 실용적인 예를 들어보겠습니다. 각 예에서 위 박스는 입력한 텍스트를, 아래 박스는 변환된 html 코드를 나타냅니다.

가장 먼저 이해해야 할 것은 문단 태그인 p 태그입니다. Textile에서는 기본적으로 모든 입력이 p 태그 안에서 이루어집니다. 즉 태그 없이 입력한 텍스트에도 자동으로 p 태그가 붙게 되죠.

간단한 텍스트
<p>간단한 텍스트</p>

p 태그는 div, bq, ul, ol, h1, h2 등의 태그처럼 블록을 설정해서 그 안에 내용물을 표시해줍니다. 그럼 이 블록의 끝을 표시하려면 어떻게 해야할까요? Enter 키로 줄을 바꿔도 블록은 유지됩니다. 바뀐 줄 앞에 <br /> 태그가 삽입될 뿐이죠.

줄바꿈
테스트
<p>줄바꿈<br />
테스트</p>

하지만 Enter 키를 한 번 더 눌러서 중간에 빈 줄을 넣어주면 블록 태그가 닫히고 새 블록이 시작됩니다.

줄바꿈
테스트
<p>줄바꿈</p>
<p>테스트</p>

이렇게 자동으로 붙는 p 태그지만 때로는 직접 지정해줄 필요가 있습니다. 바로 CSS 스타일을 적용하기 위해서죠. Textile에서 태그에 id와 class를 지정하려면 괄호 안에 넣어주면 됩니다. 이제 p, h1, blockquote 태그에 id와 class를 지정해 볼까요?

p(#someid). id 지정

h1(someclass). class 지정

bq(someclass#someid). id, class 지정
<p id="someid">id 지정</p>
<h1 class="someclass">class 지정</h1>
<blockquote class="someclass" id="someid">
  <p class="someclass">id, class 지정</p>
</blockquote>

† blockquote 태그에 class를 지정할 경우 blockquote 태그 안의 p 태그에도 동일한 class가 적용됩니다. 오류 알려주신 연가시 님께 감사드립니다.

blockquote 태그 안의 텍스트에도 자동으로 p 태그가 붙는다는 것에 유의하세요. Textile의 블록 설정 태그에는 이외에도 h2. ~ h6. , pre. , bc. , bq.. , fnn. 등이 있는데 이 태그들에 대해서는 나중에 따로 알아보겠습니다. 다만 이 태그들이 식별자(p, h1, bq)와 마침표, 공백 하나로 시작된다는 것은 기억해두시길 바랍니다.

때로는 여러 블록을 div 태그로 감싸서 스타일을 적용해야 할 경우도 있습니다. Textile에서는 자체적으로 div 태그를 지원하지 않지만 모든 html 태그를 그대로 사용할 수 있으므로 아무 문제가 없습니다. 예를 보실까요?

<div class="someclass">
간단한 텍스트
</div>
<div class="someclass">
간단한 텍스트
</div>

하지만 div 태그 안에 빈 줄이 들어가게 되면 문제가 생깁니다. 빈 줄을 넣지 않으면 블록을 닫을 수 없기 때문에 div 태그 안에서는 Textile을 전혀 쓸 수 없게 됩니다.

<div class="someclass">
간단한 텍스트 </div>
<p><div class="someclass"></p>
<p>간단한 텍스트<br />
</div></p>

이런 문제를 해결하기 위해서는 특정한 행이나 블록에 Textile이 적용되지 않도록 해야하는데 두 가지 방법이 있습니다. 먼저 notextile. 태그를 사용해서 명시적으로 지정하는 방법입니다.

notextile. <div class="someclass">
notextile. 간단한 텍스트 </div>
<div class="someclass">
간단한 텍스트
</div>

위 예처럼 notextile. 로 시작되는 블록은 Textile이 적용되지 않습니다. 또 다른 방법은 무척 간단합니다. 태그 앞에 공백 하나를 넣는 것이지요. Textile은 항상 행의 첫 번째 문자부터 블록 레벨의 태그를 인식합니다. 즉, 행 중간에 h1. 같은 태그가 있으면 태그가 아닌 일반 택스트로 판단한다는 얘기지요. 예를 보시죠.

  <div class="someclass">
간단한 텍스트 </div>
  <div class="someclass">
   간단한 텍스트
  </div>

이런 방식으로 Textile 태그와 html 태그를 자유롭게 섞어서 사용하실 수 있습니다.

† Textile 사용법을 간단하게 정리하려고 글을 시작했는데 간단하게 정리가 안되네요^^; 그래서 부분적으로 나누어 쓰기로 했습니다. 다음 글에서는 자주 사용되는 링크와 강조 태그에 대해 알아보고 Textile로 한글을 입력할 경우 발생하는 문제와 해결책을 다루겠습니다.

Textile 관련 글 안내

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

댓글 4개가 달렸습니다. 태그: , , ,

  1. 연가시 | 2007-04-09 16:50

    한조님의 markdown 글에서 링크를 보고 넘어와 좋은 공부하고 있습니다
    먼저 감사의 말을 드리고 싶네요

    예제를 보며 Threshold State의 Textile 페이지에서 테스트해보고 있는데

    bq(someclass#someid). id, class 지정

    이렇게 blockquote에 class와 id를 주니

    <blockquote class="someclass" id="someid">
    <p class="someclass">id, class 지정</p>
    </blockquote>

    이렇게 안의 p 태그에 id는 빠지고 class는 상속(?)이 되어버리네요

    혹시나 싶어 워드프레스에 textile wrapper 플러그인을 설치하고 같은 코드를 넣어봤는데 이번에는

    <blockquote>
    <p class="someclass" id="someid">id, class 지정</p>
    </blockquote>

    이런 결과가 나왔습니다
    플러그인과 textile 페이지의 버그일까요?

  2. wystan | 2007-04-09 19:40

    제가 정확하게 확인하지 않고 글을 썼네요^^;

    p 태그에도 동일한 class가 적용되는게 맞습니다. Textpattern 4.0.4에 포함된 구 버전 Textile에서는 class와 id 모두를 상속받았는데 그러면 한 문서에 동일한 id 값이 들어가는 문제가 생겨서 class만 상속받도록 고쳤다고 하네요(Rev.2180).

    그리고 워드프레스 플러그인에서 다른 결과가 나오는 것은 Textile 버전 차이 때문입니다. 버전 정보를 보면 알 수 있듯이 자주 업데이트 되거든요. Wrapper 플러그인에 포함된 classTextile.php 파일을 최신 버전으로 바꿔주면 동일한 결과가 나올겁니다.

    잘못된 점 알려주셔서 감사드리고, 언제든 이상한 점 있으면 알려주세요~

  3. 연가시 | 2007-04-10 02:04

    그랬었군요
    많이 배우고 갑니다
    앞으로도 좋은 글 부탁드려요 :)

  4. wystan | 2007-04-10 11:57

    칭찬해주셔서 고맙습니다 ^^

댓글이 닫혔습니다.