부트스트랩 자동완성, 새로고침 없이 바로 페이지 확인

1. 부트스트랩 자동완성 하는법

 - 확장탭에 들어간다(vscode 왼쪽에 순서대로 파일, 돋보기, 깃, 디버그, 확장, 원격이 있음 확장탭 클릭)

 - css를 검색하고 첨부된 이미지와 같은 확장(HTML CSS Support)을 저장한다.

 - 이후 settings.json을 열어서 설정한다.
 - settings.json은 왼쪽 하단에 톱니바퀴 모양에서 Settings를 연뒤, 우상단 파일에 화살표있는 모양을 클릭하면 열 수 있다.

톱니바퀴를 클릭한 뒤, Settings(글자)를 클릭한다. 이후 열린창에서 우상단을보면 아래 이미지가 보일 것이다.

 

우상단에 있는 이 이모티콘을 클릭해야 settings.json을 열 수 있음

 - 그 뒤 아래와 같이 설정을 추가한다.

"css.styleSheets": ["https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"]

 - 이후 vscode를 껐다가 다시 켜면, class내에서 부트스트랩이 자동완성 되는 것을 알 수 있다.

 

 

 

 

 

 

 

 

 

 

2. 크롬 새로고침 없이 vscode에서 저장만으로 바뀐 화면 확인하는 방법

 - 확장탭에 들어가서 live검색 후, 위 화면에서 Live Server 다운로드
 - 이후 html파일에서 우클릭한뒤, Open with Live Server를 클릭하면 html파일이 하나 뜨게 됨
 - html 파일을 변경하고, 저장하면 실시간으로 적용이 되는 것을 볼 수 있음