개발자도구 Elements 패널

백수·2022년 6월 25일

1. Elements 패널의 기능

웹 페이지의 구성 (DOM)

구성요소의 스타일 속성 (CSS)

CSS 수정, UI 수정 ...

위 이미지처럼 좌측이 HTML , 우측이 CSS이다.

2. html(DOM) 구조 확인 하는 법

HTML을 확인 하고 해당요소에 오른쪽클릭을 하여	Edit as Html을 선택하면 태그를 바로 바로 수정하고  확인 할 수 있다.
그러나 실제 원본 파일에는 반영 되지 않는다.

3. CSS 확인하는 법

CSS 우선순위

하나의 요소에 여러개의 CSS 파일에서 스타일이 적용 가능하다.
주의 여러 css파일들을 연결할수 있지만 본인이 작업하는 css파일 태그가 제일 밑에 있어야 내가 작업 한 내용을 그대로 확인 할수 있다.

스타일칸에서 어느 style이 우선적적으로 사용 되는지 확인 가능하다
순서는 style란의 위에서 부터 우선순위가 적용되는지 확인 가능하다

Specificity (css 명시도)

css는 우선 순위가 있다 순서는 inline style > id > class > tag

4. user agent stylesheet

간혹 CSS작업후 내가 작업 한 내용과 다른 결과물이 보일때가 있다 혹은 내가 크롬으로 확인 한 내용과 다른 브라우저에서 작업물의 결과과 다르게 보일때가 있는데 브라우저마다의 default값 때문 일 수 있다.

위 이미지 처럼 크롬에서 body 에 마진이 들어간걸 볼 수 있다.
해결 방법은 기본값을 리셋 해주는 방법이 있다

아래코드를 css에 넣어주면된다 .
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/ HTML5 display-role reset for older browsers /
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

이것 역시 지저분하고 복잡하다면 cdn으로 (헤더에) 넣어주면된다
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">