개발자도구 Element(요소) 패널

1. Element 패널의 기능은?

• 웹 페이지의 구성 (DOM)을 확인할 수 있다.
  
  

• DOM ? ⇒ (Document Object Model) 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다.
• 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는 DOM을 변경하는 것이고, 이때 필요한 것이 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합인 DOM API이다.
• 참고자료 : https://poiemaweb.com/js-dom

 

 

• 구성요소의 스타일 속성(CSS)을 확인할 수 있다.

• 각 요소에 적용된 스타일 속성을 확인하는 방법(1,2번)

• element 내부에서 style, computed, Layout, Event Listeners, DOM BreakPoints, Properties 등

• CSS 수정, UI 수정 ...

• 그리고 위의 세부 패널에서 실제로 값들을 수정했을 때 변경되는 UI를 확인할 수 있습니다.

 

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

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

3. user agent stylesheet 란?

• 브라우저의 기본 스타일 값을 의미. 브라우저 마다 스타일 기본값이 다름.
• Chrome, Safari, IE 등 브라우저의 종류에 따라 기본적으로 설정되어 있는 속성 값이 다르기 때문에 개발 시작 단계에서 reset.css 혹은 normalize.css 파일에서 기본 스타일 값을 모두 초기화 시키고 작업 시작. >>> 브라우저의 종류에 상관 없이 동일한 화면 출력 가능