Emmet

Emmet(구 Zen coding)은 CSS 규칙을 기반으로 하여 HTML 작성을 좀 더 직관적이고 손쉽게 할 수 있게 해주는 플러그인이다.
다양한 에디터를 지원하고 있어서, 주요 에디터에서는 거의 사용이 가능하다.

<ul><li></li>…를 모두 작성하지 않고 ul>li*5이런 식으로 작성한 후 단축키를 누르면 HTML을 자동으로 생성해준다.

단축키 (mac)

  • Dreamweaver : Cmd+Etab
  • Sublime text2 : tab

현재 (2016.09) 드림위버 CC에 emmet 익스텐션이 설치되지 않는 문제가 있음.
익스텐션을 설치하지 않아도 Dreamweaver 자체에서 이제 emmet 을 지원하는 것 같다…!


예시1

input

img[src=imgs/sub/prod_$$@9.png alt=""]*5

output

<img src="img/sub/prod_09.png" alt="">
<img src="img/sub/prod_10.png" alt="">
<img src="img/sub/prod_11.png" alt="">
<img src="img/sub/prod_12.png" alt="">
<img src="img/sub/prod_13.png" alt="">

예시2

input

ul#nav>li.item$*4>a{Item$}

output

<ul id="nav">
 <li class="item1"><a href="">Item1</a></li>
 <li class="item2"><a href="">Item2</a></li>
 <li class="item3"><a href="">Item3</a></li>
 <li class="item4"><a href="">Item4</a></li>
</ul>