emmet: 자동완성 기능으로, html 작성 속도를 크게 향상시켜준다
emmet 기초
(작성 후 tab을 누르면 자동 완성)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>emmet</title>
</head>
<body>
h1
h1{hello world} <!-- 자주 사용됨 -->
h1+p <!-- h1과 p 자동완성 -->
h1{hello}10 <!-- h1 10개 완성 -->
h1#one <!-- h1에 id 붙이기 -->
h1.one <!-- h1에 class 붙이기 -->
table>(tr>(td4))3 <!-- table row가 3개가 있는데 그 안에 데이터가 4개가 있다? -->
lorem <!-- lorem 자동완성 -->
lorem*3 <!-- lorem 3개의 문장 -->
lorem3 <!-- lorem 3개 단어 -->
lorem5
img
img:z
a[a="value1" b="value2" c=1] <!-- a태그에 없는 요소도 가능하다는 뜻 -->
a
a[href="www.naver.com"] <!-- a태그 안에 링크 자동완성 -->
h1.one.two#three <!-- class 2개, id 1개 -->
<!-- ">": 부모 밑에 자식을 태그를 넣을 때 사용 -->
<!-- "+": 형제태그 밑에 덧붙여서 사용 -->
</body>
</html>
$: 변수
h$*6{hello world}
=
<h1>hellow world</h1>
<h2>hellow world</h2>
<h3>hellow world</h3>
<h4>hellow world</h4>
<h5>hellow world</h5>
<h6>hellow world</h6>
*tab을 누르면 다음 코드로 바로 넘어갈 수 있다
(처음부터 tab을 눌러야 계속 사용 가능 ▶ 방향키 사용시 tab 불가)
<ol type="A">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>bootstrap</li>
<li>node</li>
<li>react</li>
</ol>
🔽 단축키(vsc) 🔽
Ctrl + [ : 들여쓰기 = tab
Ctrl + ] : 내어쓰기 = shift+tab
Ctrl + \\ : 토글 보이기
Ctrl + O : 파일 열기
Ctrl + P : 프로젝트 검색
Ctrl + F : 열려 있는 파일 내에서 검색
Ctrl + Shift + F : 열려 있는 전체 프로젝트 내에서 검색
Ctrl + , : Settings
Ctrl + N : 새로운 파일
Ctrl + S : 파일 저장
Ctrl + Shift + S :다른 이름으로 저장
Shift + del : 라인 지우기
Ctrl + 클릭 : 여러줄 입력
alt + ↑/↓: 이동
alt + shift+ ↑/↓: 복사
ctrl + c: 블럭으로 안쌓여있어도 커서만 있으면 복사된다!
⭐️ Emmet cheat sheet
https://docs.emmet.io/cheat-sheet/
Cheat Sheet
Download cheat sheet as printable PDF A5
docs.emmet.io
'HTML·CSS' 카테고리의 다른 글
| [CSS] 단위 (0) | 2022.02.04 |
|---|---|
| [HTML] Form 태그 (0) | 2022.02.04 |
| [HTML] 미디어 태그 (0) | 2022.02.04 |
| [CSS] 선택자 (0) | 2022.02.03 |
| [CSS] 기초(1) (0) | 2022.02.03 |