[HTML] 라이브 서버 단축키로 이용하기

라이브 서버 단축키로 실행

마우스는 키보드보다 생산성이 떨어집니다. 단축키를 사용하면 마우스 사용보다 빠르게 기능을 수행할 수 있습니다. 'Go Live' 버튼을 클릭하는 것보다 키보드로 'Ctrl + Shift + P'를 누르고 나타나는 콘솔 창에 'Live Server'를 검색합니다. 'Live Server: Open with Live Server'를 선택합니다. 열려있는 폴더와 파일들을 모두 라이브 서버에서 확인할 수 있습니다.

라이브 서버로 확인된 폴더

 

문제는 작업자가 원하는 폴더가 아니라는 것입니다. 이때 사용하는 방법도 단축키를 이용하면 해결됩니다. 단축키 'Ctrl + Shift + P'를 눌러 나오는 콘솔에 'Live Server'를 검색하면 나오는 항목에서 'Change Live Server Workspace'를 선택하고 해당 폴더를 적어주면 해결됩니다.

변경된 폴더

 

변경 후에 우하단의 'Go Live'로 확인하면 해당 폴더의 웹문서가 얼굴을 내밉니다. 결과 화면을 보면 소스에서는 줄 바꿈이 됐지만 브라우저에서 보이는 화면은 줄 바꿈이 없습니다. 

브라우저에서 확인된 결과

 

줄 바꿈은 웹문서에서는 태그를 통해 이루어집니다. 소스의 두 문장 사이에 br 태그를 추가하면 다음과 같이 브라우저에서도 줄이 바뀌어서 출력됩니다. 실시간으로. 아니, 약간의 시간 텀은 있습니다.

변경된 브라우저

 

정리

라이브 서버는 실시간으로 문서의 변경 상황을 확인할 수 있는 유용한 기능입니다. 웹문서를 작성하는 개발자에게는 꼭 필요한 VSCoce 확장 기능입니다. 단축키 'Ctrl + Shift + P'와 함께 익혀두면 편리할 것입니다.