Personal/Chrome (25) 썸네일형 리스트형 갑자기 야후로 이동한다, McAfee 갑자기 브라우저가 게속 야후로 이동했다.원인을 알아보니 McAfee 때문이라하는데 완벽히 없애보자 우선 윈도우 - 설정 - 앱 - 설치된 앱 - 삭제 크롬(쓰던 브라우저) - 설정 검색엔진 - 검색엔진 및 사이트 검색 관리 원하는 페이지 선택 - 기본으로 설정 나도 모르게 추가되어 있는 McAfee 삭제 해결이제 막 url에 검색해도 야후로 넘어가지않는다. Chrome 개발도구 user agent stylesheet css 수정안됨 chrome의 기본 스타일시트. 클릭 및 편집할 수 없으며 추가로 설정히면 덮어쓰기되어 접목이 가능하다. Chrome 개발도구, var()정의리스트 확인하기 : 요소의 선언된 style 전체/그룹지어 확인/검색하기 요소선택 - 개발자도구 - computed 원하는 영역 hover - 화살표아이콘클릭 - 해당선언영역으로 이동가능 덮어쓰기되어 버린 구 선언부분도 확인가능하다 최상단이 최종적용된 선언. computed - group - 선언된 내용을 그룹별로 나누어 확인해볼수 있다. 검색기능또한 가능히며 해당검색과 관련된 모든 코드를 확인해볼 수 있다. 마찬가지로 원하는 영역 hover - 화살표아이콘클릭 - 해당선언영역으로 이동가능 Chrome 개발도구 grid/flex 에디터 사용하기 flex입력 - 아이콘 클릭 - 원하는 정렬방법선택 - 자동으로 추가되는 코드 확인 grid도 마찬가지 Chrome 개발도구, css var() 변수값 확인하기 Chrome 개발도구 css코드 드래그 없이 복사하기/js코드로 변환하기 정의한 줄을 복사한다. width: 300px; 속성 혹은 값만을 복사한다. width 300px 해당영역모든 코드를 복사한다. .box { width: 300px; height: 30px; text-align: center; } 자바스크립트에 삽입할 수 있도록 코드를 생성해 복사한다. width: '300px' css에 추가할 수있도록 모든 정의 코드를 복사한다. width: 300px; height: 30px; text-align: center; 자바스크립트에 삽입할 수 있도록 모든코드를 생성해 복사한다. width: '300px', height: '30px', textAlign: 'center' Chrome 개발도구, 요소의 width height padding border margin값, '한번에' 값 치수 변경 요소선택 - 검사 - styles - 사이드바표시선택 - Box Model 다이어그램 Box Model 다이어그램 - 원하는 영역치수 선택 - 변경 Chrome 개발도구 요소에 선언한 class 추가하기 요소선택 - .cls클릭 - Add new class Add new class - 원하는 class 선택 및 추가 - 완료 Chrome 개발자 도구란? 구글에서 만든 웹브라우저 크롬의 개발을 도와주는 도구 HTML, CSS, JS의 생산성을 극대화할 수 있다. 크롬설치시 이용가능 www.google.com/chrome Chrome 웹브라우저 더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게. www.google.com Chrome 개발도구 DevTools, grid인지 flex인지 확인하기 배지표시/숨기기 코드영역 - 마우스오른쪽 - bagge settings 확인 https://standout.tistory.com/815 Chrome 개발도구 DevTools 열기, 단축키 1. 마우스 이용하기 마우스오른쪽 - 검사 크롬 주소표시줄 오른쪽 끝 버튼 - 추가도구 - 개발자도구 2. 단축키 이용하기 F12 Ctrl+Shift+C Ctrl+Shift+J Ctrl+Shift+I J Console C Elements I Your last panel standout.tistory.com Chrome 개발도구 DevTools 원하는 영역 찾아가기, 자동 스크롤 크롬 개발자도구를 켤수있다면 더이상 원하는 영역까지 직접 스크롤하지않도록하자 영역선택 - 마우스오른쪽 - scroll into view 완료 자동으로 스크롤되며 크롬개발도구가 해당영역에 focus해준다. https://standout.tistory.com/815 Chrome 개발도구 DevTools 열기, 단축키 1. 마우스 이용하기 마우스오른쪽 - 검사 크롬 주소표시줄 오른쪽 끝 버튼 - 추가도구 - 개발자도구 2. 단축키 이용하기 F12 Ctrl+Shift+C Ctrl+Shift+J Ctrl+Shift+I J Console C Elements I Your last panel standout.tistory.com Chrome 개발도구 DevTools 선택자 추출하기, 복사하기 chrome 개발자도구를 켤줄만 안다면 더이상 어떠한 영역을 제어할때 선택자가 생각이 안나 검색하는 일은 없도록 하자. 영역선택 - copy - copy js path 완료 직접 확인해보자. console - 복사된 코드 붙여넣기 - enter - 추출된 해당 영역 확인 https://standout.tistory.com/815 Chrome 개발도구 DevTools 열기, 단축키 1. 마우스 이용하기 마우스오른쪽 - 검사 크롬 주소표시줄 오른쪽 끝 버튼 - 추가도구 - 개발자도구 2. 단축키 이용하기 F12 Ctrl+Shift+C Ctrl+Shift+J Ctrl+Shift+I J Console C Elements I Your last panel standout.tistory.com Chrome 개발도구 DevTools 노드/영역/태그 tag 숨기기, 삭제하기 영역선택 - 마우스오른쪽 - hide element 단축키 H - 숨기기/숨기기취소 숨기기의 경우 말그대로 '숨기기'이기에 영역은 그대로 남아있는채로 해당영역이 비어지게 보인다. 영역선택 - 마우스오른쪽 - delete element 선택후 delete혹은 마우스오른쪽 - Ctrl Z로 되돌리면 취소/되돌리기 https://standout.tistory.com/815 Chrome 개발도구 DevTools 열기, 단축키 1. 마우스 이용하기 마우스오른쪽 - 검사 크롬 주소표시줄 오른쪽 끝 버튼 - 추가도구 - 개발자도구 2. 단축키 이용하기 F12 Ctrl+Shift+C Ctrl+Shift+J Ctrl+Shift+I J Console C Elements I Your last panel standout.ti.. Chrome 개발도구 DevTools 특정영역 hover 및 focus... 강제하기 원하는 영역 선택 - :HOV클릭 - 원하는 모션 선택 https://standout.tistory.com/816 Chrome 개발도구 DevTools 명령모드, Run Open Help 개발자모드를 킨 이후, Ctrl+Shift+p https://standout.tistory.com/815 Chrome 개발도구 DevTools 열기, 단축키 1. 마우스 이용하기 마우스오른쪽 - 검사 크롬 주소표시줄 오른쪽 끝 버튼 - 추가도구 - 개발자도구 2 standout.tistory.com Chrome 개발도구 DevTools 로고다운, 영역 스크린샷 특정영역 캡쳐하기 이미지 뿐만아니라 특정 필요한 영역을 캡쳐할 수 있다. 영역선택 - 마우스오른쪽 - capture node screenshot 완료 Chrome 개발도구 DevTools rulers, hover시 눈금자 보기 개발도구켜기 - 설정 - perference - elements - show rulers on hover https://standout.tistory.com/815 Chrome 개발도구 DevTools 열기, 단축키 1. 마우스 이용하기 마우스오른쪽 - 검사 크롬 주소표시줄 오른쪽 끝 버튼 - 추가도구 - 개발자도구 2. 단축키 이용하기 F12 Ctrl+Shift+C Ctrl+Shift+J Ctrl+Shift+I J Console C Elements I Your last panel standout.tistory.com Ctrl P 혹은 Ctrl Shift F - 명령어입력 - ruler - enter혹은 클릭 https://standout.tistory.com/816 Chrome 개발도구 DevTools.. Chrome 개발도구 DevTools, 노드 html 보기 영역선택 - 마우스오른쪽 - 검사 - 확인 개발자도구켜기 - Inspect 아이콘 클릭 - 영역선택 - 확인 https://standout.tistory.com/815 Chrome 개발도구 DevTools 열기, 단축키 1. 마우스 이용하기 마우스오른쪽 - 검사 크롬 주소표시줄 오른쪽 끝 버튼 - 추가도구 - 개발자도구 2. 단축키 이용하기 F12 Ctrl+Shift+C Ctrl+Shift+J Ctrl+Shift+I J Console C Elements I Your last panel standout.tistory.com Chrome 개발도구 DevTools, media query 인식/코드확인하기 추가옵션 - 미디어 쿼리 표시 두가지색의 bar를 확인할 수 있다. 파란색이 max, 노란색이 min영역 원하는 영역 - 마우스 오른쪽 - 소스코드경로 클릭 - 소스확인 Chrome 개발도구 열기 https://standout.tistory.com/815 Chrome 개발도구 DevTools 열기, 단축키 1. 마우스 이용하기 마우스오른쪽 - 검사 크롬 주소표시줄 오른쪽 끝 버튼 - 추가도구 - 개발자도구 2. 단축키 이용하기 F12 Ctrl+Shift+C Ctrl+Shift+J Ctrl+Shift+I J Console C Elements I Your last panel standout.tistory.com 뷰포트 시뮬레이션 이용하기 https://standout.tistory.com/818 Chrome.. Chrome 개발도구 DevTools 모바일/반응형 뷰포트 시뮬레이션: 모바일로보기 모바일화면 회전하기 Chrome 개발도구켜기 https://standout.tistory.com/815 Chrome 개발도구 DevTools 열기, 단축키 1. 마우스 이용하기 마우스오른쪽 - 검사 크롬 주소표시줄 오른쪽 끝 버튼 - 추가도구 - 개발자도구 2. 단축키 이용하기 F12 Ctrl+Shift+C Ctrl+Shift+J Ctrl+Shift+I J Console C Elements I Your last panel standout.tistory.com Toggle Device Toolbar 모바일 뷰포트 시뮬레이션 클릭 및 모바일선택 상단 바를 클릭해 사이즈 조절하거나 혹은 직접 수치입력 혹은 드래그를 통해 사이즈 조절 + 회전시키기 Chrome 복사안되는 글 게시물 복사하기, Javascript 비활성화 Javascript 비활성화하기 Ctrl+Shift+p javascript 입력 Disabled javascript 선택 - enter https://standout.tistory.com/816 Chrome 개발도구 DevTools 명령모드, Run Open Help 개발자모드를 킨 이후, Ctrl+Shift+p https://standout.tistory.com/815 Chrome 개발도구 DevTools 열기, 단축키 1. 마우스 이용하기 마우스오른쪽 - 검사 크롬 주소표시줄 오른쪽 끝 버튼 - 추가도구 - 개발자도구 2 standout.tistory.com Chrome 개발도구 DevTools 명령모드, Run Open Help 개발자모드를 킨 이후, Ctrl+Shift+p https://standout.tistory.com/815 Chrome 개발도구 DevTools 열기, 단축키 1. 마우스 이용하기 마우스오른쪽 - 검사 크롬 주소표시줄 오른쪽 끝 버튼 - 추가도구 - 개발자도구 2. 단축키 이용하기 F12 Ctrl+Shift+C Ctrl+Shift+J Ctrl+Shift+I J Console C Elements I Your last panel standout.tistory.com 기본값, 명령 Run 예시로 사용된 아래 Disable JavaScript는 실행시 복사를 막은 게시물의 txt및 이미지를 복붙할 수 있어 자주 사용되는 기능 중 하나다. Run > 의 상태에서 지우기(Backspace)를 누르면 Open, 원하는.. Chrome 개발도구 DevTools 열기, 단축키 1. 마우스 이용하기 마우스오른쪽 - 검사 크롬 주소표시줄 오른쪽 끝 버튼 - 추가도구 - 개발자도구 2. 단축키 이용하기 F12 Ctrl+Shift+C Ctrl+Shift+J Ctrl+Shift+I J Console C Elements I Your last panel Chrome 크롬 브라우저 하얀화면, 오류 열리지않음 pc 혹은 노트북에서 일어나는 현상, 예상치못하게 종료되거나 과부화시 일어남. 작업표시줄 - 마우스오른쪽 - 작업관리자 - 크롬 - 마우스 오른쪽 - 작업끝내기 크롬 원격 Chrome Remote Desktop 한글키 설정 처음 크롬원격 접속시 따로 설정을 해주지않으면 한글이 입력되지 않는다. 오른쪽 메뉴바 열기 - 원격컨트롤 - 키 매핑 구성 - 새로운 매핑 클릭 - AltRight/Lang1 입력 - 확인 Chrome 북마크 보이기/숨기기 단축키 Ctrl + Shift + B 이전 1 다음
