[HTML&CSS] Emmet - HTML element 생성하기

Emmet 이란?

Emmet은 "Expressive Meta-Markup Language"의 약자로,
HTML 및 CSS 코드를 간결하게 작성하고 생성하기 위한 확장도구이다. Emmet을 사용하여 HTML 및 CSS를 빠르게 작성할 수 있다.

다양한 IDE에서 지원되며, Visual Studio Code에서는 1.26.0부터 내장되어 별도로 설치하지 않아도 된다.

Emmet 구문 사용하기

바로 예시로 살펴보자. HTML 파일에서 다음과 같이 작성해볼 수 있다.

// 기본 구문: 태그명
// div
<div></div>
// p
<p></p>
// span
<span></span>


// 요소 복제하기
// li*3
<li></li>
<li></li>
<li></li>


// 요소 class 및 id 추가하기: '.', '#'
// 참고로 태그명 생략할 경우, 디폴트로 <div>가 생성됨
// div.container
<div class="container"></div>
// div#container
<div id="container"></div>


// 형제 요소 생성하기: '+'
// div+p+span
<div></div>
<p></p>
<span></span>


// 자식 요소 생성하기(요소 nesting): '>'
// ul>li.item*3
<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>


// 번호 자동 매김: '$'
// ul>li.item$*3
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>