Emmet - 서브라임 텍스트(Sublime Text) 플러그인 #4

코딩 시간을 줄여주는 스니펫 혹은 축약어들을 미리 작성해두고, 매크로나 기타 애플리케이션으로 불러들여 사용하고 계시는 분들이 있을 겁니다. 코딩은 시간과의 싸움이기도 하기에 반복적인 내용을 줄여주는게 좋겠지요.

Emmet 소개

Emmet은 인기있는 텍스트 에디터들의 HTML 및 CSS 작업능률을 향상시키는 플러그인이다. 기본적으로 대부분의 텍스트 편집기는 스니펫(snippets)이라고 불리는 재사용 가능한 코드를 저장할 수 있는데, 이를 직접 정의해야하고 실행시간을 연장할 수 없는 문제가 있다.

Emmet은 CSS를 닮은 표현식을 입력하고 입력한 축약어에 대한 내용을 출력한다. HTML/XML과 CSS에 관련된 작업을하는 웹개발자를 위해 개발되었고 최적화되었지만, 프로그래밍 언어들에서 또한 사용할 수 있다.

HOME

Emmet

PLUGIN

Emmet for Sublime Text

지원사항

Emmet의 다운로드 메뉴를 이용하면 사용가능한 텍스트 에디터들과 온라인 서비스들이 표기된다.

• 완벽지원 : Sublime Text, Atom, Eclipse/Aptana, TextMate, Coda, Espresso, Chocolat, komodo edit, Notepad++, PSPad, textarea, CodeMirror, Brackets, NetBeans, Adobe Dreamweaver
• 온라인 서비스 : JSFiddle, JS Bin, CodePen, ICEcoder, Divshot, Codio, Codeanywhere
• 써드파티 지원(모든 기능을 지원하진 않음) : EditPlus, SynWrite, WebStorm, PhpStorm, Vim, HTML-Kit, HippoEDIT, CodeLobster PHP Edition, TinyMCE, EverEdit, Emacs, WeBuilder

Emmet 플러그인 설치

이 플러그인은 자바 스크립트로 작성하고 실행하는 PyV8와 구글의 V8 바이너리를 사용하기 때문에 어떤 운영체제에서 전혀 작동하지 않을 수 있다.

1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P 로 Command Palette를 불러온다.
2. install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누른다.

3. emmet을 입력하여 Emmet가 검색되면 선택한 후, 엔터를 눌러 설치한다.

   

4. 서브라임 텍스트를 재실행한다.

이 플러그인을 설치하면 자동적으로 PyV8 바이너리를 다운로드하는데 만일 자동적으로 다운로드하는데 문제가 생긴다면 수동설치하라.

Emmet 축약어

축약어는 Emmet의 핵심이다. CSS 선택자와 닮은 표현식을 확장하는데 아래의 예를 보라.

#page>div.logo+ul#navigation>li*5>a{Item $}

아래처럼 변환된다.

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

자세한 설명은 Emmet Documentation에서 확인하라.

Emmet 액션

• 축약어 확장 – Tab or Ctrl + E
• 대화형 축약어 확장 — Ctrl+Alt+Enter
• 쌍을 이루는 태그 안쪽을 선택 – ⌃D (Mac) / Ctrl + , (PC)
• Match Tag Pair Inward(윈도우에서 작동안함) – ⌃J / Shift+Ctrl+0
• 쌍을 이루는 태그로 이동 – ⇧⌃T / Ctrl+Alt+J
• 축약어로 감싸는 태그 생성 — ⌃W / Shift+Ctrl+G
• Go to Edit Point(윈도우에서 작동안함) — Ctrl+Alt+→ or Ctrl+Alt+←
• 포인터가 위치한 곳을 선택 – ⇧⌘. or ⇧⌘, / Shift+Ctrl+. or Shift+Ctrl+,
• 포인터가 위치한 곳이 포함하는 하위까지 주석처리 — ⇧⌥/ / Shift+Ctrl+/
• Split/Join Tag — ⇧⌘' / Shift+Ctrl+`
• 포인터가 위치한 곳의 시작태그와 끝맺음 태그를 삭제 – ⌘' / Shift+Ctrl+;
• 이미지 너비와 높이 속성을 삽입 — ⇧⌃I / Ctrl + U
• 수학식을 평가 — ⇧⌘Y / Shift+Ctrl+Y
• CSS 변경 값을 반영 – ⇧⌘R / Shift+Ctrl+R
• Encode/Decode Image to data:URL – ⇧⌃D / Ctrl + '
• Rename Tag – ⇧⌘K / Shift+Ctrl+'

증가/감소 액션

• 1씩 증가 - Ctrl + ↑
• 1씩 감소 - Ctrl + ↓
• 0.1씩 증가 - Alt + ↑
• 0.1씩 감소 - Alt + ↓
• 10씩 증가 - ⌥⌘↑ / Shift+Alt+↑
• 10씩 감소 - ⌥⌘↓ / Shift+Alt+↓