Personal (137) 썸네일형 리스트형 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 Google 포토 Google 드라이브 이미지 불러오기 Google 포토 - 업로드 Google 드라이브 선택 이미지선택 - 업로드 완료 WordPress video width 오류, 가로 스크롤 해결 코드편집기 video를 업로드하자 아래와같이 width를 잡지못해 늘어져 가로스크롤이 생겼다. 해결해보자. 코드편집기 - 해당영역에 코드추가 style="width:100%" 완료 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 이전 1 2 3 4 5 6 7 8 ··· 18 다음
