본문 바로가기
반응형

coding/editor18

[vs code] 비주얼 스튜디오코드 한 번에 수정하기 안녕하세요. 개자이너 씸플레이입니다. 비주얼 스튜디오코드에서 사방에 퍼져있는 단어를 한 번에 수정해보겠습니다. (코딩 이야기는 어렵게 보일 때가 많아서 썸네일이라도 한 껏 발랄한 것을 골라봤다.) 1. 수정 사항 확인 ① 수정할 부분 확인 코드의 자세한 내용은 중요하지 않습니다. 중요한 것은 체크한 부분! 1월이라는 글자가 4번이나 나오는데 여기를 10월로 바꾸고 싶습니다. 0을 네 번 쓰는 건 좀 귀찮죠. 한 번에 할 수 없을까 고민해봅니다. 2. Alt ① alt + 클릭 커서를 보시면 4군데에 모두 커서가 들어간 것을 알 수 있습니다. alt키를 누른 채로 클릭을 하면 여러 군데를 한꺼번에 선택이 가능합니다. ② 수정하기 이제 원하던 대로 0을 넣어서 10월로 만들어집니다. 커서가 4군데 모두 있기.. 2021. 1. 18.
[codepen] jQuery를 불러와보자 안녕하세요. 개자이너 씸플레이입니다. 오늘은 코드펜에서 제이쿼리를 불러오는 방법을 알아보겠습니다. 이미지처럼 CDN을 불러와보겠습니다. 1. 코드펜 https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io ① 코드펜에 접속 위의 링크를 이용해 코드펜에 접속해주세요. ② Pen 메뉴 선택 화면 왼쪽에 메뉴 중 Pen 메뉴를 선택해 새 파일을 만들어줍니다. 2. 세팅 ① 세팅 클릭 화면 위쪽에 있는 S.. 2021. 1. 4.
[vs code] 비주얼 스튜디오 코드 html 자동완성 해보자 안녕하세요. 개자이너 씸플레이입니다. html 기본 구조를 자동완성으로 불러와보겠습니다. 1. 새 index.html 파일 여기 아무것도 안 쓴 index.html 파일이 있습니다. 이제 본격적으로 코딩을 시작해 볼까 하는데 초보자라면 아직은 어색한 기본 구조가 갑자기 잘 떠오르지 않을 것이고, 경험자라면 사실 매번 같은 코드를 적는 것도 귀찮습니다. 이럴 때 에디터 프로그램의 유용함이 빛을 발휘합니다. html 자동완성을 이용해 봅시다. 2. ! + Tab !(느낌표)를 누르면 아래로 뭔가 잔뜩 뜨는데 신경 쓰지 마시고 Tab키를 눌러줍니다. html5 기본 구조가 자동완성으로 입력되는 것을 볼 수 있습니다. 얼마나 편한지 감동이 다 몰려옵니다. 반응형 작업에 필요한 뷰포트(viewport)도 잊지 않.. 2020. 11. 21.
[vs code] 비주얼 스튜디오 코드 wrap! 래핑! 감싸기를 해보자 안녕하세요. 개자이너 씸플레이입니다. 랩은 음식을 먹고 위에 씌우는 그 랩과 같은 단어입니다. 래핑 역시 같은 의미로 음식을 랩으로 포장해준다는 뜻이죠. 코딩에서의 래핑도 같은 의미입니다. 그러니 래핑이라고 하면 어떤 코드를 포장해준다고 생각하시면 됩니다. vs code에서 단축키를 이용해 래핑을 해보겠습니다. 1. 모든 명령어 보기 래핑 할 코드를 블럭지정 해줍니다. 그냥 주르륵 드래그로 잡아주시면 됩니다. Ctrl + Shift + P 단축키를 누르면 모든 명령어 보기라는 창이 뜹니다. 여기서 검색해주시면 됩니다. 최근에 사용한 적이 있어서 이미 뜨기는 하는데 같이 검색해보겠습니다. 2. wrap wrap이라고 검색하면 Emmet: 약어로 래핑이라는 명령어가 나올 겁니다. 최근에 사용한 항목이라 맨 .. 2020. 11. 19.
[vs code] 비주얼 스튜디오 코드 화면 분할을 해보자 안녕하세요. 개자이너 씸플레이입니다. 비주얼 스튜디오 코드에서 화면 분할을 해보겠습니다. 1. 분할하기 가장 간편한 방법입니다. 현재 코드를 작성하는 파일의 탭에서 오른쪽 클릭을 한 뒤 분할하고 싶은 영역을 클릭해줍니다. 위 아래 왼쪽 오른쪽이 있는데 오른쪽을 선택해보겠습니다. 오른쪽에 분할을 눌렀던 창이 하나 더 생기는 것을 볼 수 있습니다. 어느 위치에 분할하는지 정해진 것은 없습니다. 그냥 자신이 편한 분할 화면을 사용하시면 됩니다. 파일 이름 옆에 X 버튼을 누르면 분할된 화면을 닫을 수 있습니다. 2. 단축키 사용 단축키가 있다면 단축키를 사용하는 것이 인지상정! 화면 분할의 단축키는 Ctrl + \(역슬래시)입니다. 좌우로 분할하는 단축키입니다. 수직 분할은 아래 표를 참고 바랍니다. 이름 단.. 2020. 11. 18.
[vs code] 비주얼 스튜디오 코드 단축키를 검색해보자 안녕하세요. 개자이너 씸플레이입니다. 비주얼 스튜디오 코드에서 단축키를 검색해보겠습니다. 1. 바로 가기 키 vs code를 열어서 파일 > 기본 설정 > 바로 가기 키를 선택해줍니다. 단축키는 Ctrl + K Ctrl + S 입니다. 이 단축키가 조금 생소하실 텐데 어떻게 사용하는지 바로 보여드리겠습니다. 먼저 Ctrl + K 를 누르고 기다립니다. 아래에 메세지가 뜨는데 둘째 키를 잠시 기다렸다가 누르라고 알려줍니다. 키보드에서 잠시 손을 떼었다가 둘째 키인 Ctrl + S 를 마저 눌러줍니다. 두 개의 단축키를 이용해 바로가기 키를 실행시킨 모습입니다. 아래 메세지를 잘 보고 해 주시면 간편하게 열 수 있습니다. 이렇게 바로가기 키를 열어 비주얼 스튜디오 코드의 단축키를 확인해 볼 수 있습니다. 2.. 2020. 11. 16.
[vs code] 비주얼 스튜디오 코드 한글 패치 하기 안녕하세요. 개자이너 씸플레이입니다. 비주얼 스튜디오 코드가 영문판이라 편하게 한글 패치를 해보려고 합니다. [비주얼 스튜디오 코드 다운로드 받기] [coding/etc] - [vs code] 비주얼 스튜디오 코드 설치하기 (무료 에디터 프로그램) 1. 확장팩 다운받아둔 비주얼 스튜디오 코드를 열어줍니다. 무료 에디터 프로그램은 확장팩이 있는 경우가 많은데요, 사용자에게 편의를 제공하는 기능을 다운받아 사용할 수 있습니다. 지금 다운받으려는 한글 패치처럼 좀 더 편리한 기능들이 모여있는 것을 확장팩이라고 부릅니다. 그럼 본격적으로 확장팩을 이용해보겠습니다. 왼쪽 메뉴 중 가장 아래 있는 Extensions (확장) 아이콘을 클릭합니다. 아이콘을 클릭하면 검색할 수 있는 창이 하나 뜹니다. 아래로 다양한 .. 2020. 11. 2.
[vs code] 비주얼 스튜디오 코드 설치하기 (무료 에디터 프로그램) 안녕하세요. 개자이너 씸플레이입니다. 에디터 프로그램 중 하나인 vs code. 즉, 비주얼 스튜디오 코드를 설치해보겠습니다. 마이크로소프트에서 만든 에디터 프로그램으로 무료로 다운 받을 수 있습니다. 1. 비주얼 스튜디오 코드 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Lin.. 2020. 11. 1.
[codepen] 코드펜을 티스토리에 불러와보자 안녕하세요. 플입니다. 오늘은 코드펜을 이용해 코드를 불러와볼 거예요. 1. 코드펜 https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 우선 코드펜 사이트에 접속해줍니다. 그리고 로그인을 해주세요. 2. 코드 작성 오른쪽 메뉴 맨 위를 보시면 Pen이라는 메뉴가 있는데요. 이 메뉴를 클릭해주세요. 그러면 이렇게 간단하게 코드를 짤 수 있는 공간이 나와요. 아무거나 짜 볼게요. 코드는 제가 아무.. 2020. 9. 27.
반응형