ICT/IDE
VSCode | Live Preview | 실시간으로 html 확인하는 방법
dazwischen
2022. 7. 15. 20:22
반응형
실시간으로 html 확인하기
html 작성을 하면서 의도한 대로 작성이 되었는지 확인하기 위해 빈번하게 브라우져를 켜는 일이 생기곤 한다. 많이 작성하고 한 번씩 볼떄는 그래도 할만한데 한 가지를 수정하기 위해 매번 브라우저와 에디터를 옮겨다니는 건 여간 번거로운일이 아니다. 본 포스팅에서는 그 문제를 깔끔하게 VSCode 내에서 해결하는 방법에 대해 소개하려고 한다.
Live Preview
원하는 기능을 제공하는 Extension은 "Live Preview"이다.
설치 방법
VS 코드를 실행했을 때 왼편 맨 아래 사각형 4개 모양의 아이콘을 누르면 EXTENSIONS 메뉴가 뜨면서 검색어 입력창을 찾을 수 있다. 이 검색창에 "live preivew"라고 검색한다.
첫 번째 파란색 아이콘의 Live Preview를 Install 버튼을 눌러 설치해 준다.
설치가 완료 된 후 html을 작서해본다. 그런 다음 오른쪽 위에 사각형에 돋보기 모양이 있는 아이콘을 클릭해 본다.
그럼 아래와 같이 화면이 둘로 나뉘고 오른쪽 화면에서 작성한 html을 볼 수 있다.
이로써 더이상 브러우저로 옮겨다니는 수고를 조금은 덜 수 있게 됐다.
반응형