Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow

Emmet (에밋)을 사용하면 HTML & CSS의 작업 속도를 엄청나게 향상시킬 수 있다!! 👏🏽👏🏼👏🏻

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

---

🧶 HTML

자식(하위) 요소 >

• >

• 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`의 형제 요소가 되었다. )

• 만약 괄호 없이 div>header>ul>li*2+footer로 작성하게 된다면?

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

↘ 🧐 footer가 li의 형제요소가 되어버리니 주의하자

---

Emmet을 이용하면 이렇게나 쉽고 간편하게 요소들을 만들 수 있다.
뿐만 아니라 class나 id 값 혹은 다른 속성 값들을 넣어 만들 수도 있다.

클래스 .class

• div.container

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

너무나 쉽게 container라는 클래스를 가진 div가 생성되었다.
기본은 div이기 때문에 div를 생략하고 - .container라고 입력해도 결과는 같다!

---

아이디 #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>

---

---

🧶 CSS

[ 단위 ]

• p → %
• e → em
  
  

---

• w100

   width: 100px; (기본이 px단위)

• w50p

• h100p

   width: 50%;
   height: 100%;

• m10p30e5


   margin: 10% 30em 5px;