[HTML] 에밋(Emmet) 문법

 

에밋 문법(Emmet)

html, xml, xsl 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인

 

---

 

HTML 태그

 

자식(하위) 요소 : >

div>ul>li (+ Enter 클릭 시)

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

 

형제 요소: +

div>p+span (+ Enter 클릭 시)

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

 

올라가기: ^

div>ul>li^p+a (+ Enter 클릭 시)

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

div>ul>li^^div (+ Enter 클릭 시)

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

 

반복하기: *

div>ul>li*3 (+ Enter 클릭 시)

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

 

그룹화: ()

div>(header>ul>li*2)+footer (+ Enter 클릭 시)
<div>
   <header>
       <ul>
           <li></li>
           <li></li>
       </ul>
   </header>
   <footer></footer>
</div>
 
<!-- 그룹화를 통해 `footer`는 `header`의 형제 요소가 되었다. －－＞

 

---

 

HTML 속성

 

클래스: .class명

div가 기본이므로 생략해도 결과 같음

div.container (+ Enter 클릭 시)

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

 

아이디: #id명

span#hello (+ Enter 클릭 시)

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

 

속성: [attr명]

td[title="bye" colspan=5] (+ Enter 클릭 시)

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

 

넘버링: $

ul>li.item$*5 (+ Enter 클릭 시)

<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*5 (+ Enter 클릭 시)

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

 

텍스트: {넣고자하는텍스트}

.fruit{banana} (+ Enter 클릭 시)

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

.container>ul.list>li.list-item*5>a{list$} (+ Enter 클릭 시)

<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>

.container>.item*8>{$} (+ Enter 클릭 시)

<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>