VSCode Extention for HTML
html 및 css 코드를 편하게 작성할 수 있도록 vscode 확장팩을 설치합니다.
Bracket Pair Colorization Toggler
코드블럭을 표현할때 시작
과 끝
을 쉽게 찾을 수 있도록 색상으로 분리하여 표시를 합니다.

indent-colorizer
들여쓰기를 할때 다양한 칼라로 코드의 정렬 위치를 파악할 수 있습니다.

Auto Rename Tag
HTML은 한 쌍의 테그로 작성이 됩니다. 만일 시작 테그를 변경하면, 대칭되는 종료 테그도 자동으로 변경을 해주게 됩니다.

auto Close Tag
자동으로 테그를 닫아 줍니다.

htmltagwrap
만일 엘리먼트를 감쌀때 여러분은 어떻게 하는가?
수동으로 일일히 태그를 적어주어 포함시키는데, 이제는 블록을 감쌀때 더이상 이리저리 마우스 키보드 조작 할 필요없이 단축키 하나만으로 감쌀 수 있다.

Highlight Matching Tag
여러 태그가 중첩되어 있을 때 해당 태그의 끝이 어디인지 찾기 힘들 때가 있다. 그럴 때 쌍이 되는 태그를 표시해 주는 플러그인이다.
vs code 자체에도 태그를 누르면 하이라이트가 되는 기능이 포함되어 있지만 해당 태그의 이름(div, p, input 등)을 눌러야지 표시가 된다. 하지만 이 익스텐션은 태그 내 아무곳이나 눌러도 태그를 하이라이트 표시해서 블록을 쉽게 알수 있게 한다.

CSS Peak
HTML 문서에서 사용되는 css를 쉽게 찾아 줄수 있는 확장 패키지 입니다. css 클래스를 crtl
+ 클릭
형태로 바로 갈 수 있습니다.

HTML to CSS autocompletion
HTML문서에서 먼저 CSS 클래스를 사용하고, CSS 문서를 사용할때 자동으로 클래스명을 완성해 줍니다.
CSS Peak과 반대로 css가 사용된 html의 위치를 찾아 줍니다.

HTML CSS Support
CSS 스타일된 클래스를 HTML에서 쉽게 바로 쓸수 있도록 자동완성을 지원합니다.

Live Server
HTML 문서를 로컬 웹서버로 실행을 할 수 있으며, 수정중에도 새로고침 없이 바로 수정된 내용을 확인할 수 있습니다.

코드를 보기 좋게 정렬해 주는 확장 기능입니다.

vscode 환경설정에서 format on save
을 검색합니다. 이부분을 체크 합니다.

선택 : prettier single quote 를 체크합니다. 더블 따옴표를 단일 따옴포를 변경합니다.
default fomatter 에서 prettier 로 설정을 합니다.

Prettier php 플러그인 설치
Lorem

image preview
- 코드라인 번호 왼쪽에 이미지가 나타난다.
- 이미지 url에 마우스를 올려놓으면 프리뷰 이미지를 볼수 있다.

color Highlight

