Textile 이미지 태그

Textpattern은 업로드된 이미지를 쉽게 불러올 수 있도록 해주는 자체적인 태그를 갖고 있습니다.

바로 <txp:article_image /><txp:image /> 태그지요. 하지만 외부 이미지를 불러올 때처럼 직접 img 태그를 써야 할 경우도 있는데 Textile을 사용하면 쉽고 편하게 태그를 입력할 수 있습니다.

계정 루트 디렉토리에 carver.gif 이미지가 있다고 가정하고 불러와 볼까요? 간단하게 불러올 파일의 절대경로를 느낌표로 묶어주면 됩니다.

!http://blog.wystan.net/carver.gif!
!/carver.gif!
<p><img src="http://blog.wystan.net/carver.gif" alt="" /><br />
<img src="/carver.gif" alt="" /></p

그럼 이번에는 img 태그의 title, alt 속성을 함께 넣어보겠습니다.

!/carver.gif(sometext)!
<p><img src="/carver.gif" title="sometext" alt="sometext" /></p>

위 예처럼 파일명 뒤에 텍스트를 괄호로 감싸서 넣어주면 두 가지 속성에 적용됩니다. 그러면 이 이미지에 링크를 넣어볼까요? 앞서 다루었던 Textile 링크 태그와 거의 같습니다. 따옴표가 느낌표로 바뀐 것 빼고는요.

!/carver.gif(sometext)!:http://.../
<p><a href="http://.../">
<img src="/carver.gif" title="sometext" alt="sometext" /></a></p>

이미지의 align 속성을 이용해서 왼쪽이나 오른쪽, 중앙 정렬을 시킬 수 있는데 각각 !< , !> , != 태그를 사용하면 됩니다.

!>/carver.gif!:http://.../
<p><a href="http://.../">
<img src="/carver.gif" align="right" /></a></p>

앞에서 소개하지 않았지만 Textile을 이용해서 태그에 직접 스타일을 지정할 수 있습니다. ‘인라인 스타일’이라고 하는데 간단한 예를 들어보지요.

!{border: 1px solid black;}/carver.gif!:http://.../
<p><a href="http://.../">
<img src="/carver.gif" style="border: 1px solid black;" /></a></p>

Textile의 인라인 스타일은 p, h1, table 등의 여러 태그에 적용됩니다. 하지만 지금껏 소개하지 않은 이유는 스타일을 적용시키는 더 좋은 방법이 있기 때문이랍니다. 바로 class와 id를 이용하는 것이지요. 이런 방법을 이용하면 보다 ‘의미있는(Semantic)’ html 문서를 만들 수 있습니다. 여기서 말하는 ‘의미있다’는 표현을 명확하게 정의하기는 어렵지만 제 생각은 이렇습니다.

“html 태그는 문서의 내용을 체계적으로 담는데 사용하고, 문서를 꾸미고 디자인하기 위해서는 CSS를 사용한다.”

간단히 요약하면 디자인을 위한 html 태그 사용을 최대한 줄이자는 것입니다. 위의 예를 다시 생각해볼까요? 이번에는 p 태그를 빼서 코드를 간단히 써보겠습니다.

!{border: 1px solid black;}/carver.gif!
!(someclass)/carver.gif!
<img src="/carver.gif" style="border: 1px solid black;" alt="" />
<img src="/carver.gif" class="someclass" alt="" />

인라인 스타일을 사용한 예는 이미지가 들어간다는 문서의 내용과 함께 그 이미지가 어떤 테두리를 가져야 하는지를 함께 알려주고 있습니다. 하지만 두 번째 예는 문서에 이미지가 들어가고, 그 이미지가 어떤 부류에 속하는가에 대한 정보만을 담고 있지요.

이미지가 어떤 특정한 ‘부류’에 속하기 때문에 CSS를 사용해서 이 부류에 적용될 스타일을 지정할 수 있습니다. 그러면 두 이미지가 브라우저에서 똑같이 보이게 됩니다.

img.someclass { border: 1px solid black; }

위에서 이미지를 정렬하기 위해서 align 속성을 이용했는데 이 속성도 문서의 내용과는 관련이 없고 다만 어떻게 보여지는가를 지정할 뿐입니다. 그래서 의미를 강조하는 엄격한 html 표준(XHTML 1.0 Strict)에서는 이 속성의 사용을 금지하고 있습니다. 이 속성 대신에 CSS를 사용하면 보다 의미있는 html 문서를 작성할 수 있는데 동일한 결과를 얻기 위해서는 다음과 같이 태그를 작성하면 됩니다.

p(pclass). !(imageclass)/carver.gif!
<p class="pclass"><img src="/carver.gif" class="imageclass" alt="" /></p>

CSS에서는 이미지에 직접 align 속성을 지정할 수 없지만 대신 이미지를 감싸는 p 태그에 오른쪽 정렬을 주거나 이미지 자체를 오른쪽으로 띄울 수 있습니다.

p.someclass { text-align: right; } or img.imageclass { float: right; }

이미지 태그에서 시작했는데 어느덧 주제에서 벗어난 글이 되었네요^^; ‘의미있는 마크업’의 장점에 대해서는 나중에 다시 다뤄볼 생각입니다. 원래 Textile을 이용한 리스트와 표 작성까지 정리하려고 했는데 다음 글로 미뤄야겠네요.

Textile 관련 글 안내

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

태그: , , ,

댓글이 닫혔습니다.