서브라임 텍스트 플러그인 - Emmet

Emmet 소개

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

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

홈페이지 : Emmet
플러그인 : 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+↓

Emmet 사용하는 방법.

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

예를들어

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

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

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

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

 

 

 

 

 

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

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

 

 

Emmet 에 대한 자세한 내용은 http://docs.emmet.io/ 를 참고하세요.

출처 : http://webdir.tistory.com/399 / http://demun.tistory.com/2222