[VS Code] VS Code HTML양식 불러오기 & 실시간 확인 설정(Live Server 설정)

1. VS Code HTML 양식 불러오기

VS Code로 javascript를 공부하던 중 편하게 html 문을 작성하여 사용할 수 있어 블로그를 찾아오신 분들께 공유한다!

 

처음 VS Code를 실행 후 폴더를 지정해 놓으면 아래 사진과 같이 나오게된다.

 

해당 아이콘을 클릭하여 새로운 File을 .html확장자로 만들어 준다.

 

 

해당 파일에서 !를 입력(혹은 html:5를 입력) 후 Enter 혹은 TAB을 누르면 아래 사진과 같이 HTML 양식이 만들어진다.

 

 

 

2. 실시간 확인 설정 (Live Server 설정하기)

javascript를 공부하면서 실시간으로 변경된 내용을 확인할 수 있는 방법이 있나 찾아보다가 Live Server설정이 있어 공유한다.

 

 

View -> Extensions 혹은 왼쪽에 퍼즐 모양을 클릭해 주면 Extensions를 install 할 수 있는 창이 보이게 된다.

검색창에 Live Server를 검색하면 아래 사진과 같이 뜨게 된다.

 

 

 

필자는 Live Server를 미리 설치하여 톱니바퀴가 뜨지만, 설치를 하지 않은 분들은 Install이라는 버튼이 있을 것이다.

Install 클릭!

 

 

그 후 화면으로와 오른쪽 클릭을 해보면 Open with Liver Server라는 탭이 활성화되어있을 것이다.

 

해당 html 화면을 보려면 Open with Live Server를 클릭 혹은 Alt+L, Alt+O 를 차례대로 눌러주면 아래와 같이 화면이 뜨게 된다.

 

여기까지 왔다면 완료!!

 

파일을 수정할 시 저장버튼만 눌러도 이 화면에 적용되어 나타나니 편하게 개발을 할 수 있다!

 

 

---

** 참고자료 **

 

https://nantes.tistory.com/139