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

Last Updated on 2022-07-18

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

사용법

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

👇 유용한 단축키 정리

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

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

Emmet | HTML boilerplate (표준DTD문서) 생성
Emmet | HTML5 boilerplate (표준문서) 생성

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

/* 예: */
header>ul>li
Emmet | 하위 요소 생성
Emmet | 하위 요소 생성

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

/* 예: */
section>article>h2+p
Emmet | 동급 요소 생성
Emmet | 동급 요소 생성

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

/* 예: */
ul>li*5
Emmet | 반복 태그 생성
Emmet | 반복 태그 생성

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

/* 예: */
ul#menu>li.item*3
Emmet | CSS class 나 id 설정
Emmet | CSS class 나 id 설정

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

/* 예: */
.container>(header>nav>ul>li*5>a)+(#content>section)+footer
Emmet | Grouping (그룹화)
Emmet | Grouping (그룹화)

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

/* 예: */
td[title="name" colspan="5"]
Emmet | 속성 [attribute] 있는 태그 설정
Emmet | 속성 [attribute] 있는 태그 설정

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

/* 예: */
a.button{Click Me}
Emmet | 텍스트가 있는 태그
Emmet | 텍스트가 있는 태그

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

/* 예: */
ul.list>li.item$*5>{$}
Emmet | 넘버링(숫자를 순서대로 나열)
Emmet | 넘버링(숫자를 순서대로 나열)

Enjoy! 🤖

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