개인적으로 공부하고 작업하면서 자꾸 사용하는데 잊어버리는 유용한 단축키들을 정리해 봅니다.
| 단축키 | 설명 |
| Command + / (Mac) Ctrl + / (Windows) | 주석 추가 및 삭제 |
| Command + k + f (Mac) Ctrl + k + f (Windows) | HTML 코드 정렬 |
| Option + Shift + f (Mac) Alt + Shift + f (Windows) | CSS 코드 정렬 |
| ! + Tab (Mac & Windows) | HTML 기본 문서 양식 자동 작성 |
| 태그명 + Tab | 태그 자동 입력 |
| 태그명.클래스명 + Tab | 클래스 추가된 태그 자동 입력 div.box -> <div class=”box”></div> |
| 태그명#아이디명 + Tab | 아이디 추가된 태그 자동 입력 div#box -> <div id=”box”></div> |
| 태그명>태그명 + Tab | 자식요소 추가 ul>li -> <ul><li></li></ul> |
| 태그명+태그명 + Tab | 형제요소 추가 div+p -> <div></div><p></p> |
| 태그명*숫자 + Tab | 태그 반복 생성 div*3 -> <div></div><div></div><div></div> |
| 태그명.클래스명$*3 + Tab | 클래스명 순차 증가 div.box$3 -> <div class=”box1″><div class=”box2″><div class=”box3″> |
| 태그명.클래스명@2*2 + Tab | 클래스명 시작번호 변경 후 순차 증가 div.box@3*2 -> <div class=”box3″><div class=”box4″> |
| 태그명{텍스트} + Tab 태그명.클래스명{텍스트} + Tab | 태그 내부에 텍스트 입력 div{입력하세요} -> <div>입력하세요</div> div.box{입력하세요} -> <div class=”box”>입력하세요</div> |
| lorem + Tab | 더미 텍스트 생성 |
| lorem숫자 + Tab | 작성한 숫자 만큼의 단어 더미 텍스트 생성 |
| lorem*숫자 + Tab | 작성한 숫자 만큼의 단락 수 다미 텍스트 생성 |
