blueprintcss와 jQuery 사용자를 위한 TextMate의 HTML snippet

Apple, Mac & iOS, CSS, HTML, JavaScript 댓글 달기

웹 개발 과정에 있어서 웹 페이지 속 UI 동작을 구현하는데 필요한 기본적인 기능들을 모아놓은 JavaScript Library들이 제공되면서 개발자들의 손을 한 시름 덜어주게 되었고, 결국 남은 여력을 프로젝트에 더 집중하게 되면서 작업의 효율성을 증가시켜 주었듯이, 마찬가지로 웹 페이지의 기본 layout을 잡을 때 반복적으로 수행되던 CSS 작업에서도 빠른 작업 수행 속도를 붙여줄 수 있는 framework 형태의 여러 조력자들이 등장하고 있다.

개인적으로 JavaScript Library로는 jQuery를 그리고 CSS framework로는 blueprintcss를 주로 사용하게 되면서, 예전에 공개했던 HTML 문서 생성을 위한 TextMate용 snippet에도 작은 변화가 있었다.
여기에 그 바뀐 내용을 공개하면, 우선 아래는 HTML 4.01 Strict DocType을 위해 “page4” tab trigger로 지정된 HTML snippet이다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ko" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>${1:Title}</title>
    ${2:<link rel="stylesheet" href="${3:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="$3print.css" type="text/css" media="print" />
    <!--[lt IE 7]><link rel="stylesheet" href="$3lib/ie.css" type="text/css" media="screen, projection"><![endif]-->
    }<style type="text/css" media="screen">
    /* <![CDATA[ */
 
    /* ]]> */
    </style> 
    ${4:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    }<script type="text/javascript">
    // <![CDATA[ 
        $0
    // ]]> 
    </script> 
  </head>
  <body id="${5:page}">
    <div class="container">
      <div class="column span-${6:24}">
        <h1>${7:Header}</h1>
      </div>
      <div class="column span-${8:20}">
        ${9:Main content}
      </div>
      <div class="column span-${10:4} last">
        ${11:Right sidebar}
      </div>
      ${12:<div class="column span-24">
        ${13:Footer}
      </div>}
    </div>
  </body>
</html>

기본적으로 지정되어 있는 HTML 문서의 구조는, 오른쪽에 작은 sidebar가 위치한 보편적인 2 column 구조로 위 아래에 Header와 Footer가 위치하고 있다.

다음은 같은 구조를 가진 XHTML 1.0 Strict DocType 문서를 위한 HTML snippet. tab trigger로 “page”가 지정되어 있다.

<!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" />
    <!--[lt IE 7]><link rel="stylesheet" href="$7lib/ie.css" type="text/css" media="screen, projection"><![endif]-->
    }<style type="text/css" media="screen">
    /* <![CDATA[ */
 
    /* ]]> */
    </style> 
    ${8:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    }<script type="text/javascript">
    // <![CDATA[ 
      $0
    // ]]> 
    </script> 
  </head>
  <body id="${9:page}">
   <div class="container">
      <div class="column span-${10:24}">
        <h1>${11:Header}</h1>
      </div>
      <div class="column span-${12:20}">
        ${13:Main content}
      </div>
      <div class="column span-${14:4} last">
        ${15:Right sidebar}
      </div>
      ${16:<div class="column span-24">
        ${17:Footer}
      </div>}
    </div>
  </body>
</html>

간단한 것이지만, 손놀림을 덜 수 있는 또 하나의 꼼수다.

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요