알아두면 너무나 편리한 vs code 필수 단축 기능
| ! | html구조 자동 완성 |
| link::css | css 스타일시트 연결 |
| () | 괄호로 묶어주면 한개로 취급됨 뭔가를 반복하고싶을때 효과적 |
| * | 태그를 반복시켜줌 |
| tag.클래스이름 | 클래스명을 가진 태그를 생성해줌 |
| tag > tag | 부모,자식요소로 태그를 생성해줌 |
| tag + tag | 각각 태그를 생성해줌 |
| ctrl + shift + L | 드래그된 단어와 동일한 단어를 모두 수정할 수 있어짐 |
| ctrl + D | 드래그된 단어와 동일한 단어를 한개씩 선택할 수 있어짐 |
| alt + 위아래방향키 | 선택된 열의 코드의 위치를 바꿔줌 |
| ctrl + alt + 위아래방향키 | 행을 다중선택하여 여러행을 동시에 수정할 수 있게해줌 |
| ctrl + / | 한줄 주석처리 |
| alt + shift + A | 여러줄 주석처리 |
| ctrl + K -> ctrl + U | ctrl + K , ctrl + U 모두 해줘야함. 주석처리된 부분 주석해제 |
html 구조 자동완성
! (엔터)예제 ( div > button) * 5
(div > button)*5 <div><button></button></div>
<div><button></button></div>
<div><button></button></div>
<div><button></button></div>
<div><button></button></div>> 를 통해 태그 안에 자식태그를 추가
* 를 통해 원하는 횟수만큼 태그를 반복()
한번에 여러태그 수정하기
Ctrl + shift + L and Ctrl + D
존재만 알고 어떻게 쓰는지는 까먹어버려서 하나하나 눈물을 머금고
태그들을 바꿔주던 노동에서 해방될 수 있는 방법입니다.
사용법은 간단합니다.
수정하고 싶은 부분을 드래그해준 다음
( 드래그 할 때 마우스로 잡지말고 ctrl + 방향키로 한글자씩 잡아주면 편합니다 )
ctrl + shift + L을 눌러주면 문서내 같은 단어들이 동시에 수정됩니다.
1. 먼저 수정할 단어를 선택해줍니다.
<li><button></button></li>
<li><button></button></li>
2. 그 상태에서 ctrl + shift + L
<li><button></button></li>
<li><button></button></li>
이렇게 모든 li태그가 선택됩니다.이제 원하는 태그로 수정해주면 끝.
근데 이 방법은 내가 바꾸고 싶지않은 영역까지 한번에 수정 될 수 있다는 문제가 있습니다.
Ctrl + D를 이용하면 그 문제를 해결할 수 있어요
1. 먼저 수정할 단어를 선택해줍니다.
<li><button></button></li>
<li><button></button></li>
2. 그 상태에서 ctrl + D
<li><button></button></li>
<li><button></button></li>
이렇게 하나씩 아래를 방향으로 태그가 잡히게됩니다.
내가 원하는 시작지점부터 바꿀태그의 수만큼 ctrl + D를 해주면
원하는 태그만 수정할 수 있겠네요
특정 코드 위치 바꿔주기
alt + 방향키
1.위치 이동을 원하는 행 선택
<section class=”Up”></section>
<li><button></button></li>
2.alt + 방향키
<li><button></button></li>
<section class=”Up”></section>