VS Code 웹 개발 기본 셋팅
좋습니다 👍 웹 개발용으로 VS Code를 시작할 때 필요한 기본 셋팅을 단계별로 정리해드릴게요. 이 셋팅만 해도 HTML/CSS/JS 프로젝트를 바로 시작할 수 있습니다.
🛠️ VS Code 웹 개발 기본 셋팅
1. VS Code 설치 & 환경 설정
- VS Code 다운로드: Visual Studio Code 공식 사이트에서 설치
- 한국어 패키지:
Korean Language Pack설치 → 인터페이스 한글화 - 테마/아이콘팩:
Material Theme,Material Icon Theme추천 → 코드 가독성 ↑
2. 필수 확장 기능 설치
- Live Server
→ HTML 파일 저장 시 자동으로 브라우저 새로고침 - Prettier – Code formatter
→ 코드 자동 정렬 (HTML/CSS/JS 모두 지원) - ESLint
→ JS 코드 오류 및 스타일 검사 - Auto Rename Tag
→ HTML 태그 열고 닫기 자동 동기화 - Path Intellisense
→ 이미지·CSS·JS 파일 경로 자동완성
3. 프로젝트 기본 구조 만들기
my-web-project/
├── index.html
├── style.css
└── script.js
- index.html: 기본 HTML 문서
- style.css: 디자인 스타일 정의
- script.js: 동적 기능 구현
4. 기본 HTML 템플릿
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>My Web Project</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, Web!</h1>
<script src="script.js"></script>
</body>
</html>
5. 실행 & 테스트
- VS Code에서
index.html열기 → 우클릭 → Open with Live Server - 브라우저에서 자동 새로고침 확인
- CSS/JS 수정 시 바로 반영됨
🚀 학습 팁
- Day 1–2: HTML 기본 태그 연습
- Day 3–4: CSS 레이아웃, Flexbox/Grid 익히기
- Day 5–7: JS DOM 조작, 이벤트 핸들링 실습
👉 원하시면 제가 **7일 웹 개발 학습 플랜 (HTML/CSS/JS)**을 VS Code 환경에 맞춰 구체적으로 짜드릴 수 있습니다.
