VS Code 작업 속도 향상을 위한 Emmet 단축키 및 트릭 9가지

Emmet(eh·mit/에밋)은 HTML 및 CSS 등의 다양한 파일 종류에 유용한 코드 단축키를 제공한다. 특히 VS Code에 내장되어 있으므로 따로 다운로드할 필요가 없다는 사실. 이제까지 안 써봤다면, 오늘부터라도 사용 시작하길 권장한다.

사용법

기본적으로 VS Code에서 HTML 파일 안에서 다음과 같은 단축키 입력 후“tab”키를 쳐서 사용

? 유용한 단축키 정리

1. HTML5 boilerplate (표준문서): 2가지 방법

“!”치고 “tab”; 또는 “HTML”입력 후 “HTML:5” 선택

2. 하위 요소 생성: “>” 사용

/* 예: */
header>ul>li

3. 동급 요소 생성: “+” 사용

/* 예: */
section>article>h2+p

4. 반복 태그 생성: “*” 사용

/* 예: */
ul>li*5

5.  CSS class 와 id 설정: “.” 와 “#”사용

/* 예: */
ul#menu>li.item*3

6. Grouping (그룹화) : “( )” 사용

/* 예: */
.container>(header>nav>ul>li*5>a)+(#content>section)+footer

7. 속성 [attribute] 있는 태그: “[]”사용

/* 예: */
td[title="name" colspan="5"]

8. 텍스트가 있는 태그: {} 중괄호 안에 {텍스트}를 입력

/* 예: */
a.button{Click Me}

9. 넘버링(숫자를 순서대로 나열): “$”사용

/* 예: */
ul.list>li.item$*5>{$}

Enjoy! ?

>> 참고: 전체 단축키 목록: Emmet Docs 치트 시트