html emmet(에멧) 문법

vscode에서 기본지원 플러그인

 tap키를 통해 사용

ul.list-product>li.product-$*4

 

• ul.list-product: class="list-product"를 가진 ul 요소를 생성
• >: 자식 요소를 생성할 때 사용
• li.product-$: class="product-1", class="product-2", class="product-3", class="product-4"와 같은 li 요소를 생성
• $는 숫자를 1부터 시작하여 순서대로 붙임
• *4: 이 구조를 4번 반복

<ul class="list-product">
    <li class="product-1"></li>
    <li class="product-2"></li>
    <li class="product-3"></li>
    <li class="product-4"></li>
</ul>

라는 의미