[HTML] 자동 완성 기능 / VScode / emmet

VScode에서는 html의 개발의 편의성을 위해서 자동 완성 기능을 제공해준다. 이 기능을 emmet이라고 말한다.

 

innerText

div{div}

<div>div</div>

div{div$}*5

<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>

---

클래스, 아이디

button.btn

button#btn

<button class="btn"></button>
<button id="btn"></button>

div.box

div.box#one

<div class="box"></div>
<div class="box" id="one"></div>

---

자식 태그 및 숫자만큼 생성

ul>li*5

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

 

자세한 내용은 여기서 확인

https://docs.emmet.io/cheat-sheet/

Cheat Sheet