📚Emmet

HTML과 CSS의 작성의 시간을 아주 빠르게 단축 시켜주는 에디터 확장기능이다.
자동으로 나머지 코드들을 자동생성해주는 기능을 갖고 있다.

📍Emmet의 주요 사용법

1. 하위 태그 : >
   div>ul>li 를 타이핑한 후, Tab을 입력하면 아래와 같이 생성된다.

<!--자식노드-->
    <div>
      <ul>
        <li></li>
      </ul>
    </div>

2. 형재요소 : +
   div>ul+ol+div 를 타이핑한 후, Tab을 입력하면 아래와 같이 생성된다.

<!--형제노드-->
    <div>
      <ul></ul>
      <ol></ol>
      <div></div>
    </div>

3. +와 >의 조합
   +와 >를 같이 사용할 수도 있다.
   div+div>ul+ol+div 예시는 아래와 같다.

<div></div>
    <div>
      <ul></ul>
      <ol></ol>
      <div></div>
    </div>

4. 반복생성 : *
   div>ul>li*3 예시는 아래와 같다.

<!--반복하기 *-->
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>

5. ID : #
   span#item, #item 예시는 아래와 같다.

<!--아이디 #-->
    <span id="item"></span>
    <div id="item"></div>

6. Class : .
   span.title,.title 예시는 아래와 같다.

<!--클래스 .-->
    <span class="title"></span>
    <div class="title"></div>

7. 콘텐츠 : {}
   p.container{Hello World~!} 예시는 아래와 같다.

<!--콘텐츠{}-->
    <p class="container">Hello World~!</p>

8. 자동 넘버링 : $
   p.container{item$}*5 예시는 아래와 같다.

<!--자동 넘버링$-->
    <p class="container">item1</p>
    <p class="container">item2</p>
    <p class="container">item3</p>
    <p class="container">item4</p>
    <p class="container">item5</p>

9. 괄호 사용 : ()
   dl>(dt+dd)*3 예시는 아래와 같다.

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

참고 출처 : https://devscb.tistory.com/72

ps) 더 추가할 예정이다.