비주얼 스튜디오 코드 기초 사용법 & 단축키 요약

https://code.visualstudio.com/

 

1️⃣ 설치 방법

· “Download for Windows” 클릭

· 설치 후 실행

· 한국어로 바꾸기 → 좌측 하단 ⚙️ 아이콘 → Command Palette

→ language 검색→ “Install Language Pack” → Korean Language Pack 설치

​

2️⃣ 새 HTML 파일 만들기

· 파일 → 새 파일 (Ctrl + N)

· 다른 이름으로 저장 (Ctrl + S)

이름: index.html

· 파일 확장자 .html​ 로 저장해야 HTML 자동 인식됨

· ! 입력 후 Tab → HTML 기본 구조 자동 완성됨

​

​

3️⃣ 화면 구성 기본

영역	설명
왼쪽 탐색기	폴더, 파일 구조
중앙 코드 영역	실제 코드를 작성하는 곳
아래 터미널	코드 실행/오류 메시지 확인
오른쪽 미니맵	전체 코드 미리보기
좌하단 상태 표시줄	파일 인코딩, 언어, Git 상태 등 표시

​

​

4️⃣ 기본 세팅 (초기 설정 필수)

1. Live Server 확장 설치

→ 좌측 아이콘바에서 “Extensions(블록 모양)” 클릭

→ “Live Server” 검색 후 설치

→ HTML 파일 열고 우클릭 → “Open with Live Server” → 브라우저에서 바로 미리보기!

2. 자동 줄바꿈 설정

→ Ctrl + , (설정 열기) → “word wrap” 검색 → on 선택

3. 자동 저장 켜기

→ 설정에서 auto save 검색 → “afterDelay” 선택

​

​

5️⃣ 자주 쓰는 단축키

기능	단축키	설명
새 파일	Ctrl + N	새 파일 만들기
파일 저장	Ctrl + S	저장
전체 저장	Ctrl + K → S	모든 파일 저장
실행(라이브서버)	Alt + L → Alt + O	Live Server로 미리보기
여러 줄 선택	Alt + 드래그	커서 여러 개
줄 복사	Shift + Alt + ↓	한 줄 복제
줄 이동	Alt + ↑ / ↓	줄 위아래 이동
자동 정렬	Shift + Alt + F	코드 자동 줄맞춤
주석 처리	Ctrl + /	선택한 줄 주석 처리
찾기	Ctrl + F	문서 내 단어 검색
전체 바꾸기	Ctrl + H	단어 일괄 교체
파일 열기	Ctrl + O	파일 불러오기
폴더 열기	Ctrl + K → Ctrl + O	폴더 단위로 열기

​

6️⃣ 자주 쓰는 HTML 자동완성

입력	Tab 결과
!	HTML 기본 구조
p	<p></p>
h1	<h1></h1>
div	<div></div>
img	<img src="" alt="">
a	<a href=""></a>