VS Code 24
[vs code] 비주얼 스튜디오 코드 html 자동완성 해보자
html 기본 구조를 자동완성으로 불러와보겠습니다. 1. 새 index.html 파일 여기 아무것도 안 쓴 index.html 파일이 있습니다. 이제 본격적으로 코딩을 시작해 볼까 하는데 초보자라면 아직은 어색한 기본 구조가 갑자기 잘 떠오르지 않을 것이고, 경험자라면 사실 매번 같은 코드를 적는 것도 귀찮습니다. 이럴 때 에디터 프로그램의 유용함이 빛을 발휘합니다. html 자동완성을 이용해 봅시다. 2. ! + Tab !(느낌표)를 누르면 아래로 뭔가 잔뜩 뜨는데 신경 쓰지 마시고 Tab키를 눌러줍니다. html5 기본 구조가 자동완성으로 입력되는 것을 볼 수 있습니다. 얼마나 편한지 감동이 다 몰려옵니다. 반응형 작업에 필요한 뷰포트(viewport)도 잊지 않고 챙겨줘서 좋습니다. 3. 수정할 부..
![[vs code] 비주얼 스튜디오 코드 html 자동완성 해보자](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/Bbhvx/btqNLPJJAid/iHcy817Go7iQAdsjoSAel0/img.png)
[vs code] 비주얼 스튜디오 코드 wrap! 래핑! 감싸기를 해보자
안녕하세요. 개자이너 씸플레이입니다. 랩은 음식을 먹고 위에 씌우는 그 랩과 같은 단어입니다. 래핑 역시 같은 의미로 음식을 랩으로 포장해준다는 뜻이죠. 코딩에서의 래핑도 같은 의미입니다. 그러니 래핑이라고 하면 어떤 코드를 포장해준다고 생각하시면 됩니다. vs code에서 단축키를 이용해 래핑을 해보겠습니다. 1. 모든 명령어 보기 래핑 할 코드를 블럭지정 해줍니다. 그냥 주르륵 드래그로 잡아주시면 됩니다. Ctrl + Shift + P 단축키를 누르면 모든 명령어 보기라는 창이 뜹니다. 여기서 검색해주시면 됩니다. 최근에 사용한 적이 있어서 이미 뜨기는 하는데 같이 검색해보겠습니다. 2. wrap wrap이라고 검색하면 Emmet: 약어로 래핑이라는 명령어가 나올 겁니다. 최근에 사용한 항목이라 맨 ..
![[vs code] 비주얼 스튜디오 코드 wrap! 래핑! 감싸기를 해보자](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/uqPMW/btqNnw5ztX1/fKrHadexnUmT6OHIAC5WHK/img.png)
[vs code] 비주얼 스튜디오 코드 화면 분할을 해보자
비주얼 스튜디오 코드에서 화면 분할을 해볼게요. 1. 분할하기 가장 간편한 방법입니다. 현재 코드를 작성하는 파일의 탭에서 오른쪽 클릭을 한 뒤 분할하고 싶은 영역을 클릭해줍니다. 위 아래 왼쪽 오른쪽이 있는데 오른쪽을 선택해보겠습니다. 오른쪽에 분할을 눌렀던 창이 하나 더 생기는 것을 볼 수 있습니다. 어느 위치에 분할하는지 정해진 것은 없습니다. 그냥 자신이 편한 분할 화면을 사용하시면 됩니다. 파일 이름 옆에 X 버튼을 누르면 분할된 화면을 닫을 수 있습니다. 2. 단축키 사용 단축키가 있다면 단축키를 사용하는 것이 인지상정! 화면 분할의 단축키는 Ctrl + \(역슬래시)입니다. 좌우로 분할하는 단축키입니다. 수직 분할은 아래 표를 참고 바랍니다. 이름 단축키 화면 분할 Ctrl + \ 화면 수직..
![[vs code] 비주얼 스튜디오 코드 화면 분할을 해보자](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/5CPG3/btqNjU01hMN/851escnHqNgTDkBQpYlm11/img.png)
[vs code] 비주얼 스튜디오 코드 단축키를 검색해보자
안녕하세요. 개자이너 씸플레이입니다. 비주얼 스튜디오 코드에서 단축키를 검색해보겠습니다. 1. 바로 가기 키 vs code를 열어서 파일 > 기본 설정 > 바로 가기 키를 선택해줍니다. 단축키는 Ctrl + K Ctrl + S 입니다. 이 단축키가 조금 생소하실 텐데 어떻게 사용하는지 바로 보여드리겠습니다. 먼저 Ctrl + K 를 누르고 기다립니다. 아래에 메세지가 뜨는데 둘째 키를 잠시 기다렸다가 누르라고 알려줍니다. 키보드에서 잠시 손을 떼었다가 둘째 키인 Ctrl + S 를 마저 눌러줍니다. 두 개의 단축키를 이용해 바로가기 키를 실행시킨 모습입니다. 아래 메세지를 잘 보고 해 주시면 간편하게 열 수 있습니다. 이렇게 바로가기 키를 열어 비주얼 스튜디오 코드의 단축키를 확인해 볼 수 있습니다. 2..
![[vs code] 비주얼 스튜디오 코드 단축키를 검색해보자](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/bFOQUF/btqMPi2b4dt/6ikkmZScETHnJa9mg6myC0/img.png)
