DevTools 팁: CSS 개선사항 확인

Sofia Emelianova
Sofia Emelianova

DevTools의 CSS 개요 패널을 사용하면 페이지의 잠재적 CSS 개선사항을 한눈에 확인할 수 있습니다.

보고서를 가져오려면 DevTools > 자세히 알아보기 위해 > 도구 더보기 > CSS 개요를 열고 캡처 개요를 클릭합니다.

보고서에는 다음과 같은 여러 섹션이 표시됩니다.

  • 스타일, 선택기, 미디어 쿼리 통계가 포함된 요약입니다.
  • 대비 문제(웹에서 가장 가장 일반적인 문제)를 비롯한 사용된 색상 분석
  • 크기, 두께, 줄 간격에 대한 통계와 함께 사용된 글꼴의 분석입니다.
  • 사용되지 않은 CSS 선언.
  • 발생 횟수를 기준으로 내림차순으로 정렬된 미디어 쿼리 통계입니다.

실무형 학습 환경은 CSS 개요: CSS 개선사항 파악하기를 참고하세요.

대비 문제에 대해 자세히 알아보려면 웹사이트 가독성 개선을 참고하세요.