HTML 1강. 비주얼 스튜디오 코드 설치 및 세팅

HTML 1강. 비주얼 스튜디오 코드 설치 및 세팅

1. 비주얼 스튜디오 다운로드 및 설치

자신의 컴퓨터 환경에 맞게 설치해준다.

https://code.visualstudio.com/download

설치된 폴더의 위치는 확인해두는 것이 좋다.

2. 비주얼 스튜디오 코드 테마 변경

개발자들에게 밝은 화면은 눈에 아주 안 좋다.

어두운 화면을 사용하는 것을 추천한다.

어두운 테마 완성!

3. 폰트 설정

원래 기본 폰트는 Consolas, 'Courier New', monospace 이라고 적혀있을 것이다.

작은따옴표 안에 바꾸고 싶은 폰트의 이름을 넣어주면 된다.

* 쿠키런 폰트 다운로드는 아래 링크에서 가능하다.

https://www.cookierunfont.com/#section7

윈도우는 TTF, OTF 상관없지만

맥은 반드시 OTF를 다운로드하여야 한다.

다운로드하고 압축을 풀어준 후

필요한 폰트를 설치만 눌러주면 설치가 끝난다.

개발에서 tool의 의미는 개발을 편리하게 사용 가능하게 해주는 도구를 말한다.

이 툴의 종류는 매우 다양하다.

이클립스 - 이클립스 (무료)

젯브레인(러시아) - 인텔리 J (유료)

마이크로소프트 - 비주얼 스튜디오, 비주얼 스튜디오 코드 (무료)

보통 회사에서 일을 해보면 유료임에도 불구하고 젯 브레인의 인텔리 J를 많이 사용한다.

툴에 문제가 있을 때 서비스 지원도 다 가능하고

기본적으로 가지고있는 기능이 아주 많기 때문에 많이 사용한다.

반면에 비주얼 스튜디오 코드는 초기 설치단계에는 아주 가볍기 때문에 로딩이 빠르지만

서비스에 한계가 있고 플러그인이 필요하다.

* 플러그인(Plug In) : 컴퓨터에 추가 프로그램을 설치하여 특정 기능을 수행할 수 있도록 하는 소프트웨어

원래 비주얼 스튜디오 코드 툴을 사용하다가 회사에 들어가 갑자기 인텔리 J를 사용하라고 하면

단축키도 다르고 적응하는데 시간이 걸릴것이다.

우리는 이를 방지하기 위해 비주얼 스튜디오 코드에서

인텔리 J의 모든 단축기를 쓸 수 있는 확장 프로그램을 설치할 것이다.

이렇게 확장 프로그램을 설치하는 것을 플러그인이라고 한다.

왼쪽 위에서 5번째 확장(Extensions)에 들어가 keymap을 검색하면

여러 가지 프로그램이 뜬다.

이 중에서 JetBrains IDE Keymap을 설치해주면 인텔리 J의 단축키를 모두 사용할 수 있다.

설치하는 김에 하나 더 설치할 것이다.

확장에서 live를 검색하면 제일 위에 Live Server라고 뜬 것을 설치해준다.

이것은 html 문서를 작성하고 저장하고 다시 여는 과정을 생략해주는 프로그램이다.

이때 파일 오른쪽 아래

여기가 HTML이 아닌 Django HTML이라고 적힌 사람이 있을 것이다.

여길 클릭해서 HTML로 바꿔 주어야 한다.

클릭하면 이런 검색창이 뜰 거고 html을 검색해 바꿔주면 아래 정상적으로 html로 바뀐 것을 볼 수 있을 것이다.

바뀐 상태에서

화면에 우클릭해보면 Open with Live Server가 뜰 것이다.

누르면 웹브라우저가 뜨고

파일 수정을 한 후 저장만 해도 자동으로 브라우저가 수정되어있다.

[출처]

https://cafe.naver.com/metacoding

from http://jaewon2336.tistory.com/21 by ccl(A) rewrite - 2021-12-30 17:27:06