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

, , , 댓글 달기

웹 개발 과정에 있어서 웹 페이지 속 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>

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

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: