오늘은 vscode 편집기에서 html 문서를 작성하다가, 바로 웹브라우저를 실행시킬 수 있는 방법에 대해 다루겠습니다.
open in browser 확장 플러그인
ctrl + shift + x로 마켓플레이스를 연 후 open in browser를 검색해서 TechER에서 만든 확장프로그램을 설치해줍니다.
저는 이미 설치해서 설치 버튼이 없는데, 아직 설치를 안하신 분은 녹색의 설치 버튼이 있을 것입니다. 설치하셨다면, 이제 alt + b의 단축키를 사용하면, html 문서에서 바로 디폴트 설정되어 있는 웹브라우저를 열 수가 있습니다. 저의 경우에는 크롬이 열리는데요, 만약 디폴트 설정되어 있는 웹브라우저 말고 다른 웹브라우저를 열고 싶다면, alt + shift + b를 이용하면 여러 종류의 브라우저 중에 선택할 수 있는 화면이 나옵니다.
이 중에서 원하는 웹브라우저를 선택하면, 해당 브라우저에서 html 파일이 열립니다. 웹 개발을 할 때 여러 웹브라우저에서 모두 잘 작동하는지 확인할 필요가 있기 때문에 유용한 기능입니다. 참고로 해당 PC에 설치되어 있는 브라우저만 열립니다. 설치되어 있지 않은 브라우저를 선택하면, 다음과 같이 경고 메시지가 출력됩니다.
배운 내용 정리
오늘 소개해드린 것을 마지막으로 정리하겠습니다.
1. open in browser 확장프로그램 설치.
2-1. alt+b: 디폴트 설정되어 있는 웹브라우저에서 html 파일 열림.
2-2. alt+shift+b: 여러 웹브라우저 중에서 선택된 웹브라우저에서 html 파일 열림.
'Editor > vscode' 카테고리의 다른 글
| [vscode] 한 줄 삭제 단축키 (0) | 2022.06.30 |
|---|---|
| [vscode] 어떤 행을 복사해서 다른 곳에 붙여 넣고 싶을 때 빠르게 하는 방법 (0) | 2022.05.14 |
| [vscode] html 문서에서 아이디 또는 클래스 부여한 div 요소 빠르게 생성하는 방법 (2) | 2022.04.09 |
| [vscode] 전체 프로젝트에서 어떤 단어를 검색하려면? (2) | 2022.04.04 |
| [vscode] html에서 여는 태그와 닫는 태그를 한 번에 수정하려면?, auto rename tag 확장 플러그인 (0) | 2022.04.03 |
| [vscode] 반복되는 단어 한번에 수정하는 방법 (12) | 2021.06.02 |
| [vscode] 비주얼 스튜디오 코드에서 Lorem ipsum 사용하려면 (4) | 2021.03.27 |
| [vscode] Beauty 플러그인으로 웹 언어 코드 자동 정렬하기 (2) | 2021.01.11 |