학습 목표

1. 개발자 도구를 사용하여 웹 개발의 가시성을 확보할 수 있다.
2. 개발자 도구의 element 탭을 이용하여 렌더링 되고 있는 요소들을 확인할 수 있다.
3. 개발자 도구의 console 탭을 이용하여 자바스크립트 디버깅을 할 수 있다.

개발자 도구란?

• 개발자 도구는 브라우저에 제공하는 하나의 도구
• 유지 보수를 쉽게 한다.
• (특히 프론트엔드 개발자는 개발자 도구를 계속 켜놓고 작업하는 경우가 많다!)

개발자 도구 여는 방법

나는 맥 유저니까 맥 단축키 !

• 개발자 도구 열기 : cmd + option + i
• Elements창 열기 : cmd + option + c
• Console창 열기 : cmd + option + j

Element 기능

HTML 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널이다.
DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있다.
변경된 사항들에 대해서는 실시간으로 웹 브라우저를 통해 확인 할 수 있지요 !

Styles 부분의 순서가 의미하는 것은?

• 하나의 요소에 여러개의 css 파일에서 스타일 적용 가능
• 가장 상단부터 css 파일의 우선 순위(구체적 >>> 추상적)에 따른 순서
• cf) CSS Specificity - inline style > id > class > tag

console창 의 기능

자바스크립트 코드 즉시 실행하게 한다. 그리고 디버깅

console.log()

프론트엔드의 경우 실제로 디버깅시 다른 도구보다 console창에 찍어보는 것을 사용한다.

내용은 간단하지만 예제가 어렵다..!