제일 첫 단계, 프로젝트 만드는 방법
- 바탕화면에서 새파일 만들고 프로젝트 이름 설정
- VS Code에서 폴더열기로 프로젝트 불러오기
- 파일 생성( * 항상 소문자 )
기본 단축키
-
메뉴열기 (검색해서 사용)
: Ctrl + Shift + P -
파일또는 폴더 열기
: Ctrl + O -
전체선택
: Ctrl + A
맨아래의 상태 바
보라색 : 아무런 프로젝트(폴더/디렉토리)가 실행되어있지 않음
파란색 : 프로젝트(폴더/디렉토리)가 정상적으로 열림
파일의 이름은 항상 소문자로 작성하고 관리하여야 한다.
파일은 우클릭을 누른 후 Delete(삭제)로 삭제할 수 있다.
-
index.html
: 새파일 만들기로 index.html을 입력하면 html 확장자 파일이 생성된다.
-> ! (느낌표) -> Enter/Tap키를 누르면 html 기본구조가 자동 생성된다. -
main.css
: 새파일 만들기로 main.css를 입력하면 css 확장자 파일이 생성된다.
Extensions(확장 프로그램)에서 필요한 것들을 검색해서 다운받은 후
다양한 확장 프로그램을 사용할 수 있다.
기본으로 쓰면 좋은 확장 프로그램들
- VS Code 한글화하기
: Extension(확장프로그램)에 Korean Language Pack for Visual Studio Code 검색 후 설치하기
- 코드 깔끔하게 정리해주기
: Extension(확장프로그램)에 Prettier - Code formatter 검색 후 설치하기
- 태그의 앞부분을 고치면 뒤에 연결되는 태그까지 수정하기
: Extension(확장프로그램)에 Auto Rename Tag 검색 후 설치하기
실시간으로 브라우저에 출력하기
: Extension(확장프로그램)에 Live Server 검색 후 설치하기
GoLive를 누르거나 우클릭, 또는 단축키를 따로 저장하여 누를 시 프로젝트를 실시간으로 보여준다.
항상 계속 언제든 저장하는 습관기르기
파일에 흰색 점이 생성되어있으면 저장이 안되어있는 상태이다.
ctrl + S 단일 파일만 저장되어 프로젝트안에 있는 파일이 전부 저장되지 않고
Ctrl + K + S로 모든 파일 저장하기를 하여 저장해주어야 프로젝트가 안전하게 저장이 된다.
이때 이 단축키는 ctrl + K를 누르고 난 후 눌렀던 키를 때고 S를 누르면 저장이 된다.
