coding/editor 50
[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. 분할화면 준비 ① 분할화면 - 단축키는 Ctrl + \ 입니다. 2. 분할화면 이동하기 ① 선택 - 이동하고 싶은 화면에 커서를 두세요. - 선택 중인 화면의 탭이 좀 더 진하게 표시되니 확인하기 쉬우실 거예요. ② 이동 - [Ctrl + Alt + 방향키]를 눌러 화면을 이동해주세요. - 방향키는 이동하고 싶은 방향을 눌러주시면 됩니다. 3. 옆 화면으로 이동 ① 옆 화면으로 이동하기 - [Ctrl + 숫자키]를 눌러 화면을 이동해봅시다. - 숫자키는 위의 이미지에 표시된 것처럼 맨 왼쪽부터 1, 2, 3... 이렇게 선택 가능합니다. - 이때 숫자키는 상단에 있는 키만 가능하고 오른쪽에..