브라우저(이하 크롬 기준)에서 개발자 도구(Developer Tools)를 여는 방법은?
- 맥 기준 cmd + option + c
개발자 도구에서 특정 요소를 선택하는 방법은?
- Elements 패널에서 선택하거나 cmd + shift + c를 눌러서 브라우저에서 직접 요소를 선택할 수 있도록 전환!
개발자 도구에서 특정 요소의 css를 실시간으로 변경하는 방법은?
- Elements 패널에서 인라인으로 변경
css 요소에서 가운데 줄(취소줄)이 의미하는 것은?
- 해당 프로퍼티의 값이 적용되지 않음(오버라이딩 되었음)을 의미
개발자 도구에서 요소가 상속한 모든 스타일을 확인하는 방법은?
- Elements 패널의 Computed 탭에서 각 요소를 누르면 어떤 스타일이 오버라이딩 되었고 최종적으로 어떤 스타일이 적용되었는지 확인 가능!
개발자 도구에서 HTML을 실시간으로 편집하는 방법은?
- Elements 패널에서 요소를 선택한 뒤 마우스 오른쪽 버튼을 누르고 edit as HTML 선택
- 편집 완료 시 cmd + enter 를 누르면 편집창에서 빠져나올 수 있다
개발자 도구에서 변경한 것들의 유지 기간?
- 페이지를 리로드하면 바로 사라진다
개발자 도구에서 반응형 디자인 모드로 전환하는 방법은?
- Elements 패널 좌측 핸드폰 모양 아이콘을 누르거나 cmd + shift + m
개발자 도구에서 콘솔 패널을 여는 방법은?
- 맥 기준 cmd + option + j
개발자 도구에서 대해 더 배울 수 있는 최고의 리소스는?
- 해당 브라우저 개발자 도구의 공식 개발자 도구 문서
- 크롬의 경우 https://developer.chrome.com/docs/devtools/
- 파이어폭스는 https://developer.mozilla.org/en-US/docs/Tools
☀️