[VS Code] Live Server로 html 문서 확인하기

[VS Code] Live Server로 html 문서 확인하기

VS Code에서는 html, css, js 작성 편집이 가능하다.

하지만 IDE 안에서 코드를 바꾸었을 때, 즉각적으로 바뀐 부분을 확인하기 어렵다.

 

물론 새로고침을 하면서 localhost를 활용하는 방법도 있지만,

VS Code를 쓰고 있다면, extension 하나를 설치하는 것만으로도 편리함을 얻을 수 있다.

우클릭 후 'Open with Live Server'를 누르거나, cmd + l -> cmd + r을 누르는 것으로 html 문서를 열어볼 수 있다.

 

아래에서는 Live Server로 html 문서를 확인하는 방법과 기본 브라우저 세팅을 바꾸는 방법에 대해 알아볼 것이다.

 

 

1. Live Server extension 설치

 

2. html 문서에서 우클릭 후 'Open with Live Server' 클릭

 

 

3. 본인이 만든 페이지 확인

 

 

++ 기본 브라우저 크롬으로 바꾸는 방법

 

1. 상단의 바에서 '기본 설정 - 설정' 클릭(macOS 기준)

 

윈도우도 이 위치와 비슷한 곳에 있다.

 

 

2. 상단 탭에 live server 입력 후 Live Server Config 부분에서 Settings : Custom Browser 클릭

 

3. 원하는 브라우저를 누르고 설정 저장하기