Emmet

Emmet(에밋)은 HTML 및 CSS 등의 다양한 파일 종류에 유용한 코드 단축키를 제공합니다.

emmet은 CSS 선택자를 활용해 사용하는 기능입니다.

 

VS Code로 HTML파일을 작성시,

! 를 입력하고 Tab키를 누르면 자동완성되는 거 있습니다.

이것도 emmet에 해당됩니다.

 

* 기호는 곱하기, { } 는 내용을 삽입, $ 는 순서대로 숫자 입력을 의미합니다.

이런 CSS 선택자 외 나머지 내용은 모두 Emmet에서만 지원하는 기능이니 착오 없으시길 바랍니다.

 

예시를 하나 보여주자면,

div>ul>li*4{$}입니다.

<div>태그 하부에 <ul>태그 있고, <ul>태그 하부에 <li>태그가 있습니다.

<li>태그가 4번 반복하며, 순서대로 숫자를 입력합니다.

 

tab키 혹은 enter키를 누르면, 위 사진처럼 나타납니다.