Visual Studio Code 설치

안녕하세요.

 

오늘은 Front-End 개발 및 연습용으로 사용하기 좋은 IDE를 소개하고자 합니다.

바로 'Visual Studio Code'인데요.

 

Eclipse 및 IntelliJ도 사용하기 편안하지만, 프로그래밍 언어로 Back-End 로직을 짜는데 더 최적화되어 있죠.

반면, Visual Studio Code는 HTML과 Javascript, JQuery로 개발할 때 보다 편리한 파싱 기능과 플러그인을 제공합니다.

 

다음은 설치 순서입니다.

 

1. Visual Studio Code 홈페이지 접속

Visual Studio Code 메인화면

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

2. 다운로드 클릭

다운로드 버튼을 클릭하면 다음 화면으로 전환됨과 동시, 다운로드가 시작됩니다.

 

3. 실행파일로 설치

다운로드 시 지정된 데스크탑 디렉터리로 이동하여, 설치파일을 실행합니다.

그리고 다음과 같은 순서로 설치를 시작합니다.

설치 마법사 팝업시 다음 버튼 클릭

사용권 계약에 동의

Visual Studio Code를 설치할 개인 PC의 디렉터리 지정

 

바로 가기 시작 메뉴 폴더에 생성 (만들지 않을 경우, 하단의 '만들지 않음' 체크)

필요한 옵션이 존재하면 선택 후 다음 클릭, 아니면 그냥 다음 클릭

설치 버튼 클릭

설치 진행 바 화면

설치가 완료되면 다음과 마침 버튼을 눌러 종료

4. 기본 사용 폴더 생성하기

여기까지 완료되었다면, 프로젝트에 기본으로 사용할 폴더를 생성하는 작업을 진행하겠습니다.

프로젝트 폴더는 각자 사용하고 계신 OS의 디렉토리에서 직접 생성하셔도 되고, 

비주얼 스튜디오 그 자체에서 생성하셔도 상관 없습니다.

 

저는 개인 데스크탑의 '문서' 폴더에 'Practice'라는 폴더를 직접 생성하여 사용하겠습니다.

'내 PC > 문서'에 폴더 생성

이제는 만든 폴더를 비주얼 스튜디오에서 열어줍니다.

상단 메뉴의 'File -> Open Folder'를 선택해서 각자 만든 폴더를 열어주세요.

생성한 폴더 호출

생성한 폴더를 호출하면 다음과 같이 Explorer에 나타납니다.

5. 이멧(Emmet) 기능 사용하기

비주얼 스튜디오의 장점 중에 하나는 이멧(Emmet) 기능을 사용할 수 있다는 것입니다.

이멧이란, HTML 이나 CSS 등을 약식으로 표기하여 작성할 수 있는 기능입니다.

 

파일을 하나 만들어보겠습니다.

방금 생성한 폴더명인 'Practice' 우측의 첫 번째 아이콘인 'New File'을 선택합니다.

사용하고 싶은 파일명 뒤에 확장자를 '.html'로 붙여서 파일을 만들어줍니다.

이제는 html 모드로 편집이 가능한 상태가 되었습니다.

하지만 html의 기본 양식을 모두 외워서 하기에는 좀 그렇죠...?

(물론 완벽하게 알고 직접 코딩을 해도 좋지만, 기본적인 구조만 알면 된다고 생각합니다...)

그래서 이멧 기능을 사용해 보겠습니다.

간단히 html만 입력해주시면 드롭다운 목록으로 html, html:5, html:xml이 나타납니다.

이중에서, html:5를 선택합니다.

그 결과, 다음과 같이 12줄이 뚝딱 코딩되었습니다.

 

지금까지 Visual Studio 설치 방법 및 프로젝트 생성, 이멧(Emmet) 기능에 대해 알아보았습니다.