안녕하세요! 지난 번엔 Visual Studio Code에서 유용한 확장 프로그램에 대해 알아봤죠?
이번 글에서는 Visual Studio Code에서 HTML을 작성하면서 제가 자주 사용하는 단축키들을 정리해 보려고 해요.
단축키를 활용하면 코딩 속도를 높이고, 작업 효율을 극대화할 수 있어요.
저와 같은 초보자를 대상으로 쉽게 설명했으니 부담 없이 따라와 주세요!🚀
1) 들여쓰기 & 내어쓰기
🔹 Tab(Ctrl+]) → 들여쓰기
코드를 더 보기 좋게 정리할 때 사용해요. HTML 요소 안에 포함된 태그를 정리할 때 특히 유용해요!
🔹 Shift + Tab(Ctrl+[) →내어쓰기
들여쓰기를 잘못했거나, 원래 위치로 되돌리고 싶을 때 사용하면 돼요.
2) 코드 복사 & 이동
🔹 Shift + Alt + ↓(아래쪽 화살표)
현재 선택한 줄을 아래쪽으로 복사해요. 반복적인 태그를 만들 때 정말 편리해요!
🔹 Shift + Alt + ↑(위쪽 화살표)
현재 선택한 줄을 위쪽으로 복사해요.
🔹 Alt + ↑(위쪽 화살표)
선택한 줄을 위쪽으로 이동해요.
🔹 Alt + ↓(아래쪽 화살표)
선택한 줄을 아래쪽으로 이동해요.
💡 Tip: <li>, <tr>, <div> 같은 요소들을 정리할 때 정말 편리해요!
3) 코드 삭제 & 정리
🔹 Ctrl+X 또는 Ctrl+Shift+K → 한 줄 삭제
커서가 있는 한 줄을 삭제할 때 사용해요. 블록을 선택하지 않아도 한 번에 삭제할 수 있어요!
4) 라이브 서버 실행 & 종료
🔹 Alt + L → Alt + O
Live Server 확장을 설치한 경우, 이 단축키를 사용하면 실시간으로 HTML 변경 사항을 확인할 수 있어요.
5) 복사 & 붙여넣기
🔹 Ctrl + C → 복사
🔹 Ctrl + V → 붙여 넣기
6) 새 줄 추가
🔹 Ctrl + Enter → 다음 줄에서 새 줄 추가
현재 줄에서 바로 아래 새 줄을 추가해요.
🔹 Ctrl + Shift + Enter → 이전 줄에서 새 줄 추가
현재 줄의 바로 위에 새 줄을 추가해요.
7) 여러 개의 같은 단어 선택
🔹 Ctrl+D → 같은 단어 하나씩 선택
현재 커서가 위치한 단어와 같은 단어를 하나씩 선택해요.
🔹 Ctrl + Shift + L → 같은 단어 모두 선택
현재 선택한 단어와 같은 단어를 한 번에 모두 선택해요.
💡 예를 들어 <div class="box"> →"box"를 여러개 변경할 때 유용해요!
8) 선택 취소
🔹 Ctrl + U → 마지막 선택 취소
방금 한 선택을 되돌릴 때 사용해요.
9) 모든 같은 단어 한 번에 변경
🔹 Ctrl +F2
현재 커서가 위치한 단어를 문서 내에서 모두 선택 후, 동시에 수정할 수 있어요.
10) 코드 블록 접고/펼치기
🔹 Ctrl + Shift + [ →코드 블록 접기
🔹 Ctrl + Shift + ] →코드 블록 펼치기
💡긴 HTML 코드가 있을 때, 특정 부분을 접어서 보기 좋게 정리할 수 있어요!
11) 주석 처리
🔹 Ctrl + / (Ctrl + K → Ctrl + C) → 한 줄 주석
현재 선택한 줄을 주석 처리해요. 다시 누르면 주석 해제돼요!
🔹 Alt + Shift +A → 여러 줄 주석
HTML에서 여러 줄을 한 번에 주석 처리할 때 사용해요.
12) 검색 & 저장
🔹 Ctrl +F → 찾기
현재 파일에서 특정 단어를 찾을 때 사용해요.
🔹 Ctrl + S → 저장
파일을 저장하는 기본 단축키에요. 저장은 습관적으로! 😆
Visual Studio Code는 단축키만 잘 알아도 코딩 속도와 효율을 크게 올릴 수 있는 강력한 에디터예요.
단축키를 잘 활용하면 코드 작성 속도가 2배 이상 빨라질 수 있어요!
혹시 추가로 알고 있는 단축키가 있다면 댓글로 공유해주세요!
그럼 다음 글에서 만나요!