교육 준비: Node.js 및 Visual Studio Code 설치

1. Node.js 설치

https://yoolabong.tistory.com/entry/Nodejs-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EB%B0%8F-%EC%84%A4%EC%B9%98

Nodejs 다운로드 및 설치

 

2. Visual Studio Code 설치

1. VS Code 사이트 접속 및 설치파일 다운로드

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

2. 설치 파일 실행

동의 후 다음

다음

다음

옵션 설정 후 다음

설치

3. 플러그인 설치

태그 네인 자동 수정을 위한 익스텐션

 

CSS에서 HTML 클래스 자동 완성 익스텐션

 

HTML에서 CSS 클래스 자동 완성

 

CSS 밴더 프리픽스 자동 처리

CSS 파일 포커스된 상태에서 command pallete(또는 Ctrl + Shift + P) 선택 후 Autoprefixer: run 선택해서 밴더 프리픽서 자동 적용

 

중괄호 컬러 디자인 적용

중괄호를 편리하게 구분하기 위해 컬러를 적용하는 익스텐션인데 현재는 VSCode에 내장되어있다고 함

그래서 Setting에서 Bracket Paires Enable로 변경

 

들여쓰기 컬러 디자인 적용

Bracket Pair Colorizer와 동일하게 코드 블럭 구분을 편하게 하기 위해 적용하는 익스텐션

 

실시간 웹 브라우저

command pallete(또는 Ctrl + Shift + P) 선택 후 live server: Opend with live server 선택하면 코드 수정 자동 적용되는 브라우저 새로 띄워줌.