티스토리

경매하는 개발자

IT/무작정 웹사이트 만들기

[웹사이트 만들기-3] vscode에서 html 파일 만들고 출력하기 (vscode 단축키)

크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널 2022. 11. 12. 00:15

[웹사이트 만들기-3] vscode에서 html 파일 만들고 출력하기 (vscode 단축키)

1. html기본 구조 만들기

1) index.html 파일명으로 새로 파일 만들기

2) '!'를 입력한 후 엔터를 치면 html 기본 구조가 자동 생성된다.

3) main.css 파일명으로 새로 파일 만들기

2. Auto Rename Tag Extension 설치

: Extension 버튼 클릭 - Auto 입력 - 설치

- html, css에서 태그 짝을 자동으로 맞춰주는 Extension인 Auto Rename Tag를 설치하자

열린태그와 닫힌태그

아래 사진과 같이 흰 동그라미가 떠있다는 것은 아직 저장되지 않은 파일이라는 뜻이고, 여러개의 파일이 저장되지 않았다면 모두 저장을 해줘야 한다.

※ 모두 저장 단축키 : Ctrl + Alt + S (원래는 아니었으나, 단축키 설정창에서 단축키 변경함)

단축키 변경 방법은 아래 글 참고

[vscode] 소스코드 한번에 예쁘게 정리하기

3. Live Server Extension 설치

: Extension 버튼 클릭 - live server 입력 - 설치

- html에서 바로 코드 결과를 도메인에서 확인할 수 있도록 해주는 Extension으로, 웹사이트 개발 시 필수인 익스텐션이다.

- css 파일에서는 작동하지 않고 오직 html 파일에서만 작동한다.

- 소스코드에서 마우스 우클릭 - Open With Live Server 클릭 시 도메인에서 바로 결과 확인이 가능하다.

- Live Server 단축키 : Alt + L + O

※ vscode 단축키

Ctrl + B : 상태바 열기/닫기
Ctrl + P : 빠른 열기
Ctrl + Shift + P : 모든 명령 표시 (바로가기 설정 창 등)
Ctrl + W : 편집기 닫기
Ctrl + F : 검색
Ctrl + H : 찾아바꾸기 (Enter : 바꾸기, Ctrl + Alt + Enter : 모두바꾸기)
Alt + Shift + 화살표 : 해당 줄 위/아래로 복사
우측 하단에 '공백 : 4' --> '공백: 2'로의 변경을 권장 (수정해야 할 소스가 너무 많으면 Beautify 기능 사용 할 것)
Tab : 들여쓰기 (여러 줄 드래그 해도 같이 적용 됨)
Shift + Tab : 내어쓰기 (여러 줄 드래그 해도 같이 적용 됨)
Alt + L + O : Live Server 기능 (html 내용 바로 확인)
Ctrl + Alt + L : Beautify 기능 (소스 예쁘게 정리)
Ctrl + Page Up : 이전 열려있는 편집기 열기
Ctrl + Page Down : 이전 열려있는 편집기 열기
Ctrl + \ : 화면 분할
Ctrl + F4 : 열려있는 편집기 닫기
Ctrl + Shift + [ : 현재 영역 접시
Ctrl + Shift + ] : 현재 영역 펼치기
Ctrl + Alt + S : 모두 저장 단축키 (원래는 아니었으나, 단축키 설정창에서 단축키 변경함)