본문 바로가기

IT39

VScode 작업 환경 세팅 동기화 VScode '작업 환경 세팅'(확장 프로그램, 단축키, 코드 조각..등등)을 github에 동기화(업로드) 해두었다가 다른 컴퓨터에서도 내 '작업 환경 세팅'을 다운 받아 사용할 수 있게 해주는 기능이다. [동기화 방법] 1. VScode '파일'메뉴에서 '설정 동기화 켜기...'를 클릭한다.2. '로그인 및 켜기' 버튼을 눌러준다.3. 동기화할 클라우드를 Github로 선택해준다.4. Github 로그인 해준다.5. 'Authorize Visual-Studio-Code' 버튼을 눌러준다.6. 웹 페이지 Alert창에 'Visual Studio Code 열기' 버튼을 눌러준다.7. VS code Alert창에 '열기' 버튼을 눌러준다.8. 다시 VS code '파일'메뉴에서 '설정 동기화 켬'메뉴를 .. 2024. 5. 2.

VScode 코드조각(Snippets) 기능 코드조각(Snippets) 기능이란? 코딩할 때 자주 쓰이는 소스 코드(조각)을 단축키로 지정해 사용하는 기능이다. (코드조각(Snippets) 기능을 사용하면 작업 속도를 높이데 도움이 된다.) [사용 방법] 1. VScode 파일 메뉴에서 '기본 설정 > 사용자 코드 조각' 메뉴를 (선택)클릭한다.2. VScode 커맨드 팔레트에서 '새 전역 코드 조각 파일...'을 선택(클릭)한다.3. 생성할 코드조각 파일 이름을 (영문으로) 지정한 후 Enter키를 눌러러준다. (예: mySnippets) 4. 생성된 코드조각 파일에서 내가 자주 쓰이는 코드(조각)과 단축키를 지정해주면 된다. [예시 코드]"목록 태그": { // 코드 조각 이름 "scope": "html", // 언어 지정(h.. 2024. 5. 2.

VScode에서 원격 FTP 접속 하기 [ftp-simple] 1. 원격 FTP 접속을 하기 위해 'ftp-simple' 확장 프로그램을 설치해준다. 2. 설치가 완료 되었으면 [Ctrl + Shift + P] 키를 눌러 커맨드 팔레트을 열고 명령어 'ftp-simple : Config - FTP connection setting'을 입력하여 FTP 설정 파일을 열어준다. 3. FTP 설정 파일에 접속할 FTP 이름(별칭)과 서버 주소, 아이디, 비밀번호를 입력한 후 저장해준다. 4. 설정이 완료 되었으면 다시 커맨드 팔레트[Ctrl + Shift + P]을 열어 명령어 'ftp-simple : Remote directory open to workspace'을 입력하고 방금 설정했던 'FTP 이름(별칭)'과 'Current directory'를 선택(클릭)하여 원격.. 2024. 5. 2.

VScode 유용한 확장 프로그램 [HTML 관련]• htmltagwrap텍스트를 HTML 태그로 감싸거나 HTML 태그에 부모 태그를 만들때 사용하는 확장 프로그램 입니다.[사용방법]선택 영역을 드래그 하여 단축키 [Alt + W]를 누르면 됩니다.• Auto Rename TagHTML 태그를 수정 할때 (쌍을 이루는) '시작 태그' 와 '닫는 태그'를 동시에 수정해 주는 확장 프로그램 입니다.[사용방법]설치 시 자동 실행 됩니다.• Auto Close TagHTML 태그를 작성할때 '닫는 태그'를 자동으로 생성 해주는 확장 프로그램 입니다.[사용방법]설치 시 자동 실행 됩니다.[CSS 관련]• HTML to CSS / LESS / SCSSHTML 코드의 class, id 속성값을 CSS 스타일 구문으로 (추출) 변환 해주는 확장 프로.. 2024. 5. 2.

VS code 자주 쓰이는 단축키 # 텍스트 관련 • 코드 한줄라인 위치변경: [ Alt + 방향키↑↓ ] • 코드 한줄라인 복사하기: [ Shift + Alt + 방향키↑↓ ] • 같은 코드, 순차적 선택: [ Ctrl + D ] • 같은 코드, 이전 선택 취소: [ Ctrl + U ] • 같은 코드, 전체 선택: [ Ctrl + Shift + L ] • 빠른 텍스트 커서 이동: [ Ctrl + 방향키←→ ] • 아래행 이동: [ Ctrl + Enter ] • 위로행 이동: [ Ctrl + Shift + Enter ] • 마지막 }중괄호 이동: [ Ctrl + Shift.. 2024. 5. 2.

크롬(Chrome) 브라우저 단축키 • 새창 열기: [ Ctrl + N ] • 시크릿 모드 새창 열기: [ Ctrl + Shift + N ] • 새 탭 열기: [ Ctrl + T ] • 현재 탭 닫기: [ Ctrl + W ] • 닫은 탭 복구 하기: [ Ctrl + Shift + T ] • 다음 탭 이동: [ Ctrl + Tab ] • 이전 탭 이동: [ Ctrl + Shift + Tab ] • 특정 탭 이동: [ Ctrl + 숫자키 ] • 새탭에서 링크 열기: [ Ctrl 누른 상태에서 링크버튼 클릭 ] • 북마크 추가: [ Ctrl + D ] • 북마크바 표시/숨기기: [ Ctrl + Shift + B ] • 방문 기록 열기: [ Ctrl + H ] • 인터넷 사용 기록/쿠키/캐시 옵션 열기:.. 2024. 5. 1.

크롬(Chrome) 개발자 도구 단축키 # 개발자 도구 열기 • 개발자 도구 열기: [ F12 ] • 개발자 도구 열기 + 요소 선택: [ Ctrl + Shift + C ] • 개발자 도구 재실행: [ Alt + R ] • 모바일 모드 열기: [ Ctrl + Shift + M ] # 공통 단축키 • 개발자 도구, 다음 패널 이동: [ Ctrl + ] ] • 개발자 도구, 이전 패널 이동: [ Ctrl + [ ] • 개발자 도구, 특정 패널 이동: [ Ctrl + 숫자키 ] • 전역 검색(HTML, CSS, JS 모든파일): [ Ctrl + Shift + F ] • 하단 콘솔 패널 열기:.. 2024. 5. 1.

크롬 브라우저에서 코드 에디터 기능 사용하기 크롬 브라우저의 'File System'기능을 통해 코드 편집이 가능하다. (File 추가, 삭제, 수정, 저장) [사용 방법] 1. 크롬 브라우저에서 [F12]키를 눌러 크롬 개발자 도구를 열고 '소스(Sources)' 패널을 클릭한 다음 좌측에 있는 'Filesystem'탭을 클릭해준다. 2. 'Add forder to workspace' 버튼을 눌러 편집하고자 하는 프로젝트(Project) 폴더를 선택해준다. (마우스 '드래그 앤 드롭'으로 폴더를 지정할 수도 있다.) 3. 크롬 브라우저 상단에 '알림 메세지'가 뜨면 '허용' 버튼을 눌르고, 'Filesystem' 기능을 사용하면 된다. (파일을 수정후 저장할 때에는 [ Ctrl + S ]키를 누르면 된다.) 2024. 5. 1.

크롬 브라우저 Overrides(재정의) 기능 Overrides(재정의) 기능이란?크롬 개발자 도구에서 CSS를 변경하고 웹 페이지를 '새로고침'하게 되면 변경된 사항이 사라지게 되는데 Overrides 기능을 적용시키면 '새로고침'하여도 변경된 사항을 유지시킬 수 있다. (CSS 뿐만 아니라 HTML, JS에서도 적용 가능하다.) [사용 방법] 1. 크롬 브라우저에서 [F12]키를 눌러 크롬 개발자 도구를 열고 '소스(Sources)' 패널을 클릭한 다음 좌측에 있는 'Overrides'탭을 클릭해준다. 2. 'Select folder for overrides'버튼을 클릭하고 파일을 저장할 'Overrides' 폴더를 생성 한 후 '폴더 선택' 버튼을 클릭 한다. 3. 크롬 브라우저 상단에 '알림 메세지'가 뜨면 '허용' 버튼을 클릭해준다. .. 2024. 5. 1.

크롬 개발자 도구의 '요소(Elment)'패널 기능 정리 [DOM 요소 조작] • 요소 선택: [ Ctrl + Shift + C ] • 하위 요소 펼침: [ 방향키 오른쪽/왼쪽 ] • 요소 이동: [ 방향키 위/아래 ] • 요소 위치 바꾸기: [ 마우스 드래그 이동 ] • 요소 수정: [ F2 ]• 요소 수정후 적용: [ Ctrl + Enter ] • 요소 속성 추가/수정: [ Enter ] • 요소 다음 속성 이동: [ Tab ]• 요소 삭제: [ Del ]• 요소 검색: [ Ctrl + F ]• 요소 숨김/취소: [ H ] • 요소에 적용된 CSS 복사: [ Ctrl + Alt + C ] [CSS 조작] • 외부 스타일시트(CSS) 보기 • 요소에 실제로 적용된 CSS만 보기 • 요소의 CSS 검색 하기 • 요소에 '클래스' 추가 하기 • 요소의 '클래스.. 2024. 5. 1.

크롬 브라우저를 데스크톱 앱(APP)처럼 실행하기 (일렉트론 개발 작업 없이) 크롬 브라우저로 특정 '웹 사이트'나 내가 만든 '웹 소스코드(html, css, js)'를 데스크톱 앱(App)처럼 실행할 수 있는 방법입니다. [데스크톱 앱 실행] 1. 크롬 브라우저가 설치된 디렉토리에서 chrome.exe 파일을 '마우스 우클릭'한 다음 '바탕 화면에 바로 가기 만들기'를 클릭 해준다. 2. 바탕화면에 생성된 chrome.exe 파일을 '마우스 우클릭'해서 '속성'을 클릭 해준다. 3. 속성창에서 '대상(T): 파일 경로' 끝부분에 한칸 띄우고 ' --app='구문을 추가한 다음 '웹 주소'나 'HTML 파일 경로'를 입력한 후 적용 및 확인 버튼을 눌러준다. 4. 바탕화면에 chrome.exe 파일을 실행시켜 보면 크롬 브라우저가 (주소창 없이) 데스.. 2024. 5. 1.

윈도우(Window) 단축키 • 바탕화면 이동: [ 윈도우키 + D ] (원상태 이동 시 한번더 눌러줌) • 이모티콘(이모지): [ 윈도우키 + 마침표키(.) ] • 클립보드: [Ctrl + C (복사) > 윈도우키 + v ] • 스크린샷(캡처 도구): [ 윈도우키 + Shift + S ] • 화면 녹화: [ 윈도우키 + G ](캡쳐 > 녹화 시작) • 화면 분할: [윈도우키 + 좌우 화살표키 ] • 작업 전환: [ Alt + Tab] • 가상 데스크탑 생성: [ 윈도우키 + Ctrl + D ]• 가상 데스크탑 이동: [ 윈도우키 + Ctrl + 좌우 화살표키 ]• 가상 데스크탑 닫기: [ 윈도우키 + Ctrl + F4 ]• 실행된 가상 데스크탑 펼쳐 보기: [ 윈도우키 + Tab ] • 돋보기 열기: [ 윈도우키 + 플러.. 2024. 5. 1.

이전 1 2 3 4 다음

티스토리툴바