vsc(vs code) html 유용한 단축키와 한번에 여러 태그 수정하기
html은 어렵다기보다는 처음에 설계를 잘못하면
시간을 많이 빼앗기는 것 같습니다.
처음부터 어떻게 구조를 짤지 생각을 해두고 마크업을 하면 좋은데
저는 멍청해서 그런지 경험이 부족해서 그런지 (둘 다인 것 같긴함)
계속 수정사항이 생기더라구요
그래서 수정해야될사항이 있을 때 빠르게 수정할 수 있는 단축키들을 공유합니다..
실질적인 용례는 아래 자세히 서술해두었습니다.
대충 뭔 기능인지 아는데 단축키만 기억 안나시는 똘똘이들은 그냥 표만 보고 대충 써도 될 것 같습니다.
| ! | 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 구조 자동완성
!
link 태그 자동완성
link::
만약 link::css를 하면?
<link rel="stylesheet" href="style.css">
css뿐만 아니라 파비콘도 가능함
태그.클래스명 / +
header+section.player+section.info+section.Up <header></header>
<section class="player"></section>
<section class="info"></section>
<section class="Up"></section>+를 이용하면 각각의 태그를 생성할 수 있고
태그명.클래스명을 통해 클래스명이 부여된 태그를 생성할 수 있어요
() / > / *
(li > button)*5 <li><button></button></li>
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>> 를 통해 태그 안에 자식태그를 만들어줄 수 있습니다.
* 를 통해 원하는 횟수만큼 태그를 반복해서 만들 수도 있어요
() 괄호로 묶어준다음 *를해주면 괄호가 5번반복됩니다!
이걸 위와 응용해서 사용하면 클래스이름을 가진 태그들을 반복시킬수도있겠네요!
한번에 여러태그 수정하기
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>
li행을 위로 옮겨주기위해 alt + 위방향키로 옮긴 모습입니다.
다른 태그들은 이정도면 대충 어떻게 써야할지 감이 오셨을거라 믿습니다.
민첩한 하루되세요.