Emmet

Emmet(구 Zen Coding)이란?

Emmet이란 editor plugin으로서 단축키를 이용해 HTML, XML, XSL 코딩 속도를 비약적으로 향상시켜준다.

eg)

ul>li*5 →
<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

Emmet을 사용하는 이유

가령 긴 테이블을 코딩할 때,
손으로 입력하는 건 누가봐도 짱구짓이고 줄줄이 복사해 붙이는 것도 별반 나을 게 없어 보인다.
물론 테이블 만드는 툴을 쓰는 게 가장 일반적이다.
근데 언뜻 봐도 같은 태그의 반복이다. 이렇게 자동완성을 해보면 어떨까?

table>tr*5>td*5

table 태그로 열고 그 아래 tr 태그 5개 열고 그 아래 td 태그 5개 열라는 뜻이다.

Emmet은 대부분 코딩을 하는 사람이라면 다른 툴과 달리 기본은 금세 배울 수 있다.
기본적으로 Emmet의 약어는 단어의 첫 글자를 따서 사용하기 때문에 간단한 흐름만 파악해도 손쉽게 적응할 수 있다.
무엇보다 Emmet의 최대 장점은 일일이 코드를 쓰지 않아도 빠른 속도로 코딩을 할 수 있는 것이다.

Emmet 설치

Emmet은 플러그인으로 설치한다. 자신이 사용하는 에디터에 맞는 플러그인이 존재한다.
Emmet은 Sublime Text, Eclipse, Notepad++ 등의 Editor.
JSFiddle, CodePen 등의 Online services.
그리고 Visual Studio, Editor Plus 등의 develope 툴 등 많은 분야에서 사용되고 있다.
자세한 설치법은 아래 site에 가보면 지원하는 Editor 별로 설치법을 확인할 수 있다.

http://emmet.io/download/

Emmet 기본 사용법

Emmet은 기본적으로 단축키를 이용해 코드를 자동 완성해주는 툴이다.
에디터가 HTML 또는 CSS 스타일쉬트 문서로 인식하는 환경에서만 동작하는데, 코드를 자동 완성시키려면 약어를 적어 CTRL+E 같은 해당 단축키를 눌러주면 된다.

div + ctrl + e

Emmet 메타 문자

Emmet 이 사용하는 메타문자는 코딩하는 사람들에게 익숙하고 직관적이고 상식적인 것들뿐이니 어렵지 않게 이해할 수 있다.

> : 해당 태그를 열고 들여쓰기를 한다.
+ : 줄바꿈을 하고 다음 태그를 추가한다.
. : class를 지정한다.
# : id를 지정한다.
[] : 커스텀 속성을 지정한다.
^ : 한 수준 올라간다.
() : 그룹을 지정한다.
* : 곱하기로 정해진 수만큼 태그를 반복한다.

Emmet 반복 태그

간단한 수식으로 반복 태그를 지정할 수도 있다. * 로 곱하기를 하면 된다.
또한 $를 이용하면 숫자를 증가시킬 수 있다.

ul>li.item$*5

<ul>
   <li class="item1"></li>
   <li class="item2"></li>
   <li class="item3"></li>
   <li class="item4"></li>
   <li class="item5"></li>
</ul>

Emmet 콘텐츠 및 커스텀 속성 지정

태그로 둘러쌀 콘텐츠를 {} 로 감싸주면 알아서 태그 안에 들어간다.

h3{머리말 - 대한민국의 미래}+p.highlight*3+h2{우리가 해야 할 일}+p

<h3>머리말 - 대한민국의 미래</h3>
<p class="highlight"></p>
<p class="highlight"></p>
<p class="highlight"></p>
<h2>우리가 해야 할 일</h2>
<p></p>

그룹 지정

태그 쌍을 그룹으로 지정하려면 () 를 사용하거나 그룹에 포함시키지 않고 한 수준 위로 올라와야 하는 태그에 캐럿(^)을 붙여준다.

가령 다음처럼 하면 p 태그 아래 img 태그와 p 태그가 같이 안기는 형태가 된다.

p>img^p

<p><img src="" alt=""></p>
<p></p>

(p>img)*p

<p>
<p><img src="" alt=""></p>
</p>

텍스트 채우기

페이지 디자인 할때 임의 콘텐츠로 채워두면 한결 작업이 수월해진다. 흔히 lorem ipsum 이란 엉터리 라틴어 텍스트틱~한 콘텐츠를 사용하는데 Emmet 에 기본 내장돼 있다. 그냥 lorem 이라고 쳐주면 된다.

단어 수를 지정하려면 lorem10 식으로 숫자를 붙여주고, 단락 수를 지정하려면 lorem*3 식으로 * 표와 함께 숫자를 지정해주면 된다.

