Emmet Zen Coding

태그 생성을 쉽게 하는 방법임.

자세한 내용은 여기 참조

https://sublime.wbond.net/packages/Emmet

+ 설치방법

서브라임텍스트의 메뉴 Prefrerences의 Packager Controls를 선택 후

Install Package를 타이핑후 엔터

Emmet을 쳐보면 검색 됨

+ 사용방법 예 (단축키는 Ctrl + E)

div#page.section.main

<div id="page" class="section main"></div>

a[title="hello world"]

<a href="" title="hello world"></a>

li.item$*3

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

li.item$$$*2

<li class="item001"></li>
<li class="item002"></li>

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

<div id="page">
    <div id="header">
        <ul id="nav">
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
    <div id="page">
        <h1><span></span></h1>
        <p></p>
        <p></p>
    </div>
    <div id="footer"></div>
</div>

#content>.section

<div id="content">
    <div class="section"></div>
</div>

p>{click}

<p>click</p>

.row>(.span4{test}+.span8{temp})

<div class="row">
    <div class="span4">test</div>
    <div class="span8">temp</div>
</div>

.row>(.span4+.span3.offset2)

<div class="row">
    <div class="span4"></div>
    <div class="span3 offset2"></div>
</div>