Emmet
에밋은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래 젠코딩으로 부르다가 에밋으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다.
사용방법
단축키 입력 후 tab 키를 누르면 자동 완성됨
1. ! => html5 자동완성
2. 태그명 입력 시 태그 자동완성
3. 태그명 + . => 클래스 자동완성
4. 태그명 + # => 아이디 자동완성
ex) div#box
5. 태그명 > 태그명 > 태그명 => 부모 자식 노드 자동완성
6. 태그명 + 태그명 =>형제노드
7. 태그명 + 태그명 * N => n만큼 태그 반복
ex) ul>li*5
8. ^ => 자식노드 만든 후 그 부모의 형제 노드 만들기
ex) div>ul>li^ol
9. 중괄호 써서 그룹화 하기
ex) div>(header>ul>li*2>a)+footer>p)
9. 태그{텍스트} => 태그 안에 텍스트 넣기
ex) p{hello}
10. $ => 숫자할당하기
ex) p.class${item $}*5
11. lorem => 더미텍스트 생성
ex) p>lorem
ex) p>lorem4 (4단어만)
참고사이트
'웹개발 > 생산성 향상' 카테고리의 다른 글
| Mac용 VScode 단축키 (1) | 2024.01.09 |
|---|---|
| VSCode 터미널과 에디터 포커스 전환하는 방법 (0) | 2023.12.29 |
