HTML Emmet 문법

Emmet (에밋)

에밋은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다.

원래 젠코딩으로 부르다가 에밋으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다. 이처럼 에밋을 사용하면 HTML & CSS의 작업 속도를 엄청나게 향상시킬 수 있다.

VSCode는 emmet을 기본적으로 지원하고 Tab키를 통해 사용한다.

---

HTML 태그 emmet

 

자식(하위) 요소 >

emmet

div>ul>li

html

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

 

형제 요소 +

emmet

div>p+span

html

<div>
  <p></p>
  <span></span>
</div>Copy

 

올라가기 ^

emmet

div>ul>li^p+a

html

<div>
   <ul>
       <li></li>
   </ul>
   <p></p>
   <a href=""></a>
</div>Copy

 

emmet

div>ul>li^^div

html

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

 

반복하기 *

emmet

div>ul>li*3

html

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

 

그룹화 ()

emmet

div>(header>ul>li*2)+footer

html

<div>
   <header>
       <ul>
           <li></li>
           <li></li>
       </ul>
   </header>
   <footer></footer>
</div>

<!-- 그룹화를 통해 `footer`는 `header`의 형제 요소가 되었다. －－＞Copy

---

HTML 속성 emmet

 

클래스 .class

• 기본은 div이기 때문에 div를 생략하고 - .container라고 입력해도 결과는 같다．

emmet

div.container

html

<div class="container"></div>Copy

 

아이디 #id

emmet

span#hello

html

<span id="hello"></span>Copy

 

속성 [attr]

emmet

td[title="bye" colspan=5]

html

<td title="bye" colspan="5"></td>Copy

 

넘버링 $

• $ - 숫자를 순서대로 나열

emmet

ul>li.item$*5

html

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

 

• ＄@ - 뒤의 숫자부터 시작

emmet

ul>li.item$@5*5

html

<ul>
   <li class="item5"></li>
   <li class="item6"></li>
   <li class="item7"></li>
   <li class="item8"></li>
   <li class="item9"></li>
</ul>Copy

 

 

텍스트 {}

• {} - {중괄호} 안에 넣으려는 텍스트를 입력

emmet

.fruit{banana}

html

 <div class="fruit">banana</div>Copy

 

emmet

.container>ul.list>li.list-item*5>a{list$}

html

<div class="container">
   <ul class="list">
       <li class="list-item"><a href="">list1</a></li>
       <li class="list-item"><a href="">list2</a></li>
       <li class="list-item"><a href="">list3</a></li>
       <li class="list-item"><a href="">list4</a></li>
       <li class="list-item"><a href="">list5</a></li>
   </ul>
</div>Copy

 

emmet

.container>.item*8>{$}

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>Copy

---