Elements
패널의 기능은?section
으로 이루어져있나요?Styles
부분의 순서가 의미하는 것은?user agent stylesheet
란?그전에,, 개발자 도구란? - Google Chrome
브라우저에 직접 내장된 웹 개발자 도구 모음.
개발자 도구를 사용하면?
Inspect
아이콘을 사용해 브라우저가 제공하는 여러 요소의 정보를 알 수 있다.HTML
로 구성되어 있는지 보여준다.CSS
요소 역시 확인할 수 있다.➡️ 그래서, elements 패널을 활용하면 웹페이지를 즉각적으로 수정할 수 있기 때문에, 디버깅을 위해 기능을 테스트하거나 속성을 변경할 때 주로 사용한다.
section
으로 이루어져있나요?container
classname
을 가진 div
태그의 자식 태그로서 5개 의 섹션으로 이뤄져있다.elements 패널의 inspect를 사용해본 결과, 반응형으로 이뤄져 있어 293 x 293으로 확인된다.
-width 100% 기준, 470px이다.
Styles
부분의 순서가 의미하는 것은?HTML이 실행되었을때 가장 먼저 적용되는 순서대로 배치가 되어있다. 개발자가 기록한 CSS와는 순서가 다르며, 가장 상위태그인 html, ID, CLASS, TAG 순서대로 배치되어 있다.
기존 CSS 순서: important, inline, id, attribute, class, tag
user agent stylesheet
란?사용자가 명시해두어야 할 속성을 override 해주지 않거나, <!DOCTYPE html>
등으로 html 파일에서 html의 최신 버전을 알려주지 않아 브라우저가 임의로 설정한 것, 각 브라우저마다 정해놓은 CSS의 기본 규칙
작성한 css 파일에서