반응형
HTML/CSS 파일을 수정할 때마다 파일 → 브라우저 열기 → 새로고침 반복하는 거… 정말 귀찮죠? 😥
그럴 땐 Live Server 확장 프로그램을 설치하면 VS Code에서 저장만 해도 브라우저가 자동으로 새로고침됩니다!
이번 포스팅에서는 Live Server 설치부터 실습까지 차근차근 안내해드릴게요.
HTML을 자주 다루는 분들에겐 필수입니다 💡
1️⃣ Live Server 확장 프로그램 설치하기
- VS Code 왼쪽 확장 탭(네모 4개 겹친 아이콘) 클릭
- Live Server 검색 → 설치
설치만 해도 바로 사용 가능해요!
2️⃣ HTML 파일 열고 Live Server 실행하기
- .html 파일을 열기
- 우클릭 → Open with Live Server 클릭
- 또는 우측 하단 Go Live 버튼 클릭
이제 브라우저가 자동으로 열리고, 수정한 내용은 저장(Ctrl + S)만 해도 자동 반영됩니다!
3️⃣ 실습: 간단한 HTML 파일 만들어보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Live Server 테스트</title>
<style>
body { font-family: sans-serif; text-align: center; padding-top: 50px; }
h1 { color: #00aaff; }
</style>
</head>
<body>
<h1>Hello, Live Server!</h1>
<p>이 화면은 저장할 때마다 자동으로 바뀝니다 😄</p>
</body>
</html>
위 파일을 VS Code에 붙여넣고 Go Live 버튼을 눌러보세요.
브라우저에서 실시간으로 바뀌는 모습을 확인할 수 있어요.
4️⃣ Live Server 기본 포트와 설정 변경 (선택사항)
- 기본 포트: 5500
- 설정 바꾸려면 settings.json에서 다음처럼 입력:
"liveServer.settings.port": 3000
※ 포트 충돌 시 변경 필요할 수 있어요
🛠️ Live Server 사용 시 주의사항
- .html 파일이 저장된 폴더 전체를 VS Code로 열어야 정상 작동합니다
- 특정 브라우저로 열고 싶다면 기본 브라우저 설정을 바꾸면 됩니다
- JavaScript까지 포함된 파일도 자동 새로고침이 됩니다
✅ 마무리하며
Live Server는 초보자도 설치만 하면 바로 쓸 수 있는 강력한 도구입니다.
HTML/CSS 공부할 때, 미리보기 툴로 정말 추천드립니다.
이제 코딩 → 저장 → 브라우저 열기! 반복은 그만~
저장만 해도 실시간 반영되는 개발 환경으로 전환해보세요 😊
반응형
'Visual Studio Code' 카테고리의 다른 글
| VS Code 꾸미기 완전 정복! 테마, 단축키, 코드 스니펫까지 내 입맛대로 커스터마이징하기 (0) | 2025.07.05 |
|---|---|
| Prettier + ESLint 설정법! VS Code에서 자동 코드 정리하는 방법 완전 정복 (0) | 2025.07.04 |
| VS Code 추천 확장 프로그램 TOP 10 (2025 최신 업데이트) (0) | 2025.07.03 |
| VS Code에서 Git과 GitHub 한 번에 쓰기! 초보자도 깔끔하게 연결하기 (0) | 2025.07.02 |
| VS Code 완전 정복! 자주 묻는 질문 & 꿀팁 모음 (0) | 2025.06.18 |