자신의 일은 스스로하자

[HTML] #1 Visual Studio Code 다운로드/기본 설정[스마트인재개발원] 본문

HTML, CSS

[HTML] #1 Visual Studio Code 다운로드/기본 설정[스마트인재개발원]

힐파르 사막 삼계탕 2021. 6. 1. 16:06
728x90

HTML이란?

 

HTML(HyperText Markup Language)하이퍼텍스트 마크업 언어는 윕 페이지를 위한 지배적인 마크업 언어입니다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용 등의 항목으로 구조적 문서를 만들 수 있는 방법을 제공합니다. 또한 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있습니다.

 

 

이제 HTML을 시작하기 위해 기본 설정을 해보겠습니다.


 

1. 크롬 설치

 

크롬은 현재 가장 많은 HTML 기능을 지원하는 웹 브라우저입니다. 만약 크롬이 설치 되어 있다면 기본 웹 브라우저를 크롬으로 바꿔줍니다.

 


2. Visual Studio Code 설치

 

이제 본격적으로 통합 개발 환경을 다운로드 받겠습니다. Visual Studio Code는 일렉트론으로 개발된 프로그램이라 Windows, MacOS, 리눅스 등을 모두 지원합니다. 

 

 

자신의 운영체제에 맞게 다운로드 되므로 다운로드를 선택하여 받아주시면 됩니다.

 

 

 

 

동의합니다를 선택하고 모두 기본 설정으로 진행하여도 문제없습니다.

 

 

 

 

이렇게 설치가 완료되었다면 Visual Studio Code를 실행합니다.

 

 

Visual Studio Code를 실행했을 때 초기 화면입니다. 

 


 

3. Visual Studio Code 플러그인 다운로드

 

이제 Visual Studio Code를 조금 더 편리하게 사용하기 위해 몇 가지의 플러그인을 다운로드합니다. 

 

 

  •  Korean Language Pack : 한국어로 Visual Studio Code의 UI 환경을 제공해 줍니다.

 

왼쪽에 있는 아이콘 중 맨 아래에 있는 아이콘을 클릭 후 사진의 순서대로 진행합니다.

설치가 완료되면 오른쪽 하단에 Restart를 클릭해 재시작하면 초기 화면이 한국어로 변한 것을 볼 수 있습니다.

 

 

  •  Liver Server : 실행한 페이지의 코드 내용을 바꿔 저장하면 실시간으로 다시 로드해주는 기능

 

  •  material Icon Theme : 실행 프로그램의 아이콘을 보여줍니다.

 

  •  Auto Rename Tag :  쌍을 이룬 HTML/XML 태그 이름을 자동으로 변경해줍니다.

 

 

스마트인재개발원에서 진행된 수업입니다.

http://www.smhrd.or.kr

 

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

 

728x90