크롬디버깅 - 적용되고 있는 css 우선순위 확인하기

css 파일 내에 같은 요소를 두고 여러 줄에 걸쳐서 효과를 주게 되는 때가 있다.

그러면 어떤 것이 우선순위인지, 왜 내가 의도한 결과가 나오지 않았는지 확인해야한다.

이때 크롬디버깅 툴을 사용한다.

 

내가 확인하고 싶은 요소 우클릭-> 검사 하면 내가 확인하고 싶은 요소의 css 스타일을 확인할 수 있다.

여러 줄에 걸쳐서 적용된 효과가 우측에 우선순위가 높은 순서대로 나타난다.

 

예) 

element.style으로 들어간 효과가 inline 으로 들어간 style이라 가장 우선순위가 높게 적용되었다.

 

 

 

main-content의 font-size를 수정하고 싶으면 162번째 줄에 media쿼리로 설정한 font-size를 수정하면 된다.