[FE][01] Visual Code 기본 세팅 및 단축키

 

<추천 플러그인>

1) Beauify

정리된 코드 만들기

 

2) Auto Rename Tag

태그 이름을 한 번에 변경

 

3) Live Server

브라우저에 출력

 

---

< 단축키 >

No.	단축키	내용
1	Ctrl + alt+ ;	HookyQR.beautify 단축키(코드 예쁘게 정리)
2	Ctrl + alt + S	프로젝트 내 전체 파일 저장
3	Ctrl + B	사이드바(탐색기) 닫기
4	Ctrl + P	이름으로 파일 검색 메뉴
5	Ctrl + Shift + P	모든 명령 표시(에디터의 모든 명령에 접근)
6	Ctrl + W	편집기 현재 탭 닫기
7	Ctrl + H	찾기+바꾸기
8	Alt + ↑	코드 해당 줄을 윗줄과 바꿔치기(윗줄로 이동)
9	Alt + ↓	코드 해당 줄을 아랫줄과 바꿔치기(아랫줄로 이동)
10	Alt + Shift + ↓	코드를 아랫줄에 복사
11	Ctrl + PageUp	이전 편집기 열기 (좌측 창으로 전환)
12	Ctrl + PageDown	다음 편집기 열기 (우측 창으로 전환)
13	Ctrl + \	편집기 분할 (탭 우클릭 후 분할 메뉴를 선택해도 됨)
14

 

---

- 들여쓰기(Indent): Tab

<Tab>키를 눌렀을 때 들여쓰기 되는 정도는
이렇게 설정이 가능하다.
기본으로 '4'로 설정이 되어있지만
해당 강의에서는 '2'로 설정하는 것을 권장.

 

- 내어쓰기(Outdent): Shift + Tab

왼쪽으로 당겨올 수 있다.

 

---

DOCTYPE (DTD, Document Type Definition)

 

마크업 언어에서 문서 형식을 정의하며

웹 브라우저가 어떤 HTML 버전의 해석 방식으로 해당하는 페이지의

페이지(의 코드르)를 이해하고 그 코드에 맞게 화면에 어떻게 내용을 출력하면 되는지를

(웹 브라우저에게) 알려주는 용도로 사용하는 코드이다.

위와 같이 html까지만 적혀 있다면 "웹표준에 의거해서 실행되도록 해주세요."라고 명시하는 것이다.

 

- 6종류의 버전: HTML1, HTML2, HTML3, HTML4, XHTML, HTML5 (표준, 최신, 웹표준 html 버전)

현재 HTML1~HTML4의 지원은 종료되었고, XHTML 버전까지만 지원이 가능하다. 사이트의 HTML 코드를 확인해봤을 때 DOCTYPE이 html로 종료되는 것이 아니라 뒤에 덧붙는 PUBLIC 외 기타 내용들이 있다면 XHTML 버전인 것이다.

 

 

※ Windows 운영 체제로 치면 95, 98, ME, XP, Vista, 7, 8, 10 버전이 있는 것과 유사.

 

.html 파일을 HTML문서라고 부른다. .css 파일은 CSS 문서라고 부른다. .js 파일을 JavaScript 문서라고 부른다.