Textile 코드 출력과 인용문

Textile 사용법에 관한 첫 글에서 여러 가지 블록 설정 태그를 소개했던 적이 있습니다. 바로 아래 문장이지요.

Textile의 블록 설정 태그에는 이외에도 h2. ~ h6. , pre. , bc. , bq.. , fnn. 등이 있는데 이 태그들에 대해서는 나중에 따로 알아보겠습니다.

그래서 이 태그들을 하나씩 설명해볼까 합니다. 헤드라인을 설정할 때 사용하는 h1. ~ h6. 태그는 특별히 설명할 만한 내용이 없으니 그냥 넘어가고^^; 일반적인 텍스트가 아닌 html 코드를 직접 화면에 표시하는데 사용되는 태그들부터 알아보겠습니다.

당연한 얘기지만 html 문서는 html 태그로 이루어져 있습니다. 우리가 브라우저를 통해 보는 화면은 브라우저가 이 html 태그들을 해석한 결과물이지요. 그런데 이 html 태그를 브라우저가 해석하지 않고 보통의 텍스트처럼 화면에 보여줘야 할 경우도 있습니다. 예들 들어서 이런 경우지요.

<br> 태그와 <br /> 태그 중에서 어느 것이 맞나요?

간단하게 보이지만 사실 이 문장을 표시하려면 html 문서에 아래와 같이 입력해야 한답니다.

&#60;br&#62; 태그와 &#60;br /&#62; 태그 중에서 어느 것이 맞나요?

즉, html 태그를 나타내기 위해 사용하는 왼쪽(<)과 오른쪽 꺽쇠 기호(>)를 각각 &#60; , &#62;로 바꿔줘야 브라우저가 태그로 인식하지 않는다는 얘기지요. 어렵지는 않지만 이렇게 일일이 바꿔주려면 상당히 귀찮습니다.

&#60; , &#62; 대신 &lt; , &gt; 사용도 가능합니다. 각각 ‘less than’, ‘greater than’을 의미하지요.

그래서 Textile에서는 이런 변환을 쉽게 해주는 세 개의 태그를 고안했는데 각각 @ 태그, pre. , bc. 입니다. 하나씩 설명을 해보지요.

먼저 @ 기호로 어떤 텍스트를 감싸면 그 안에 있는 모든 꺽쇠 문자가 자동으로 변환되고, 텍스트에는 html의 <code> 태그가 적용됩니다. 예를 들어보지요.

@<br>@ 태그와 @<br />@ 태그 중에서 어느 것이 맞나요?
<code>&#60;br&#62;</code> 태그와 <code>&#60;br /&#62;</code> 태그 중에서 어느 것이 맞나요?

html의 <code> 태그는 컴퓨터와 관련된 모든 코드를 표시하기 위해 사용되는데 대부분의 브라우저는 이 태그 안의 문자와 기호를 고정폭 폰트로 출력해 줍니다. 물론 CSS를 이용하면 얼마든지 다른 스타일을 적용시킬 수 있지요.

그런데 <code> 태그 만으로는 여러 줄의 컴퓨터 코드(이하 소스 코드)를 보기 좋게 표현하는데 한계가 있습니다. 브라우저가 소스 코드의 줄바꿈과 띄어쓰기를 무시하기 때문이지요. 그래서 만들어진 html 태그가 <pre> 태그랍니다. 이 태그는 블록을 설정해서 그 안의 모든 내용을 사용자가 입력한 그대로 출력해줍니다. 그러면 <code> 태그와 <pre> 태그를 비교해 볼까요? 위 박스는 html 코드를, 아래 박스는 브라우저 출력을 나타냅니다.

<code>가나다
라마바    사아</code>
<pre>가나다
라마바    사아</pre>
가나다 라마바 사아
가나다
라마바    사아

차이를 아시겠지요? html의 <pre> 태그에 대응되는 Textile 태그가 pre. 태그입니다. pre. 태그는 html의 <pre> 태그처럼 소스 코드의 줄바꿈과 띄어쓰기를 그대로 표현해 주면서 앞서 설명한 @ 태그가 했던 꺽쇠 기호 변환까지 함께 해주므로 무척 편리하답니다. Textile로 입력한 텍스트가 어떻게 html 코드로 변환되는지 예를 들어보겠습니다.

