Emmet 실습!
1. Emmet이란?
Emmet은 HTML과 CSS 작성을 빠르게 도와주는 도구입니다. VSCode에 기본으로 내장되어 있어 별도의 설치 없이 바로 사용할 수 있습니다.
2. 기본 문법
아래 표의 Emmet 문법을 VSCode에서 입력하고 Tab 키를 눌러보세요.
| Emmet 문법 | 설명 | 결과 |
|---|---|---|
h1 | h1 태그 생성 | <h1></h1> |
h1+h2+p | 형제 요소 생성 | <h1></h1><h2></h2><p></p> |
h1*3 | 여러 개 생성 | <h1></h1><h1></h1><h1></h1> |
h1{hello} | 텍스트 포함 | <h1>hello</h1> |
ul>li*5 | 자식 요소 생성 | <ul><li></li>...(5개)</ul> |
div#id.class | id와 class 지정 | <div id="id" class="class"></div> |
li.item$*3 | 넘버링 | <li class="item1"></li>...(1,2,3) |
3. 실습 예제
<!DOCTYPE html>
<html>
<head>
<title>emmet실습</title>
link:css link:favicon
</head>
<body>
h1 h1+h2+p h1*3 h1{hello world}*10 a{Click} h1#hojun h1.hojun
(div>table>(tr>(td*2))*3)+(footer>p) div#one.c1.c2.c3 ul>li.item$*5 lorem
<!-- lorem*5는 5개의 문장 -->
lorem*5
<!-- lorem5는 5개의 단어 -->
lorem5 [a='value1' b="value2" c=1] a[href='www.naver.com']
<!--
Ctrl + \ : 토글 보이기
Ctrl + O : 파일 열기
Ctrl + P : 프로젝트 검색
Ctrl + F : 열려 있는 파일 내에서 검색
Ctrl + Shift + F : 열려 있는 전체 프로젝트 내에서 검색
Ctrl + , : Settings
Ctrl + N : 새로운 파일
Ctrl + S : 파일 저장
Ctrl + Shift + S :다른 이름으로 저장
-->
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>emmet실습</title>
link:css link:favicon
</head>
<body>
h1 h1+h2+p h1*3 h1{hello world}*10 a{Click} h1#hojun h1.hojun
(div>table>(tr>(td*2))*3)+(footer>p) div#one.c1.c2.c3 ul>li.item$*5 lorem
<!-- lorem*5는 5개의 문장 -->
lorem*5
<!-- lorem5는 5개의 단어 -->
lorem5 [a='value1' b="value2" c=1] a[href='www.naver.com']
<!--
Ctrl + \ : 토글 보이기
Ctrl + O : 파일 열기
Ctrl + P : 프로젝트 검색
Ctrl + F : 열려 있는 파일 내에서 검색
Ctrl + Shift + F : 열려 있는 전체 프로젝트 내에서 검색
Ctrl + , : Settings
Ctrl + N : 새로운 파일
Ctrl + S : 파일 저장
Ctrl + Shift + S :다른 이름으로 저장
-->
</body>
</html>4. 유용한 단축키
| 단축키 | 설명 |
|---|---|
Ctrl + \ | 토글 보이기 |
Ctrl + O | 파일 열기 |
Ctrl + P | 프로젝트 검색 |
Ctrl + F | 열려 있는 파일 내에서 검색 |
Ctrl + Shift + F | 전체 프로젝트 내에서 검색 |
Ctrl + , | Settings |
Ctrl + N | 새로운 파일 |
Ctrl + S | 파일 저장 |
Ctrl + Shift + S | 다른 이름으로 저장 |
더 많은 Emmet 문법은 공식 치트시트에서 확인할 수 있습니다.
Emmet Cheat Sheet