HTML/기본 설정
⭐유용한 VSC(Visual Studio code) 확장 프로그램 추천:D
하이핸드
2024. 1. 9. 01:01
HTML/CSS/JAVASCRIPT 코드를 작성하기 위해 필요한 VSC(Visual Studio Code)!
좀 더 간단하고 편리하게 사용하기 위해
확장 프로그램 몇가지를 추천해볼까 합니다:D
먼저 추천하기 전에! 확장 프로그램을 어디서 설치하는지 모르시는 분들을 위한 간단 설명!
- VSC 프로그램 열어서 왼쪽에 있는 EXTENSIONS 클릭! (사진 속 HERE!이라고 표시한 부분)
- Search Extensions in Marketplace에 설치하려는 확장 프로그램명 검색 가능
* INSTALLED : 이미 설치된 확장 프로그램 / * RECOMMENDED : 추천 확장 프로그램
⭐ vsc 확장 프로그램 (extension) ⭐
- Auto Rename Tag
- Live Server
- Open In Browser
- Live Preview
* INSTALL 버튼 클릭 시 설치됨
1. Auto Rename Tag
* 기능 : 태그 수정 시 닫힘 태그도 자동으로 변경
2. Live Server
* 기능 : 코드 수정 시 실시간으로 변경된 코드를 반영하여 보여줌 -> html이나 css 통해 디자인 변경하는 경우 유용하게 사용
-> 마우스 오른쪽 클릭하여 Open with Live Server 클릭 시 브라우저 창으로 확인 가능
3. Open In Browser
* 기능 : VSC로 작업 중인 파일을 Alt + B, Alt + Shift + B 단축키를 통해 browser로 확인하는 기능
4. Live Preview
* 기능 : Live Server, Open In Browser와 다르게 오른쪽 상단에 Show Preview 버튼을 클릭하여 VSC에서 작은 화면으로 작업 중인 html 파일을 확일 할 수 있도록 하는 기능 -> 수정한 코드의 결과를 브라우저창을 열지 않고 확인 가능