CSS 개요: 잠재적 CSS 개선 사항 파악
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
CSS 개요 패널을 사용하면 페이지의 CSS를 더 잘 이해하고 잠재적인 개선사항을 파악할 수 있습니다.
CSS 개요 패널 열기
- 이 페이지와 같은 웹페이지를 엽니다.
- DevTools를 엽니다.
Customize and control DevTools > More tools > CSS Overview를 선택합니다.
또는 명령어 메뉴를 사용하여 CSS 개요 패널을 엽니다.
CSS 개요 보고서 실행 및 재실행
개요 캡처 버튼을 클릭하여 페이지의 CSS 개요 보고서를 생성합니다.
CSS 개요를 다시 실행하려면 Clear Overview 아이콘을 클릭하고 첫 번째 단계를 반복합니다.
CSS 개요 보고서 이해하기
보고서는 다음과 같은 5개의 섹션으로 구성됩니다.
- 개요 요약. 페이지 CSS에 관한 간략한 요약
색상. 페이지의 모든 색상 색상은 배경 색상, 텍스트 색상 등의 유형별로 그룹화됩니다. 이 섹션에는 저대비 문제가 있는 텍스트도 표시됩니다.
각 색상을 클릭할 수 있습니다. 예를 들어 #DADCE0
테두리 색이 사이트의 색 구성표와 일치하지 않는다고 가정해 보겠습니다. 이 색상을 사용하는 요소 목록을 가져오려면 색상을 클릭합니다.
페이지에서 요소를 강조표시하려면 목록의 요소 위로 마우스를 가져갑니다.
요소 패널에서 요소를 열려면 목록에서 요소를 클릭합니다.
글꼴 정보: 페이지의 모든 글꼴 및 일치하는 항목을 다양한 글꼴 크기, 글꼴 두께, 줄 간격별로 그룹화합니다. 색상 섹션과 마찬가지로 영향을 받는 요소의 목록을 보려면 해당하는 항목을 클릭합니다.
사용되지 않은 선언. 효과가 없는 모든 스타일로 이유별로 그룹화됩니다.
예를 들어 위의 두 선언은 콘텐츠가 인라인 요소의 높이와 너비를 결정하므로 사용되지 않습니다. 해당 요소를 보려면 어커런스를 클릭하세요.
미디어 쿼리. 페이지에 정의된 모든 미디어 쿼리로, 발생 횟수를 기준으로 내림차순으로 정렬됩니다. 영향을 받은 요소의 목록을 보려면 해당하는 항목을 클릭하세요.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2021-10-21(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]