HTML Emmet 에 대해 정리해봤습니다.
개인적으로 자주 쓰이는 것들에 한해 작성되었습니다.

🖋 HTML Emmet

HTML 문서를 작성할 때 자동완성 기능으로 문서 작성 속도를 크게 향상시켜줍니다.

1. 자동완성 : Tab ⭐️
2. 텍스트 : {} ⭐️
3. 자식(하위)요소 : > ⭐️
4. 형제 요소 : +
5. 올라가기 : ^
6. 반복하기 : * ⭐️
7. 그룹화 : ()
8. 클래스 : . ⭐️
9. 아이디 : # ⭐️
10. 속성 : [attr]
11. 넘버링 : $ ⭐️

( ⭐️ 표시는 실제로 개발시 많이 사용되는 Emmet입니다. )

직접 VSCode 등의 에디터에서 테스트해보는 것을 추천드립니다!
처음에는 익숙하지 않아도, 자연스럽게 코드량이 늘다보면 금방 적응되실거에요.

---

< 사용 예시 >

< 응용 예시 >

• <div></div> 사이에 "안녕하세요" 를 넣고싶으면 div{안녕하세요} > 엔터
• ul>li*4 에 순서대로 "Box 숫자" 를 넣고싶으면 ul>li{Box $}*4 > 엔터
• <img> 에 alt 속성을 부여하려면 img[alt="Image"] > 엔터

---

참고 사이트

🖨 Emmet Documentation - Cheat Sheet