비쥬얼 스튜디오 코드 설치 및 기본세팅 | html #2

jeahyun

·

이번 시간에는 지난 글이었던 HTML이란 무엇인가에 이어서 웹퍼블리싱 및 개발을 위해 기초적으로 학습해야 하는 ‘마이크로소프트 비쥬얼 스튜디오 코드 설치 및 기본세팅’ 과정에 대해 정리해보려 한다.

주의사항과 함께 초보자들도 쉽게 따라할 수 있을 정도로 쉽게 정리해 볼테니, 필요한 사람들은 천천히 따라오면 되겠다.

비주얼 스튜디오 코드 설치 방법

비쥬얼 스튜디오 코드 설치 방법

가장 먼저 구글 검색창에 ‘visual studioc code’를 검색한다. 이때 가능하면 크롬 브라우저로 실행하는 것이 좋다.

또는 아래 링크를 누르면 곧바로 비쥬얼 스튜디오 코드 홈페이지로 접속이 가능하다.

비쥬얼 스튜디오 코드 설치 바로가기

비쥬얼 스튜디오 코드 설치 방법 2 1

비쥬얼 스튜디오 코드(Visual Studio Code)를 검색했을 때 가장 상단에 노출되는 웹사이트로 접속해 준다.

비쥬얼 스튜디오 코드 설치 방법 3 1

그리고 나서 윈도우os 사용자들일 경우 화면에 보이는 ‘Download for Windows’ 버튼을 클릭하면 되는데, 만약 맥이나 리눅스를 사용하는 유저들인 경우 우측에 화살표 버튼을 누르면 아래와 같이 다운로드 탭이 열리니까 참고하면 된다.

비쥬얼 스튜디오 코드 설치 방법 4 1
비쥬얼 스튜디오 코드 설치 방법 6 1
비쥬얼 스튜디오 코드 설치 방법 5 1

그리고 나서 다운로드를 진행하면 되는데, 이때 “Code(으)로 열기” 작업을 WIndow 탐색기 …..” 체크 박스를 둘 다 활성화 해준다. 이렇게 하는 이유는 추후 프로그램을 활성화 시킬 때 훨씬 더 편리하게 하기 위함이다.

비쥬얼 스튜디오 코드 설치 방법 7 1

이후 설치가 완료되면 비쥬얼 스튜디오 코드를 실행시키면 되는데, 처음 실행할 때 뜨는 창은 끄고 기본 세팅을 위해 좌측 하단의 톱니바퀴 모양 버튼을 눌러준다.

비쥬얼 스튜디오 코드 설치 방법 8 1

그리고 Themes > Color Theme(컬러 테마) 탭을 클릭하여, 비쥬얼 스튜디오 코드 프로그램의 기본 테마 컬러를 설정한다.

비쥬얼 스튜디오 코드 설치 방법 9 1

여기서 어두운 테마가 눈이 편한 사람들은 어두운 테마를 선택하면 되고, 환한 테마가 편한 사람들은 화이트 모드로 변경해주면 된다.

그리고 추가로 메인화면에서 컨트롤(ctrl) 단축키를 누르고 플러스(+), 마이너스(-)를 조절하면 화면의 레이아웃도 자유자재로 설정할 수 있다.

비쥬얼 스튜디오 코드 설치 방법 10 1

그리고 다시 추가적으로 익스텐션(Extensions) 프로그램 2개를 설치하기 위해, 좌측 하단의 톱니바퀴 모양을 눌러서 ‘Extensions’ 탭을 클릭한다.

비쥬얼 스튜디오 코드 설치 방법 11 1

여기서 좌측 상단에 ‘open in browser’를 검색한다.

비쥬얼 스튜디오 코드 설치 방법 12 2

open in browser 익스텐션은 HTML 코드를 작성하고 마우스 우클릭을 하게 되면 웹 페이지를 볼 수 있는 기능이 탑재되어 있다. 따라서 비쥬얼 스튜디오 코드를 처음 설치할 때 미리 세팅해 두면 두고 두고 편한 기능이다.

비쥬얼 스튜디오 코드 설치 방법 13 1

그리고 두 번째로는 ‘Live server’라는 것을 검색하고 설치(install)한다. 여기서 라이브 서버는 코드를 작성할 때마다 브라우저에서 새로고침 할 필요 없이 자동으로 반영되는 기능을 가진 익스텐션이다.

이제 비쥬얼 스튜디오 코드를 설치하고, 기본적인 세팅이 끝났다. 오늘은 비주얼 스튜디오 코드란 정확히 무엇인지 간단하게 설명하고 마치고, 이어지는 내용은 다음 글에서 설명하도록 하겠음.

이어지는 글 ▼

마이크로소프트 비쥬얼 스튜디오 코드

비주얼 스튜디오 코드란?

비주얼 스튜디오 코드(Visual Studio Code)는 마이크로소프트에서 개발한 무료 오픈 소스 텍스트 편집기다. 즉 소프트웨어 개발을 위해 코드를 작성하고 편집하는 데 주로 사용이 된다.

비주얼 스튜디오 코드는 인터페이스도 직관적이고, 기능도 다양하기 때문에 개발자들이 효율적으로 코딩과 디버깅, 버전 관리 등의 작업을 수행할 수 있다.

또한 한국어를 비롯하여 다양한 프로그래밍 언어와 플랫폼에 대한 지원을 제공하며, 다양한 확장 기능을 통해 개발 환경을 개인화하고 확장할 수도 있다.

예를 들어, 비주얼 스튜디오 코드를 사용하여 웹퍼블리싱 및 개발을 한다고 가정해보자. HTML, CSS, JavaScript 등의 웹 언어로 코딩을 할 때, 비주얼 스튜디오 코드는 문법 강조 표시, 자동 완성, 코드 정리 등의 기능을 통해 개발자들의 실수를 줄이고 효율적인 코딩을 할 수 있도록 도와준다.

자주 묻는 질문(FAQ)

PHP언어란 무엇인가요?

PHP언어에 대해 궁금하다면 아래 링크의 글을 참고 ▼

PHP 언어를 알아보자 : 웹개발 프로그래밍 언어 입문

프로그래밍 표기법의 종류는?

카멜, 헝가리안, 파스칼, 스네이크 등의 프로그래밍 표기법이 궁금하다면 아래 링크의 글을 참고

프로그래밍 표기법 종류와 명칭 총정리

함께 읽으면 좋은 글

이 포스팅은 파트너스 활동으로 소정의 수수료를 제공받을 수 있습니다.

Leave a Comment