HTML & CSS
[생활코딩] HTML - Emmet 활용법
펜네임
2019. 5. 31. 12:52
Emmet : 에디터 Atom의 확장프로그램
※ 포스팅 상의 Emmet 버전은 2.4.3임
Emmet 유용 단축키
- Ctrl + / : 블록된 곳을 주석 처리
- Ctrl + D : 블록된 곳과 똑같은, 다음 내용을 찾아 다중 선택
- Ctrl + Alt + ← 또는 → : 다음 편집 지점으로 커서 이동
Emmet 활용 포인트
예시1 : 부모-자식태그 한 번에 입력
ol>li //왼쪽처럼 입력 후 Tab결과1
<ol>
<li></li>
</ol>
예시2 : 동일태그 여러개 한 번에 입력
li*4 //왼쪽처럼 입력 후 Tab결과2
<li></li>
<li></li>
<li></li>
<li></li>
예시2-1 : 부모-자식태그를 ()로 묶어서 여러개 한 번에 입력
(li>a)*6 //왼쪽처럼 입력 후 Tab결과2-1
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
예시3 : HTML5의 기본틀 한 번에 입력
! //왼쪽처럼 입력 후 Tab결과3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
Emmet 사용설명서
1. Emmet 기본 단축키
2. Emmet 기본문법
https://docs.emmet.io/abbreviations/syntax/