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