Emmet(구 Zen coding)은 CSS 규칙을 기반으로 하여 HTML 작성을 좀 더 직관적이고 손쉽게 할 수 있게 해주는 플러그인이다.
다양한 에디터를 지원하고 있어서, 주요 에디터에서는 거의 사용이 가능하다.
<ul><li></li>
…를 모두 작성하지 않고 ul>li*5
이런 식으로 작성한 후 단축키를 누르면 HTML을 자동으로 생성해준다.
- 공식 문법 : http://docs.emmet.io/abbreviations/syntax/
- Cheat sheet : http://docs.emmet.io/cheat-sheet/
단축키 (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>
최신 댓글