통합 가이드
VS Code 초보자 완벽 입문 가이드
다운로드부터 첫 웹페이지 실행까지, 프로그래밍 첫걸음 4단계
Windows/Mac 설치부터 Prettier·Live Server 등 필수 확장 설치, 첫 프로젝트(폴더 열기·Emmet) 생성, 실행 및 트러블슈팅까지 4단계로 안내하는 완전 입문 가이드입니다.
최근 업데이트: 2026-09-07
study.candlesister.com 안에서 바로 열립니다
Unsplash (Free License)
상세 개요 및 핵심 특징
프로그래밍을 처음 시작하는 분들을 위해 Visual Studio Code의 다운로드·설치부터 한국어 언어팩 설정, Prettier·Live Server·Material Icon Theme 등 필수 확장 프로그램 설치, Open Folder 작업공간 개념과 Emmet 단축 코드로 첫 HTML/CSS 프로젝트를 만드는 방법, 그리고 Live Server로 실시간 미리보기를 실행하고 한글 깨짐 등 초보자가 자주 겪는 오류를 해결하는 방법까지 4단계로 안내합니다.
주요 기능 및 제공 혜택
운영체제별(Windows/Mac) 설치 가이드 및 한국어 언어팩 설정
Prettier, Live Server, Material Icon Theme 등 필수 확장 프로그램
Open Folder 작업공간 개념과 Emmet 단축 코드 실습
Live Server 실행 및 한글 깨짐 등 초보자 자주 겪는 오류 해결법
한국어·영어·일본어 다국어 지원 및 실시간 코드 샌드박스
핵심 학습 포인트 & 실무 적용 가이드
1Open Folder 작업공간 개념
초보자가 가장 많이 실수하는 폴더 열기 작업 공간 개념 이해
2Emmet으로 HTML/CSS 빠르게 작성
단축 코드 한 줄로 HTML 보일러플레이트를 자동 생성하는 방법
단계별 실천 로드맵 (Curriculum)
1
설치하기
Windows/Mac 다운로드, 설치 마법사 권장 옵션, 한국어 언어팩 설정
2
확장 프로그램
Prettier, Live Server, Material Icon Theme 등 필수 확장 설치
3
첫 프로젝트 만들기
Open Folder 작업공간과 Emmet 단축 코드로 HTML/CSS 작성
4
실행 및 확인
Live Server 실행과 한글 깨짐 등 초보자 자주 겪는 오류 해결
자주 묻는 질문 (FAQ)
A. 네, 개인·기업 모두 무료로 사용할 수 있는 마이크로소프트의 오픈소스 코드 에디터입니다.
통합 가이드 전체보기
study.candlesister.com/vscode-beginner/
추천 대상
- •프로그래밍을 처음 시작하는 완전 초보자
