⚡ [ VSCode Emmet 단축어 정리 ]

---

🚀 [ Emmet이란? ]

Emmet은 HTML/CSS 코드를 빠르게 작성할 수 있게 도와주는 단축어 확장 기능
예를 들어, div.container>ul>li*3 입력 후 Tab을 누르면 자동으로 아래처럼 변환된다.

<div class="container">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

---

🧠 [ 어떤 태그로 감싸기 단축어 설정 ]

단계	설명	아이콘
1️⃣	F1을 눌러 명령어 팔레트(Command Palette) 열기	⚙️
2️⃣	검색창에 wrap 입력 후 → Emmet: 약어로 래핑(Wrap with Abbreviation) 선택	🔍
3️⃣	단축키 설정 창에서 원하는 키를 등록	⌨️
4️⃣	예시 단축키 → Alt + Shift + A + S	⚡
5️⃣	감싸고 싶은 코드를 드래그 한 뒤 단축키 실행	🖱️
6️⃣	입력창에 감쌀 태그 이름 입력 (예: div, section, ul>li)	🧩

---

✅ [ 예시 사용법 ]

1. 아래와 같이 코드 일부를 선택한다.

   <p>Hello World</p>

2. 등록한 단축키(Alt + Shift + A + S)를 누른다.

3. div.container 입력 후 Enter 키를 누른다.

4. 결과 👇

   <div class="container">
       <p>Hello World</p>
   </div>

💡 Tip:
Emmet 단축키는 반복적인 HTML 구조 작업을 대폭 줄여준다.
예를 들어 ul>li*5>a{Menu $} 입력 시 아래처럼 즉시 완성된다 👇

<ul>
    <li><a>Menu 1</a></li>
    <li><a>Menu 2</a></li>
    <li><a>Menu 3</a></li>
    <li><a>Menu 4</a></li>
    <li><a>Menu 5</a></li>
</ul>

---

🔗 [ 참고 자료 ]

📘 Velog - VSCode Emmet 사용법 (by rain98)

---