반응형 IT/크롬 브라우저6 크롬(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. 이전 1 다음 반응형
