오늘은 Visual Studio Code(비주얼 스튜디오 코드)
프로그램 설치 방법 및 코딩 작업 시 미리 해야하는 기본설정 및 셋팅방법에 대해 알려드릴게요!
1
먼저, 구글에서 Visual Studio Code(비주얼 스튜디오 코드)를 검색하여 사이트를 들어갑니다.
아래 Download를 먼저 들어가도 바로 다운로드 사이트로 이동할 수 있어요.
2
상단 오른쪽에 Download를 눌러주고
WIndow or Mac을 선택해주고
↓ 다운로드 버튼을 눌러주어 설치를 시작합니다.
3
next를 눌러 계속해서 설치를 진행해주시고
완료가 되었으면
시작하기 전 설정을 해주시면 좋습니다.
※ 기본 셋팅 Extension 확장 2가지를 설치하시고 가시면 유용합니다!
1. 비주얼 스튜디오 코드를 열었을 때 왼쪽 마지막 아이콘 'Extension'메뉴에서 'Korean langeage pack' 설치
- 영어를 알면 좋겠지만 영어모를 때 아주 유용한 '한글 언어팩'입니다.
(영어가 제2언어처럼 사용이 가능하시다면 패스하셔도 됩니다.)
- install 버튼만 눌러주면 자동 설치됩니다.
2. 'Extension'메뉴에서 'Live Server' 설치
- 따로 F5로 새로고침 하지 않아도 '실시간보기 확장 기능'을 추가하는 것입니다.
- install 버튼만 눌러주면 자동 설치됩니다.
4
Visual Studio Code(비주얼 스튜디오 코드) 꼭 알고 가야할 기본 설정 방법
1. 전체 색상 변경 방법
- 좌측 하단 설정 아이콘>테마>색테마선택
2. 문자 서체/크기 변화
- 좌측 하단 설정>폰트패밀리 수정
(OS에 설치된 폰트 중에서 선택)
3. 설정>zoom검색>mouse wheel zoom 체크버튼 켜놓기
(도큐먼트에서 Ctrl 키 누르고 휠 버튼을 누르면 확대/축소 됌)
'IT > 웹코딩기초' 카테고리의 다른 글
[CSS] Transition Animation 광주시 마우스 닿으면 위로 올라가며 바뀌는 로고 애니메이션 효과/HTMl 파일 공유 (0) | 2023.05.12 |
---|---|
[HTMl/CSS] 헤더, 메인, 푸터 섹션 나누기 / 시멘틱 태그 레이아웃 예제 (0) | 2023.05.10 |
[HTML/CSS] div요소와 box안에 box이미지 넣어서 반응형 데스크탑 모바일 페이지 만들기 (1) | 2023.05.09 |
[CSS] 링크선택자와 가상 클래스 선택자 요소와 순서 정리 (0) | 2023.05.08 |
[HTML] 초보자에게 유용한 비주얼 스튜디오 코드 단축키 태그 정리 (0) | 2023.05.05 |
댓글