[vscode] 코드 Live Server 사용하기, 실시간 미리보기

안녕하세요.

오늘은 vscode에 실시간 미리 보기 확장 프로그램에 대해 알아보겠습니다.

 

vscode에 extensions: marketplace를 선택해 Live Server를 검색해주세요.

그리고 install 버튼을 눌러 설치해주세요.

 

 

 

아래와 같이 install 버튼이 uninstall로 변경되면 HTML 파일로 돌아와주세요. 

 

 

 

HTML 파일에서 Live server 시작을 해보도록 하겠습니다.

단축키를 사용하셔도 되고 마우스 클릭 버튼을 사용하셔도 됩니다.

 

ㅡ 단축키 ㅡ 

window : alt + L → alt + O

mac : command + L → command + O

 

ㅡ 마우스 ㅡ

마우스 오른쪽 클릭 후 Open with Live Server 를 클릭해주세요.

 

 

 

그럼 Live server에서 127.0.0.1:5500에 서버를 통해 HTML 파일을 보여줍니다.

코드 수정하신 후 저장을 하시면 Live server를 통해 자동으로 반영되어 나타냅니다.

 

 

 

부족한 부분이나 설명이 잘못된 부분이 있으면 댓글을 통해 알려주세요.

감사합니다. ♥