HTML 코딩을 위한 VSCODE 설치 및 환경 설정

1. VSCode 다운로드 하기 

    아래의 주소를 클릭해서 VSCODE 먼저 다운로드 합니다.

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

2. VSCODE 설치진행

      가. 다운로드 받은 파일을 클릭해서 설치 진행합니다.

      나. 경로는 기본경로를 써도 되나 저의 경우는 C드라이브 바로 밑에 설치 하기로 하겠습니다.     

      다. 시작 메뉴 폴더는 기본으로 그리고 바탕화면에 바로가기 만들기를 하도록 하겠습니다.

      라. 설정이 끝났으므로 설치 버튼을 클릭하여 설치를 진행합니다.

3. VSCODE HTML 개발환경으로 설정하기

      프로그램을 실행하면 제일 먼저 해야 할 일은 HTML 개발을 쉽게 도와주는 확장프로그램을 설치해야 합니다. 크게              Korean Lange pack, Live Preview, Prettier, vscod-icons 총 4가지 확장프로그램을 설치할 것입니다.

바탕화면의 아이콘을 클릭하여 프로그램을 실행합니다.

      가.  처음 시작화면입니다. 왼쪽 제일 하단의 Extensions 아이콘을 클릭하여 확장프로그램을 설치하시기 바랍니다.

      나. Korean Lange Pack

메뉴를 한글로 바꿔주는 프로그램입니다 . 영어 메뉴가 더 좋으신분들은 패스 하시면 되겠습니다 .

      다. Live Preview

HTML 작성 시 실시간으로 확인할 수 있는 미리보기 창을 만들어주는 프로그램입니다.

      라. Prettier

코딩 포맷터 프로그램입니다. 개발자들마다 코딩 스타일이 다를 경우가 있는데, 배우는 입장의 초보분들은 그냥 Prettier 기본 설정대로 코딩을 하시면 되겠습니다 .

      마. VSCODE-ICONS

VSCODE 트리에 아이콘을 넣어 좀더 파일을 직관적으로 볼수 있게 해주는 프로그램입니다. 굳이 필요 없으면 패스하셔도 됩니다 .

 

이제 HTML 공부 및 개발을 위한 준비가 끝났습니다.

다음시간에는 본격적으로 HTML 태그에 대해 공부하도록 하겠습니다.