반응형
🧑💻 VS Code 설치 후 사용법 완전 정복 (입문자용)
“다운로드는 했는데, 뭘 눌러야 할지 모르겠어요…”
이제부터 처음 설치한 후 무엇부터 눌러야 할지,
기초부터 실전까지 하나씩 알려드릴게요!
✅ 1. VS Code 처음 실행하면?
설치 후 실행하면 이런 화면이 떠요👇
- 왼쪽은 메뉴바(파일, 확장 기능, 소스 관리 등)
- 가운데는 작업 영역
- 우측 하단엔 업데이트나 알림창이 있을 수 있어요
✅ 2. 한국어로 바꾸기 (한글화)
- 왼쪽 메뉴 중 네모 아이콘(확장 기능) 클릭
- 검색창에 korean 입력
- Korean Language Pack for VS Code 설치
- 설치 후 재시작(Restart) 클릭
✅ 3. 폴더 열기 (작업 시작하기)
- 왼쪽 상단 [파일 > 폴더 열기] 클릭
- 바탕화면 등 원하는 폴더 선택
- → 해당 폴더가 VS Code에 열립니다!
💡 Tip: 파일 하나 열기보단 폴더 전체 열기가 효율적이에요.
✅ 4. 새 파일 만들기 & 저장
- 왼쪽 사이드바에서 오른쪽 클릭 → 새 파일
- 이름을 index.html 또는 main.py 처럼 확장자까지 작성
- Ctrl + S 로 저장
✅ 5. 확장 기능 설치 (초보자 필수)
이름기능설명
| Live Server | HTML 실시간 미리보기 | 웹 파일 저장 → 바로 브라우저에 반영 |
| Prettier | 코드 자동 정리 | 보기 좋게 정렬해줌 |
| Auto Rename Tag | 태그 자동 짝 맞추기 | <div> 수정하면 </div>도 자동 변경 |
설치 방법:
- 왼쪽 확장 기능 탭(네모 아이콘) 클릭 → 이름 검색 → [설치] 버튼 클릭
✅ 6. HTML 실습 예제
- 새 파일 만들기 → 이름을 index.html로 저장
- 아래 코드 입력:
html
복사편집
<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Hello, VS Code!</h1> </body> </html>
- 파일 우클릭 → "Open with Live Server" 클릭
- 브라우저에서 바로 웹페이지가 실행됩니다 🎉
✅ 7. 터미널 열기 & 명령어 실행 (코딩 도전 단계)
- 상단 메뉴 → [터미널 > 새 터미널]
- 하단에 명령어 입력 칸이 생김
- 예: echo Hello World
💡 Java, Python 등은 여기에 javac, python 같은 명령어를 입력해 실행합니다.
✅ 8. 폰트 & 테마 설정 (가독성 업그레이드)
- [파일 > 기본 설정 > 설정]
- "Font Family" → D2Coding, Fira Code 추천
- [파일 > 테마 선택 > 색 테마] → 다크 테마 추천 (눈 편함)
📌 정리: 처음 VS Code로 할 수 있는 기본 루틴
✅ 폴더 열기 →
✅ 새 파일 만들기 →
✅ 확장 기능 설치 →
✅ 간단한 코드 입력 →
✅ Live Server로 실행 →
✅ 터미널 실습
🔥 VS Code에서 직접 써볼 수 있는 기초 코드 예시 5가지
✅ HTML / CSS / JavaScript / Python / Java
✅ 1. HTML 예시 – 나만의 웹페이지 만들기
html
복사편집
<!DOCTYPE html> <html> <head> <title>나의 첫 웹페이지</title> </head> <body> <h1>안녕하세요!</h1> <p>이것은 HTML로 만든 문장입니다.</p> </body> </html>
📌 index.html로 저장 → Live Server로 실행
✅ index.html로 저장 → Live Server로 실행하는 이유와 방법
📌 왜 index.html로 저장할까?
- 웹사이트의 기본 시작 파일로 인식되기 때문이에요.
- 브라우저나 서버는 자동으로 index.html을 가장 먼저 찾아요.
➡ 따라서 파일 이름을 index.html로 저장하면 바로 실행 가능해요!
⚡ Live Server로 실행하는 이유?
- 매번 새로고침 없이 HTML 파일을 실시간으로 확인할 수 있어요.
- 코드 수정 → 자동 새로고침 → 빠르게 결과 확인 가능!
🛠 실행 방법 (간단 3단계)
- VS Code에서 index.html 파일 저장
- 우클릭 → “Open with Live Server” 클릭
- 브라우저에서 바로 웹페이지 실행! 🎉
💡 Tip: Live Server가 없다면
→ 왼쪽 확장 기능 탭(네모 아이콘) 클릭 → Live Server 검색 후 설치!
한 번만 설치하면 계속 사용할 수 있어요 😊
✅ 2. CSS 예시 – 웹페이지 스타일 입히기
html
복사편집
<!DOCTYPE html> <html> <head> <style> body { background-color: #f0f0f0; font-family: sans-serif; } h1 { color: royalblue; text-align: center; } </style> </head> <body> <h1>스타일이 적용된 웹페이지</h1> </body> </html>
📌 style.html로 저장 후 실행
✅ 3. JavaScript 예시 – 버튼 클릭 이벤트
html
복사편집
<!DOCTYPE html> <html> <body> <button onclick="sayHello()">누르면 인사하기</button> <script> function sayHello() { alert("안녕하세요! 자바스크립트입니다."); } </script> </body> </html>
📌 script.html로 저장 후 실행
✅ 4. Python 예시 – 간단한 계산기
python
복사편집
# calculator.py print("숫자 1을 입력하세요:") a = int(input()) print("숫자 2를 입력하세요:") b = int(input()) print("두 수의 합은:", a + b)
📌 calculator.py로 저장 →
VS Code 터미널에서:
bash
복사편집
python calculator.py
✅ 5. Java 예시 – Hello Java!
java
복사편집
// Hello.java public class Hello { public static void main(String[] args) { System.out.println("안녕하세요, 자바 세계!"); } }
📌 Hello.java로 저장 →
터미널에서 아래 명령어 실행:
bash
복사편집
javac Hello.java java Hello
💡 팁: VS Code에서 파일 이름 저장 시 확장자 주의!
언어확장자 예시
| HTML | index.html |
| CSS 포함 | style.html |
| JavaScript 포함 | script.html |
| Python | example.py |
| Java | Main.java |
반응형