VSCode | Live Preview | 실시간으로 html 확인하는 방법

vscode live preview

실시간으로 html 확인하기

html 작성을 하면서 의도한 대로 작성이 되었는지 확인하기 위해 빈번하게 브라우져를 켜는 일이 생기곤 한다. 많이 작성하고 한 번씩 볼떄는 그래도 할만한데 한 가지를 수정하기 위해 매번 브라우저와 에디터를 옮겨다니는 건 여간 번거로운일이 아니다. 본 포스팅에서는 그 문제를 깔끔하게 VSCode 내에서 해결하는 방법에 대해 소개하려고 한다.

Live Preview

원하는 기능을 제공하는 Extension은 "Live Preview"이다.

설치 방법

VS 코드를 실행했을 때 왼편 맨 아래 사각형 4개 모양의 아이콘을 누르면 EXTENSIONS 메뉴가 뜨면서 검색어 입력창을 찾을 수 있다. 이 검색창에 "live preivew"라고 검색한다.

live viewer 검색

첫 번째 파란색 아이콘의 Live Preview를 Install 버튼을 눌러 설치해 준다.

live preview 설치

설치가 완료 된 후 html을 작서해본다. 그런 다음 오른쪽 위에 사각형에 돋보기 모양이 있는 아이콘을 클릭해 본다.

html 작성

그럼 아래와 같이 화면이 둘로 나뉘고 오른쪽 화면에서 작성한 html을 볼 수 있다.

html live preview

이로써 더이상 브러우저로 옮겨다니는 수고를 조금은 덜 수 있게 됐다.