HTML emmet 활용

emmet은 html이나 css 등을 작성할 때 시간을 단축시켜주는 확장 플러그인이며,

vscode에 기본적으로 적용되어 있다.

! + tab : 기본폼 생성

태그이름 + tab : 태그 틀 생성

link + tab : 스타일시트 코드 완성

태그이름.클래스이름 + tab : class 포함해서 태그 생성 (태그이름 생략하면 div로)

태그이름#아이디이름 + tab : id 포함해서 태그 생성 (태그이름 생략하면 div로)

li*5 + tab : li태그 5줄 한번에 생성

div>span + tab : 부모태그 내에 자식태그로 태그 생성

div+div + tab : 같은 단계에 태그 생성

p{hello} : p태그안에 hello넣어져서 태그 생성

( )를 통해 묶을 수 있다.

cf)

HTML | emmet 활용 (태그 단축키)

emmet은 html, css를 사용할때 아주 간편하게 태그를 작성할 수 있게 해주는 플러그인인다.

velog.io

[HTML]Emmet 사용법

Emmet이란?

nachwon.github.io

Supremo