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/
3. Emmet 컨닝페이퍼(Cheat sheet) ★★★★★
'HTML & CSS' 카테고리의 다른 글
| [edwith] 초보 HTML&CSS 4강 - HTML 구조화 설계 (0) | 2019.06.02 |
|---|---|
| [edwith] 초보 HTML&CSS 3강 - UI 레이아웃을 위한 HTML 태그 (0) | 2019.06.01 |
| [생활코딩] HTML - DOCTYPE (0) | 2019.05.31 |
| [생활코딩] HTML - 문서의 구조 (0) | 2019.05.31 |
| [생활코딩] HTML - 하이퍼텍스트와 속성 (0) | 2019.05.29 |
댓글