Emmet 사용법

aepee·2020년 9월 14일
6

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>

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




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;
profile
📝내가 보려고 기록하는 블로그

0개의 댓글