Emmet 정리

해당 게시글은 웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기 - 드림코딩 유튜브를 보고 정리한 내용입니다!

부모,자식 태그 만들기 >

  <!-- > : div>ul>li -->

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

형제 태그 만들기 +

  <!-- + : main>section+section -->
  
  <main>
    <section></section>
    <section></section>
  </main> 

중복 태그 만들기 *

  <!-- + : section>ul>li*5-->

  <section>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </section>

부모태그의 형제태그 만들기 ^

  <!-- ^ : div>section>p^section-->

  <div>
    <section>
      <p></p>
    </section>
    <section></section>
  </div>

그룹화하기 ()

  <!-- () : div>(header>ul>li*2>a)+footer>p-->
  <div>
    <header>
      <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>
    </header>
    <footer>
      <p></p>
    </footer>
  </div>

태그 내에 텍스트 입력 {}

  <!-- {} : p{hello, world!} -->
  <p>hello, world!</p>

자동번호 입력 $

  <!-- $ : ul>li.item-list$*5>a{item$} -->
  <ul>
    <li class="item-list1"><a href="">item1</a></li>
    <li class="item-list2"><a href="">item2</a></li>
    <li class="item-list3"><a href="">item3</a></li>
    <li class="item-list4"><a href="">item4</a></li>
    <li class="item-list5"><a href="">item5</a></li>
  </ul>