Emmet?

: HTML과 CSS의 자동완성 기능 제공

HTML Emmet

! + Tab키 : HTML 기본구조 만듦

> 자식노드
div>ul>li + Tab키

+ 형제노드 : 한 요소와 같은 단계에 위치한 요소
div>ul+ol+div + Tab키

* 반복
div>ul>li*3

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

. 클래스 부여
div.title + Tab키
이때 div가 기본이므로 생략 가능

<div class="title"></div>

# 아이디
#item + Tab키 : id를 갖는 요소 생성 가능
이때 div가 기본이므로 생략 가능

<div id="item"></div>

{} 텍스트 입력
p.container{Hello world} + Tab키 : {}를 사용하여 요소안에 내용을 갖는 요소 생성

<p class="container">Hello world</p>

$ 자동 넘버링 부여
p.container{Hello$}*3 + Tab키

<p class="container">Hello1</p>
<p class="container">Hello2</p>
<p class="container">Hello3</p>

---

CSS Emmet

• width, height
  .item{h100+w100} + Tab키
  기본값 : px 단위
  
  

Emmet 공식 사이트

https://docs.emmet.io/abbreviations/syntax/