과거 Yahoo!의 User Interface Engineer이기도 했던 Dustin Diaz씨가 얼마 전 공개한 네 번째 스크린캐스트(screencast)를 보면 TextMate가 웹 개발에 사용되는 한 단면을 엿볼 수가 있다.

그런데, 여기서 눈에 띄는 것 중에 하나는 TextMate가 기본적으로 제공하는 snippts 중에는 없는 것으로 기본 밑바탕의 HTML 문서를 만들 때 그가 사용했던 page로 지정된 tab trigger snippet. TextMate에서 사용되는 snippet이란 일정 길이의 글 단락을 문서에 삽입할 수 있는 기능을 제공하고 있는데, 이놈이 아주 유용한 이유는 삽입된 글 단락 안에서 tab 키를 이용해서 순차적으로 특정 위치로 이동할 수 있도록 지정해 줄 수도 있고, 삽입될 단락 중에 특정 부분을 변수로 지정해 놓고서 삽입된 후에 tab 키로 이동해서 상황에 맞게 수정해 줄 수도 있다.

쓸모가 많을 것 같아서 하나 만들어 볼까 하는 중에, 반갑게도 바로 그가 사용했던 Textmate의 “page” snippet을 공개해 주었다.

당장 그대로 추가하고 보니, 몇 가지 XHTML 1.0 Strict Doctype에 안어울리는 것이 있어서 입맛대로 약간 수정해 보았다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ${1:${2:xml:lang="ko"}${3: lang="ko"}} dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="${4:application/xhtml+xml}; charset=utf-8" />
    <title>${5:Title}</title>
    ${6:<link rel="stylesheet" href="${7:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="$7print.css" type="text/css" media="print" />
    <!--[if IE]><link rel="stylesheet" href="$7ie.css" type="text/css" media="screen, projection"><![endif]-->
    }<style type="text/css" media="screen">
    /* <![CDATA[ */
      
    /* ]]> */
    </style> 
    ${8:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    }<script type="text/javascript">
    // <![CDATA[ 
      $0
    // ]]> 
    </script> 
  </head>
  <body id="${9:page}">
    <div class="container">
      ${10:<div class="span-${11:24}">
        <h1>${12:Header}</h1>
      </div>
      <div class="span-${13:20}">
        ${14:Main content}
      </div>
      <div class="span-${15:4} last">
        ${16:Right sidebar}
      </div>
      ${17:<div class="span-24">
        ${18:Footer}
      </div>}}
    </div>
  </body>
</html>

XHTML 문서에 포함된 inline style sheet가 적용되려면, link tag으로 삽입된 style sheet 뒤에 위치해야 해서 자리를 옮겼고, script tag에 빠져있는 type 요소도 추가해 주었다. 물론, XHTML 문서에 맞는 MIME type도 기본적으로 application/xhtml+xml로 지정되도록 바꾸었으며, CSS와 JavaScript를 감싸주는 HTML 주석(comments) 기호도 XHTML 문서에서 올바로 인식되도록 고쳐주었다.
마지막으로, 애용하는 JavaScript Library들 중의 하나인 jQuery를 불러오는 단락도 추가함.

관련된 주제의 글

댓글을 남겨 주세요