🏷️ 에멧(Emmet) 문법 모음 - 한눈에 정리

Emmet (에밋)

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

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

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

---

HTML 태그 emmet

 

자식(하위) 요소 >

div>ul>li

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

 

형제 요소 +

div>p+span

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

 

올라가기 ^

div>ul>li^p+a

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

 

div>ul>li^^div

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

 

반복하기 *

div>ul>li*3

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

 

그룹화 ()

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

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

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

---

HTML 속성 emmet

 

클래스 .class

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

div.container

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

 

아이디 #id

span#hello

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

 

속성 [attr]

td[title="bye" colspan=5]

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

 

넘버링 $

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

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

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

 

 

텍스트 {}

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

.fruit{banana}

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

 

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

<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>{$}

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

---

CSS emmet 문법

css는 솔직히 단축문법 외울바에, 그냥 vscode자동완성 기능으로 치는게 나을듯 하다.

 

[ 단위 ]

• p → %
• e → em

w100

/* emmet 변환 ▼ */

width: 100px; /* 기본이 px단위 */

w50p

/* emmet 변환 ▼ */

width: 50%

h100p

/* emmet 변환 ▼ */

height: 100%;

m10p30e5

/* emmet 변환 ▼ */

margin: 10% 30em 5px;

bg10p

/* emmet 변환 ▼ */

background: 10%;