다음처럼 하면 10단어 짜리 문장 3개를 만든다.

특정 태그를 채울 수도 있다.

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque blanditiis porro voluptatum quisquam laborum consectetur voluptatibus distinctio ut odio ipsa laudantium quasi nemo qui accusantium omnis maiores enim temporibus nostrum.

Lorem10*3

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ut.</div>
<div>Laborum unde nostrum earum laudantium laboriosam nisi soluta aspernatur ea.</div>
<div>Quod corporis distinctio eligendi dolores accusantium error sapiente fugit vitae.</div>

ul.cwk-list>lorem5.item*3
<ul class="cwk-list">
   <li class="item">Lorem ipsum dolor sit amet.</li>
   <li class="item">Possimus vero iusto voluptate illo!</li>
   <li class="item">Odit id perferendis magnam praesentium!</li>
</ul>

간단한 산수 – $ 와 @

간단한 산수도 가능하다. 번호붙이기에 가장 많이 활용한다.
가령 특정 태그 항목에 번호를 줄줄이 붙이고 싶으면 $*5 식으로 입력한다. 그럼 1-5 까지 숫자를 붙인다.

$ 문자를 겹쳐 사용하면 0으로 빈자리를 채워준다(zero-fill). 가령 $$$ 이면 001, 002, 003 식으로 채운다. 또 @ 문자로 시작하는 숫자를 지정할 수도 있고, – 문자로 방향을 바꿀 수도 있다. @은 이메일 주소로도 알 수 있듯이 영어로 at 이라 읽는다. 그러니 @3 이면 at 3 라고 위치를 지정해준다고 이해하면 된다.

a[href='#$$']*3>img[src='' alt='filename$$$@5']*3

<a href="#01">
   <img src="" alt="filename001@5">
   <img src="" alt="filename002@5">
   <img src="" alt="filename003@5">
</a>
<a href="#02">
   <img src="" alt="filename001@5">
   <img src="" alt="filename002@5">
   <img src="" alt="filename003@5">
</a>
<a href="#03">
   <img src="" alt="filename001@5">
   <img src="" alt="filename002@5">
   <img src="" alt="filename003@5">
</a>

기타 단축키

단축키는 Emmet 웹사이트에서 해당 에디터를 클릭해 확인해야 한다.

활용도 높은 단축키만 소개하면 다음과 같다.

해당 줄 또는 선택 범위 주석 처리 - Shift+Ctrl+/
선택하지 않으면 현재 줄, 선택한 텍스트가 있으면 해당 범위를 HTML 주석 처리해준다.
태그 삭제 – Shift+Ctrl+'
해당 태그를 삭제한다. 중첩돼 있는 태그라도 해당 태그만 삭제하고 내부 태그는 그대로 둔다.
선택 컨텐츠 태그 감싸기 - Shift+Ctrl+A
선택된 컨텐츠를 span이나 div등 원하는 태그로 감싸준다.

CSS

스타일시트 역시 비슷하다.
스타일시트는 스타일의 앞문자 또는 대표 문자를 약어로 하기 때문에 적응에도 용이한 편이다.

예를 들어 body {} 안에서 m10 을 쓰면 margin: 10px; 로, m10e 라고 치면 margin: 10em; 확장되는 식이다.

Emmet 치트시트 에 자세히 나와 있으므로 문서 참조하면 된다.

http://docs.emmet.io/cheat-sheet/

HTML 문서 확장

간단히 HTML 문서를 통째로 확장해 만들 수도 있다.
link 라고만 입력하고 탭을 쳐도 스타일쉬트 링크로 확장된다.
html:5 라고 하면 HTML5 표준 문서를 만들어 준다.
하다못해 느낌표(!)만으로도 DOCTYPE HTML 문서를 만들어 주기 때문에 백지상태에서도 빠른 타입지정과 문서 확장이 가능하다.

결론

Emmet은 이전 Zen coding에서 지원하던 기능들에 CSS3, 기호와 부호 등을 이용한 빠르고 쉬운 코딩을 사용하는 데 용이하다.

다만 Zen coding에 비해 지원하는 부분이 많다보니 Editor Plus를 이용해 코딩하는 데에도 약간의 버벅임이 있었다. 그리고 Zen coding에 비해 지원하는 기능들이 많다보니 다 활용하기에는 시간이 조금 필요할 것 같다.

분명 Emmet이 지원하는 기능도 많고 더 편리한 부분도 많이 있어서 Emmet은 단축어를 활용하여 빠르고 정확하게 코딩할 수 있는 부분에 있어 최고의 선택이 아닐까 싶다.

그냥 Emmet을 안다는 사실만으로도 시간 엄청 번 거 같다.