Emmet 문법

참조 : 생활코딩 > Emmet (Zen Coding)

html 코딩의 생산성을 극대화시키는 Sublime Text 패키지 : Emmet

그 사용법을 알기쉽게 설명하는 동영상.

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

// a[title="hello world"]
<a href="naver.com" title="hello world"></a>

// li*3
<li></li>
<li></li>
<li></li>

// 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>

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

// p>{클릭하삼}
<p>클릭하삼</p>

// 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>