DevTools 팁: CSS 개선사항 확인

Sofia Emelianova

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

보고서를 보려면 DevTools > > 도구 더보기 > CSS 개요를 열고 개요 캡처를 클릭합니다.

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

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

실습 위주의 학습 환경을 확인하려면 CSS 개요: 개선이 가능한 CSS 항목 파악을 참고하세요.

대비 문제에 관한 자세한 내용은 웹사이트 가독성 개선하기를 참고하세요.