pre. 
<div>
    <p>단락 1</p>
    <p>단락 2</p>
</div>
<pre>
&#60;div&#62;
    &#60;p&#62;단락 1&#60;/p&#62;
    &#60;p&#62;단락 2&#60;/p&#62;
&#60;/div&#62;
</pre>

html 문서에서 소스 코드를 표현할 때에는 보통 <code> 태그와 <pre> 태그를 함께 사용합니다. <pre> 태그가 안의 내용물을 입력한 그대로 출력해 주고, <code> 태그가 그 내용물이 소스 코드라는 것을 알려주는 식이지요. 그래서 이 둘을 결합한 Textile의 bc. 태그가 생겨났습니다. ‘Block Code’라는 말 그대로 소스 코드 블록을 설정하는 태그랍니다. 예를 들어보지요.

bc. <br> 태그와 <br /> 태그 중에서 어느 것이 맞나요?
<pre><code>&#60;br&#62; 태그와 &#60;br /&#62; 태그 중에서 어느 것이 맞나요?
</code></pre>

지금 보시는 이 박스 안의 결과들도 모두 bc. 태그로 작성한 것이랍니다. 그러면 이 태그에도 class와 id를 지정해 볼까요?

bc(someclass#someid). 소스 코드
<pre class="someclass" id="someid"><code class="someclass">소스 코드
</code></pre>

소스 코드를 감싸는 <pre> 태그에는 class와 id가 지정되고 <pre> 태그 안의 <code> 태그에는 class만 지정되는 것을 볼 수 있습니다. 내부의 <code> 태그에 따로 class를 지정할 수 없으므로 그냥 <pre> 태그의 class를 물려받는 방식입니다. id까지 물려받으면 한 문서에 동일한 id 값이 두 개 이상이어서 html 기본 문법에 어긋나니 당연히 안되겠지요.

이제 다른 태그로 넘어가볼까요? bq. 태그와 비슷한 bq.. 태그입니다. 이 태그는 앞서 간단히 소개했던 bq. 태그의 확장판이라고 생각하시면 됩니다. html의 <blockquote> 태그는 인용문을 표현하는데 사용되는데 이 인용문이 하나의 단락(paragraph)일 경우도 있지만 여러 단락으로 이루어진 경우도 많습니다. 그런데 bq. 태그를 사용하면 하나의 단락만 처리할 수 있지요. 예를 들어볼까요?

bq. 첫 번째 인용
두 번째 인용
세 번째 인용
<blockquote>
  <p>첫 번째 인용<br />
  두 번째 인용</p>
</blockquote>
<p>세 번째 인용</p>

물론 <br /> 태그를 사용해서 한 단락으로 처리할 수도 있겠지요. 하지만 ‘의미 있는’ 방법은 아닙니다. 이런 경우에 bq.. 태그가 필요하지요. 이 태그는 이후의 모든 단락을 <blackquote> 태그로 묶어준답니다. 그러면 어떻게 인용문의 끝을 알 수 있을까요? 이 예를 보면 아실겁니다. 아울러 class와 id도 함께 지정해보도록 하지요.

bq(someclass#someid).. 첫 번째 인용
두 번째 인용
세 번째 인용
p. 단락 시작
<blockquote class="someclass" id="someid">
  <p class="someclass">첫 번째 인용<br />
  두 번째 인용</p>
  <p class="someclass">세 번째 인용</p>
</blockquote>
<p>단락 시작</p>

즉, 새 단락이 시작된다는 것을 명시적으로 표현해주면 인용문을 끝내고 새 단락으로 인식하게 됩니다. 또한 bc. 태그와 마찬가지로 <p> 태그가 <blockquote> 태그의 class 지정을 물려받는 것도 확인할 수 있습니다.

간단한 내용을 너무 복잡하게 설명했네요. 이번 글로 Textile 사용법을 마치려고 했는데 다음으로 미뤄야겠습니다. 다음 글에서 각주(foot note) 사용법과 머리 글자를 이용하는 약어 표기법(acronym)을 알아보고 정말 마칠겁니다^^;

Textile 관련 글 안내

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

태그: , , ,

댓글이 닫혔습니다.