< 개발자 도구 >

👌🏻 Elements panel

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

* Style부분의 우선순위
- 하나의 요소에 여러개의 css 파일에서 스타일 적용 가능가장
- 상단부터 css 파일의 우선 순위(구체적 >>> 추상적) 에 따른 순서
   (ex) !important > html에서 style을 직접지정 > #ID > .class > 태그이름 > user agent sheet 
( !important는 id나 class에는 적용안됨!! )
❗️ user agent stylesheet 란?
- 브라우저의 기본 스타일 값을 의미함
- 브라우저 마다 스타일 기본값이 다른데 (Chrome, Safari, IE 등 브라우저의 종류에 따라 기본적으로 설정되어 있는 속성 값이 다르기 때문에..)개발 시작 단계에서 reset.css 혹은 normalize.css 파일에서 기본 스타일 값을 모두 초기화 시키고 작업 시작. >>> 브라우저의 종류에 상관 없이 동일한 화면 출력 가능

☝🏻 Console panel 

< 기능 >
- 자바스크립트 코드 즉시 실행
- 디버깅

✌🏻 Network panel

< 기능 >
- http 네트워크 통신 확인API 크롤링
- 페이지 로딩 성능 테스트
- 이미지, 영상 등의 소스 (mock data 활용)

🤟🏻Application panel

애플리케이션이 무엇인지

애플리케이션 저장방법

애플리케이션 사용방법