반응형 전체 글39 크롬(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. 윈도우 터미널 (기본) 명령어 • HELP Windows 명령에 대한 도움말 정보를 제공합니다.• VER Windows 버전을 표시합니다.• TREE 드라이브 또는 경로의 디렉터리 구조를 그래픽으로 표시합니다.• DIR 디렉터리에 있는 파일과 하위 디렉터리 목록을 보여줍니다.• MD 디렉터리를 만듭니다.(폴더 생성)• RD 디렉터리를 제거합니다. (폴더 제거)• CD 해당하는 디렉토리로 진입합니다.• CD.. 이전 디렉터리로 진입합니다.• CLS 화면을 지웁니다.• Ctrl + C 명령어 취소• TYPE 파일의 내용을 표시합니다.• REN 파일 이름을 바꿉니다.• DEL 파일을 지웁니다. (파일 제거)• IPCONFIG 윈도우 TCP/IP 설정상태 확인 명령어 (IP configura.. 2024. 5. 1. 윈도우 "Chocolatey" 기본 사용 방법 https://blog37.tistory.com/entry/%EC%9C%88%EB%8F%84%EC%9A%B0-Chocolatey-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%A4%EB%8B%88%EC%A0%80-%EC%84%A4%EC%B9%98-%EB%B0%A9%EB%B2%95 윈도우 "Chocolatey" 패키지 매니저 설치 방법Chocolatey 이란?명령어 기반(CLI)으로 "Window 소프트웨어"를 쉽고 빠르게 설치 할 수 있게 해주는 프로그램이다.(기존 방식으로 소프트웨어를 설치하려면, 해당 홈페이지를 방문하고 다운로드해서blog37.tistory.com[Chocolatey 기본 사용 방법]1. 윈도우 메뉴에서 PowerShell이나 윈도우 터미널을 관리자 권한으로 실행시켜준.. 2024. 5. 1. 윈도우 "Chocolatey" 패키지 매니저 설치 방법 Chocolatey 이란?명령어 기반(CLI)으로 "Window 소프트웨어"를 쉽고 빠르게 설치 할 수 있게 해주는 프로그램이다.(기존 방식으로 소프트웨어를 설치하려면, 해당 홈페이지를 방문하고 다운로드해서 인스톨 파일을 실행시켜 주어야 하는데... Chocolatey를 사용하면 이러한 번거로운 과정이 없이 명령어 하나로 여러 소프트웨어를 한번에 설치가 가능하다.)[Chocolatey 설치 방법]1. 윈도우 시작메뉴에서 PowerShell를 관리자 권한으로 실행시켜 준다. 2. 실행된 PowerShell에서 명령어 Get-ExecutionPolicy를 입력 후 Enter키를 눌러준다.(만약 Restricted가 출력된다면, 또 다시 명령어 Set-ExecutionPolicy AllSigned를 입력 후 .. 2024. 5. 1. 이전 1 2 3 4 5 다음 반응형
