VS Code 24
[vs code] 비주얼 스튜디오 코드 아이콘으로 새파일 만들기
아이콘을 이용해서 새파일을 만들어볼거에요. 1. 폴더 생성 ① 폴더 - 먼저 작업을 위한 폴더를 하나 생성해주세요. - 왼쪽 탐색기에서 보인다면 오케이입니다. - 탐색기가 보이지않는다면 더 왼쪽에 있는 종이가 겹쳐진 아이콘이 보이시나요? 맨 위에있는거요. 그걸 눌러주세요. 2. 새파일 만들기 ① 마우스 올리기 - 폴더 이름에 마우스를 올려보겠습니다. - 폴더 이름 오른쪽으로 여러개의 아이콘이 나타나는게 보이시나요? - 여기서 맨 첫번째에 있는 아이콘을 클릭해줍니다. 이렇게 새 파일이라고 이름도 뜹니다. ② 파일 이름 정하기 - 아이콘을 클릭하면 이렇게 파일 이름을 적을 수 있는 칸이 나타납니다. - 여기에 파일명을 적어주시는데 주의할점은 확장자명도 같이 적어주셔야하는 것입니다. - 확장자가 뭔가요? 점 ..
[vs code] 비주얼 스튜디오코드 html에서 emmet(에밋) 사용하기
에밋(emmet)은 html, css 등 문서를 편집할 때 빠른 코딩을 지원하는 플러그인이에요. 이것만 알면 코드를 더 빨리 짤 수 있답니다. 와우 신난다! 1. 자식 태그 만들기 ① 꺽쇄(>) - > 이런 모양의 꺽쇄를 사용하면 안쪽에 자식 태그를 넣을 수 있습니다. - 사용 방법은 div 태그 안쪽에 ul 태그를 넣고 싶을 때 [div>ul]이라고 적고 [Tab] 키를 눌러주세요. ② Tab - 위에서 설명한 대로 [Tab] 키를 눌러주세요. - 표시된 ul 태그가 div 태그 안쪽에 들어간 것을 확인할 수 있습니다. 2. 병렬로 태그 만들기 ① 플러스(+) - 이번엔 +를 이용해 적어줍니다. - 적다 보면 플러그인이 자동으로 뜨는 게 보이시죠? 이럴 때 그냥 엔터를 누르셔도 됩니다. - +를 사용하..
[vs code] 비주얼 스튜디오코드 찾아서 바꾸기
한 번에 동일한 문자를 바꿀 때 사용하면 좋은 기능입니다. 1. Ctrl + Shift + L ① 드래그 - 갑자기 코드가 보인다고 너무 당황하지 마시고요 바꾸고 싶은 단어만 드래그해봅시다. - 저는 email이라는 단어를 드래그했어요. - 어렵지 않죠? ② Ctrl + Shift + L - 드래그가 잘 되었나요? - 그렇다면 이 상태에서 [Ctrl + Shift + L] 단축키를 눌러주세요. 2. 바꾸기 ① 커서 확인하기 - 단축키를 누르면 같은 단어가 모두 선택이 되면서 커서도 생기는 것을 볼 수 있습니다. - 저 email이라는 두 단어 모두 커서가 있는 것 보이시죠? - 여기까지 왔다면 끝난 겁니다. 그냥 바꾸고 싶은 단어로 다시 써주면 됩니다. ② 바꾸기 - 하나만 바꿔도 전체 단어가 모두 바뀌..
[vs code] 비주얼 스튜디오 코드 세로 선택 해보자
코딩을 하다 보면 세로줄만 수정하고 싶은 경우가 생겨요. 그럴 때 유용한 단축키를 알려드릴게요. 1. 수정 영역 확인 ① 수정할 부분 확인 - 이미지에 표시된 '하위'라는 글자를 모두 '상위'라는 글자로 바꾸고 싶다고 가정해볼게요. ② 드래그 - 드래그를 하면 수정하고 싶지 않은 부분까지 같이 잡혀요. - 이렇게 되면 수정할 수가 없습니다. ③ Alt + 클릭 - 물론 이것도 하나의 방법인데 이러면 클릭을 4번 해야 하죠. - 만약 고쳐야 할 부분이 30개라면? 더 많다면? 클릭을 그만큼 해야 하는 거예요. 그건 효율적이라고 할 수 없겠죠. 2. 세로 선택 ① 세로 선택 - 먼저 영역 지정하고 싶은 첫 부분에 커서를 가져다 둡니다. - 그리고 단축키 [Alt + Shift + 드래그]를 이용해 세로 방향..
[vs code] 비주얼 스튜디오코드 한 번에 수정하기
비주얼 스튜디오코드에서 사방에 퍼져있는 단어를 한 번에 수정해보겠습니다. 1. 수정 사항 확인 ① 수정할 부분 확인 코드의 자세한 내용은 중요하지 않습니다. 중요한 것은 체크한 부분! 1월이라는 글자가 4번이나 나오는데 여기를 10월로 바꾸고 싶습니다. 0을 네 번 쓰는 건 좀 귀찮죠. 한 번에 할 수 없을까 고민해봅니다. 2. Alt ① alt + 클릭 커서를 보시면 4군데에 모두 커서가 들어간 것을 알 수 있습니다. alt키를 누른 채로 클릭을 하면 여러 군데를 한꺼번에 선택이 가능합니다. ② 수정하기 이제 원하던 대로 0을 넣어서 10월로 만들어집니다. 커서가 4군데 모두 있기 때문에 한 번만 입력하면 모두 들어갑니다. [같이 보면 좋은 글] [coding/editor] - [vs code] 비주얼..