html파일에서 '!' 입력 후 탭 키, 혹은 엔터를 누르면
일일이 입력할 필요 없이 사진처럼 자동으로 html 구조가 완성된다.
코드 입력창 좌측을 보면 프로젝트(=폴더)와 파일내역이 뜨는 곳이 사이드 바, 가장 왼쪽의 큼지막한 아이콘이 있는 곳이 액티비티 바 이다.
확장팩 설치
한국어로 설정을 변경하고 싶을 때는 액티비티 바의 가장 아래에 있는 Extensions 메뉴에서 korean을 검색 후 설치하면 된다. (만약 다시 설정을 변경하고 싶을 때는 Command Palette(명령창) 실행 후 CDL를 검색해서 원하는 언어를 선택하면 된다. )
한국어를 설치했을 때 처럼 확장(Extensions) 메뉴에서 'beautify'를 검색 후 설치하면 쉽게 정리된 코드를 만들 수 있다. 명령창에서 Keyboard shortcuts 메뉴에 들어가서 HookyQR.beautify 검색 후, 더블클릭해서 원하는 단축키를 입력해주면 된다. 나는 Ctrl + Shift + F 키를 입력했다. 그러면 원하는 부분 만큼 코드를 블락해서 단축키를 입력하면 코드가 자동으로 깔끔하게 정렬된다.
'Auto Rename Tag'를 설치하면 열린 태그 혹은 닫힌 태그 한쪽만 변경해도 같이 변경된다.
처음 시작하는 사람들에겐 매우 꿀팁들이라 할 수 있겠다!
프로젝트를 브라우저에 출력하기 위해서는 먼저 확장 메뉴에서 'Live Server'를 설치해준다. 그러면 프로젝트에서 마우스 우클릭을 누르면 Open With LiveServer 메뉴가 뜨는데, 해당 메뉴를 누르면 작업했던 코드 결과가 브라우저에 출력된다.
내가 처음으로 출력한 화면 ^_^
tab키를 눌렀을 때 들여쓰기의 크기를 2로 설정하자. 오른쪽 아래에서 공백 버튼 클릭 후
공백을 사용한 들여쓰기를 선택하면 크기를 조정할 수 있다. (크기는 2 권장)
알면 편리한 단축키
- 명령창 : Ctrl + Shift + P
- 파일 or 폴더 오픈 : Ctrl + O
- 사이드 바 열고 닫기 : Ctrl + B
- 빠른 열기(파일이나 기호 탐색) : Ctrl + p
- 편집기(명령창) 닫기 : Ctrl + w
- 찾기/바꾸기 : Ctrl + H
- 줄 위로 이동 : Alt + ↑
- 아래에 줄 복사 : Alt + Shift + ↓
- 내어쓰기 : Shift + Tap
- 이전 편집기 열기 : Ctrl + PageUp
- 다음 편집기 열기 : Ctrl + PageDown
- 편집기 분할 : Ctrl + \
VS Code에서 태그를 작성할 때 태그명 작성 후 Tab 키를 누르면 자동으로 태그가 완성된다. 이는 Emmet 기능을 이용한 것이다. 태그 뿐만 아니라 div.heropy 작성 후 Tab키를 누르면 heropy라는 클래스로 div 태그가 자동 완성 되고, h: 200 은 height: 200px;, w: 200 은 width: 200 px; 로 자동 완성되는 매우 편리한 기능이다!!
'2. Front-end > 2-1. HTML' 카테고리의 다른 글
| HTML - [ BEM ] (0) | 2022.04.29 |
|---|---|
| HTML - [ 오픈 그래프 / Favicon] (0) | 2022.04.21 |
| HTML - [ 핵심 요소(태그) / 전역 속성 ] (0) | 2022.04.21 |
| HTML (0) | 2022.04.20 |