[플러그인]Sublime Text 2에서 Emmet 사용하는 방법

demun
퍼블리셔/SublimeText
2012. 11. 15. 09:00

수정합니다. 기존의 발행된글이 미흡해서 수정해서 재발행 합니다.
기본적으로 Sublime Text 2를 설치하고, Package Control 을 모두 설치했다고 가정합니다.
만약 그렇기 못하다면 이전글을 참고하세요.
여기서는 Emmet 를 설치하는 방법과 간단하게 사용하는 방법을 알아보겠습니다.
Emmet 은 개인적으로 가장 먼저 설치해야 하는 플러그인이 아닌가 생각이 들 정도로 무척 용이한 플러그인입니다.
html에서는 Zen Coding 처럼 사용하고 css 에서도 편리하게 코딩할 수 있는 플러그인 입니다.

Emmet 설치하는 방법.

플러그인을 설치하는 방법은 모두 동일합니다.
단축키인 Ctrl+Shift+P 를 클릭해서 명령 팔렛트를 불러와서 Package Control 을 인스톨합니다.

바로 다음 뜨는 창에 Emmet 을 입력합니다.

이것으로 설치는 끝입니다.
자세한 방법은 https://github.com/sergeche/emmet-sublime 를 참고하세요.

Emmet 사용하는 방법.

단축된 코드를 입력한 후 Tab 를 입력하면 확장됩니다.

예를들어

html 에서는 젠코딩처럼 이용하고, CSS에서 margin : 10px; 라는 결과를 얻을려면 순수하게 코딩을 해야하지만, Emmet을 설치하면 m10 이라고 코딩하고 Tab을 클릭하면 똑같은 결과가 나옵니다.

이미지를 보면 이해가 가실겁니다.

왼쪽이 확장키인 Tab 을 누르기전이고 오른쪽이 Tab 키를 누른후 입니다.

서로 어떻게 변하는지 비교해보세요.

또 스킨을 제작하거나 할때 예제 텍스트가 필요합니다. 그럴때는 Lorem Ipsum 을 사용하는데요. 저는 참고로 http://html-ipsum.com/ 을 사용합니다.
이런 예제 텍스트를 복사해서 붙여넣기 방법으로 사용하는데 Emmet 은 이런것을 에디터에서 바로 사용할 수 있습니다. 즉 lorem 하고 탭을 클릭하면 더미텍스트가 삽입됩니다.

원하는 길이만큼도 삽입이 가능합니다.