[HTML, CSS] 디버깅-HTML-CSS

개발자도구 Element pannel 활용하기

 

1번 클릭 > Dock side에서 위치 변경 가능

 

 

 

인스펙터 클릭 후 해당하는 엘리먼트 영역을 선택할 수 있다.

마우스 오버만 해도 tag와 size 정보가 노출된다.

 

 

오른쪽에는 해당 엘리먼트가 가지고 있는 style 정보가 나타난다.

 

 

computed 항목 show all을 하면 기본적인 default로 가지고 있는 정보까지 모두 나타나고, show all을 해제하면 default로 설정한 것 제외한 사용자가 지정한 정보만 나타낸다.

 

 

순서와 상관없이 selector에 보면 우선순위가 존재한다. selector의 점수에 따라 style이 적용된다.

inline으로 반영하면 가장 높은 우선순위로 먼저 반영이 된다.

 

 

개발자도구 Element 탭

 

- CSS style을 inline 방식으로 빠르게 테스트 할 수 있다.
- 현재 엘리먼트의 값을 임시로 바꿀 수 있다.
- 최종 결정된 CSS 값을 확인할 수 있다.

 

 

 

 

참고 : boostcourse  https://www.boostcourse.org/web316/lecture/16679/?isDesc=false

웹 프로그래밍(풀스택)