HTML 단축키? 빠른 코딩을 위한 Emmet !

에밋(Emmet)이란?

에밋(Emmet)은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래 젠코딩(Zen Coding)으로 부르다가 에밋(Emmet)으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다.
출처: 위키피디아(https://ko.wikipedia.org/wiki/%EC%97%90%EB%B0%8B_(%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4))

Emmet 문법 정리

emmet docs: https://docs.emmet.io/abbreviations/syntax/

Abbreviations Syntax(약어 구문)

Emmet은 생성된 트리 내 요소의 위치와 요소의 속성을 설명하기 위해 CSS selector와 유사한 구문을 사용합니다.

Elements

div 또는 p와 같은 요소의 이름을 사용하여 HTML 태그를 생성할 수 있습니다. Emmet에는 사용 가능한 태그 이름이 미리 정의되어 있지 않으므로 div → <div></div>, foo → <foo></foo> 등과 같이 단어를 작성하고 태그로 변환할 수 있습니다.

Nesting operators(중첩 연산자)

요약
1. Child: >
2. Sibling: +
3. Climb-up: ^
4. Multiplication: *
5. Grouping: ()

1. Child: >

   div>ul>li

   <div>
       <ul>
           <li></li>
       </ul>
   </div>

2. Sibling: +

   div+p+bq

   <div></div>
   <p></p>
   <blockquote></blockquote>

3. Climb-up: ^

   div+div>p>span+em^bq

   <div></div>
   <div>
       <p><span></span><em></em></p>
       <blockquote></blockquote>
   </div>

   div+div>p>span+em^^^bq

   <div></div>
   <div>
     <p><span></span><em></em></p>
   </div>
   <blockquote></blockquote>

4. Multiplication: *

   ul>li*5

   <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
   </ul>

5. Grouping: ()

   (div>dl>(dt+dd)*3)+footer>p

   <div>
     <dl>
         <dt></dt>
         <dd></dd>
         <dt></dt>
         <dd></dd>
         <dt></dt>
         <dd></dd>
     </dl>
   </div>
   <footer>
     <p></p>
   </footer>

Attribute operators(속성 연산자)

요약
1. ID and CLASS
2. Custom attributes
3. Item numbering: $
4. Changing numbering base and direction

1. ID(#) and CLASS(.)

   div#header+div.page+div#footer.class1.class2.class3

   <div id="header"></div>
   <div class="page"></div>
   <div id="footer" class="class1 class2 class3"></div>

2. Custom attributes

   td[title="Hello world!" colspan=3]

   <td title="Hello world!" colspan="3"></td>

3. Item numbering: $

   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>

   ul>li.item$$$*5

   <ul>
     <li class="item001"></li>
     <li class="item002"></li>
     <li class="item003"></li>
     <li class="item004"></li>
     <li class="item005"></li>
   </ul>

4. Changing numbering base and direction(@-/@i)

   ul>li.item$@-*5

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

   ul>li.item$@3*5

   <ul>
     <li class="item3"></li>
     <li class="item4"></li>
     <li class="item5"></li>
     <li class="item6"></li>
     <li class="item7"></li>
   </ul>

Text: {}

a{Click me}

<a href="">Click me</a>