VS Code에서 필수 확장 프로그램(Extension) vs HTML

VS Code에서 HTML 코딩을 훨씬 빠르고 편하게 만들어주는 **필수 확장 프로그램(Extension)**들을 용도별로 정리해 드립니다!

이 확장 프로그램들은 웹 개발자라면 거의 대부분 사용하는 핵심 도구들입니다.

---

🚀 HTML 개발을 위한 필수 확장 프로그램

1. 🔍 실시간 미리보기 (Live Preview)

확장 프로그램 이름	특징
Live Server (by Ritwick Dey)	코드를 저장할 때마다 웹 브라우저에 자동으로 변경 사항을 즉시 반영하여 보여줍니다. HTML/CSS/JS 개발 시 없어서는 안 될 필수 확장 프로그램입니다.

2. 📝 코드 작성 속도 향상

확장 프로그램 이름	특징
Auto Rename Tag (by Jun Han)	HTML 태그의 여는 태그를 수정하면 자동으로 닫는 태그도 함께 수정해 줍니다. (예: <div>를 <p>로 바꾸면 </div>도 </p>로 자동 변경)
Auto Close Tag (by Jun Han)	여는 태그를 입력하면 자동으로 닫는 태그를 완성해 줍니다. (예: <div>를 입력하면 자동으로 </div>가 완성됨)

💡 참고: 최신 VS Code는 HTML에 대해 기본적인 '자동 닫기' 기능을 일부 제공하지만, Auto Close Tag와 Auto Rename Tag는 다른 언어(JSX, XML 등)에서도 작동하며 더 안정적이라 함께 설치하는 것을 추천합니다.

3. 🎨 코드 가독성 및 형식 지정

확장 프로그램 이름	특징
Prettier - Code Formatter (by Esben Petersen)	코드를 저장하는 순간 자동으로 통일된 형식으로 예쁘게 정렬해 줍니다. 여러 사람이 협업할 때 일관된 코드 스타일을 유지하는 데 필수적입니다.
Material Icon Theme (by Philip Kief)	파일 확장자나 이름에 따라 예쁘고 직관적인 아이콘을 표시해 주어, 파일 탐색기에서 파일을 한눈에 쉽게 구분할 수 있게 해줍니다.

4. 🔗 기타 유용한 보조 기능

확장 프로그램 이름	특징
Path IntelliSense (by Christian Kohler)	이미지 파일이나 다른 HTML, CSS, JS 파일의 경로를 입력할 때 자동 완성 기능을 제공하여 오타를 줄여줍니다.
HTML CSS Support (by thorq)	HTML 파일 내에서 CSS 클래스나 ID 이름을 입력할 때, 연동된 CSS 파일의 내용을 바탕으로 자동 완성 기능을 제공합니다.

---

🛠️ 설치 방법

1. VS Code 왼쪽 사이드바에서 네모 4개가 겹쳐진 아이콘 (확장 프로그램, Extensions)을 클릭합니다.
2. 상단 검색창에 위에서 추천한 확장 프로그램 이름 (예: Live Server)을 입력합니다.
3. 검색된 목록에서 해당 확장 프로그램을 찾은 후, [Install] 버튼을 눌러 설치하면 끝납니다.

이 필수 확장 프로그램들만 설치해도 HTML 코딩 환경이 훨씬 쾌적해 집니다.