vs code 단축키 9
vs code에서 코드 한 번에 주석처리하기
코딩을 하다 보면 아 여기서부터 여기까지는 잠깐 주석 처리를 해둬야지.. 하는 생각 해보신 적 있으시죠? 일일이 주석을 타자로 치고 있었는데 이게 단축키가 있다는 사실 알고 계셨나요? 비주얼 스튜디오 코드에 있는 기능으로 주석을 편하게 넣어봅시다! 1. 줄 주석 설정 ① 영역 지정 - 먼저 줄 주석 설정부터 해보겠습니다. - 주석으로 하고 싶은 코드 한 줄을 영역 지정해줍니다. 드래그로 블록 지정해주세요. ② 편집 - 상단 메뉴에서 [편집>줄 주석 설정/해제]를 클릭해주세요. - 오른쪽을 보시면 단축키가 있는데 [Ctrl+/] 단축키로도 설정과 해제를 할 수 있습니다. ③ 주석 설정 - 이렇게 주석이 설정된 것을 볼 수 있습니다. - 토글 방식이기 때문에 편집에서 한번 더 설정해주시거나 단축키를 한 번 ..
[vs code] 비주얼 스튜디오 코드 세로 선택 해보자
코딩을 하다 보면 세로줄만 수정하고 싶은 경우가 생겨요. 그럴 때 유용한 단축키를 알려드릴게요. 1. 수정 영역 확인 ① 수정할 부분 확인 - 이미지에 표시된 '하위'라는 글자를 모두 '상위'라는 글자로 바꾸고 싶다고 가정해볼게요. ② 드래그 - 드래그를 하면 수정하고 싶지 않은 부분까지 같이 잡혀요. - 이렇게 되면 수정할 수가 없습니다. ③ Alt + 클릭 - 물론 이것도 하나의 방법인데 이러면 클릭을 4번 해야 하죠. - 만약 고쳐야 할 부분이 30개라면? 더 많다면? 클릭을 그만큼 해야 하는 거예요. 그건 효율적이라고 할 수 없겠죠. 2. 세로 선택 ① 세로 선택 - 먼저 영역 지정하고 싶은 첫 부분에 커서를 가져다 둡니다. - 그리고 단축키 [Alt + Shift + 드래그]를 이용해 세로 방향..
[vs code] 비주얼 스튜디오 코드 html 자동완성 해보자
html 기본 구조를 자동완성으로 불러와보겠습니다. 1. 새 index.html 파일 여기 아무것도 안 쓴 index.html 파일이 있습니다. 이제 본격적으로 코딩을 시작해 볼까 하는데 초보자라면 아직은 어색한 기본 구조가 갑자기 잘 떠오르지 않을 것이고, 경험자라면 사실 매번 같은 코드를 적는 것도 귀찮습니다. 이럴 때 에디터 프로그램의 유용함이 빛을 발휘합니다. html 자동완성을 이용해 봅시다. 2. ! + Tab !(느낌표)를 누르면 아래로 뭔가 잔뜩 뜨는데 신경 쓰지 마시고 Tab키를 눌러줍니다. html5 기본 구조가 자동완성으로 입력되는 것을 볼 수 있습니다. 얼마나 편한지 감동이 다 몰려옵니다. 반응형 작업에 필요한 뷰포트(viewport)도 잊지 않고 챙겨줘서 좋습니다. 3. 수정할 부..
[vs code] 비주얼 스튜디오 코드 화면 분할을 해보자
비주얼 스튜디오 코드에서 화면 분할을 해볼게요. 1. 분할하기 가장 간편한 방법입니다. 현재 코드를 작성하는 파일의 탭에서 오른쪽 클릭을 한 뒤 분할하고 싶은 영역을 클릭해줍니다. 위 아래 왼쪽 오른쪽이 있는데 오른쪽을 선택해보겠습니다. 오른쪽에 분할을 눌렀던 창이 하나 더 생기는 것을 볼 수 있습니다. 어느 위치에 분할하는지 정해진 것은 없습니다. 그냥 자신이 편한 분할 화면을 사용하시면 됩니다. 파일 이름 옆에 X 버튼을 누르면 분할된 화면을 닫을 수 있습니다. 2. 단축키 사용 단축키가 있다면 단축키를 사용하는 것이 인지상정! 화면 분할의 단축키는 Ctrl + \(역슬래시)입니다. 좌우로 분할하는 단축키입니다. 수직 분할은 아래 표를 참고 바랍니다. 이름 단축키 화면 분할 Ctrl + \ 화면 수직..