Personal/Chrome (24) 썸네일형 리스트형 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 이전 1 2 3 다음
