개요
HTML 코딩을 빠르게 하기 위한 도구 중 하나. Sublime Text나 Eclipse 등 다양한 코딩 툴에서 사용할 수 있다.
공식 홈페이지에서 지원영역을 확인할 수 있으며, 관련 플러그인을 다운로드할 수 있다.
사용법
Emmet을 설치한 뒤, 문법에 맞춰 텍스트를 입력한 뒤 주어진 단축키를 누르면 간단히 복잡한 구성의 html코드를 자동완성할 수 있게 된다.
이를테면, 이클립스에서 다음과 같은 문장을 입력한 뒤 ctrl+E (기본단축키) 를 입력하면,
div#exid>ul>li*3
아래와 같은 코드가 만들어진다.
<div id="exid">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>자주 사용하는 문장부호 정리
>
계층 구분. div>div로 입력할 경우 <div> <div></div> </div> 형식으로 하위 영역이 만들어진다.
*
다중 태그. li*3 을 입력할 경우 <li></li> <li></li> <li></li> 와 같이 여러 개의 태그가 만들어진다.
+
나열하기. div+p+li 와 같이 입력할 경우 <div></div><p></p><li></li> 처럼 같은 층위에 나열된다.
^
한 층위 위로 올라가서 나열하기. 여러 개 사용하면 여러 층위 위로 올라가서 만들어진다.
( )
그룹으로 묶기. 괄호 안의 태그들끼리 영향을 받는다.
#
태그 옆에 div#ex와 같이 사용할 경우, <div id="ex"></div>와 같이 id값이 지정된다.
.
태그 옆에 div.ex와 같이 사용할 경우, <div class="ex"></div>와 같이 class값이 지정된다.
$
넘버링. class나 id 옆에 다중 사용시 1번부터 순서대로 번호가 붙는다. item$ * 2 = <item1></item1> <item2></item> ..
$$, $@-
여러 개 쓰면 넘버링 자릿수가 늘어난다. $$=01, 02, ...
뒤에 @- 를 붙일 경우 숫자가 역순으로 붙는다.
{ }
태그 안에 텍스트를 입력해 준다. div{text} = <div>text</div>
더 자세한 문법 안내는 아래 페이지를 참고하자.
