[Visual Studio code] vs code 설치 및 html 설정

vs code 다운로드

 

아래의 이미지 따라 설치 진행

 

운영체제에 맞춰 프로그램을 내려받는다.

 

내려 받은 설치파일을 실행한다

 

 

위치를 따로 지정할 것이 아니면 기본 설정된 경로에 설치하면 된다.

 

시작 메뉴 폴더를 선택하는 화면이 보이는데 변경할 내용이 없으므로 [다음] 버튼을 클릭한다

 

추가 작업을 선택하는 화면이 보이면 위의 이미지 처럼 모든 체크 박스를 선택한 후 [다음]을 클릭한다.

 

설정한 내용을 확인하고 [설치] 버튼을 클릭해 설치를 진행한다.

 

설치가 끝나면 Visual Studio Code 실행을 선택한 상태로 [종료] 버튼을 클릭한다.

 

 

VSCode 확장 프로그램 설치하기

 

 

그 외

Live Server/Ritwick Dey

 - 작성한 HTML 코드를 실시간으로 확인할 수 있는 확장 프로그램으로 코드를 작성하고 저장하면 Live Server와 연동된

    HTML 문서가 실시간으로 반영되어 실행결과를 즉시 확인 가능하다.

 

Auto Rename Tag/Jun Han

 - 시작 태그와 종료 태그는 항상 같은 태그명이어야 하는데 만약 시작 태그나 종료 태그 둘 중 한쪽을 변경하면

    다른쪽 태그명도 변경해야 하는데 이 때 자동으로 한쪽이 수정되게 설정 할 수 있다.

 

HTML to CSS autocompletion/solnurkarim

 - HTML 문서에서 class 속성으로 작성한 값을 연결된 CSS 파일에서 자동 완성되도록 지원한다.

 

HTML CSS Support/ecmel

 - CSS 파일에서 작성한 클래스나 아이디 선택자 값을 연결된 HTML 문서의 id 속성과 class 속성값으로 적을 때 자동 완성 지원한다.

 

Code Runner/Jun Han

- 자바 스크립트 코드의 실행을 VSCode 내부에서 할 수 있게 지원한다. 자바 스크립트를 공부할 때 유용하다.