CSS 개요: 잠재적 CSS 개선 사항 파악

Jecelyn Yeen

CSS 개요 패널을 사용하여 페이지의 CSS를 더 잘 이해하고 잠재적인 개선사항을 확인할 수 있습니다.

CSS 개요 패널 열기

  1. 이 페이지와 같은 웹페이지를 엽니다.
  2. DevTools를 엽니다.

  3. 자세히 알아보기 위해 Customize and control DevTools > More tools > CSS Overview를 선택합니다.

    CSS 개요로 이동합니다.

    또는 명령어 메뉴를 사용하여 CSS 개요 패널을 엽니다.

    Show CSS Overview(CSS 개요 표시) 명령어는 다음과 같습니다.

CSS 개요 보고서 실행 및 재실행

  1. 캡처 개요 버튼을 클릭하여 페이지의 CSS 개요 보고서를 생성합니다.

    CSS 개요 캡처

  2. CSS 개요를 다시 실행하려면 명확하며 개요 지우기 아이콘을 클릭하고 첫 번째 단계를 반복합니다.

    개요 지우기를 탭합니다.

CSS 개요 보고서 이해하기

보고서는 5개의 섹션으로 구성됩니다.

  1. 개요 요약. 페이지 CSS의 대략적인 요약입니다. 개요 요약

  2. 색상. 페이지의 모든 색상입니다. 색상은 배경 색상, 텍스트 색상 등 유형별로 그룹화됩니다. 이 섹션에는 저대비 문제가 있는 텍스트도 표시됩니다.

    색상으로 이동합니다.

    각 색상은 클릭할 수 있습니다. 예를 들어 #DADCE0 테두리의 색이 사이트의 색 구성표와 일치하지 않는다고 가정해 보겠습니다. 이 색상을 사용하는 요소 목록을 가져오려면 색상을 클릭합니다.

    색상을 사용하는 요소의 목록입니다.

    페이지에서 요소를 강조 표시하려면 목록에서 요소 위로 마우스를 가져갑니다.

    요소 위로 마우스를 가져가 페이지에서 요소를 강조표시합니다.

    요소 패널에서 요소를 열려면 목록에서 요소를 클릭합니다.

  3. 글꼴 정보. 페이지에 있는 모든 글꼴 및 해당 글꼴로, 다양한 글꼴 크기, 글꼴 두께, 줄 간격별로 그룹화됩니다. 색상 섹션과 마찬가지로 영향을 받는 요소의 목록을 보려면 해당하는 항목을 클릭합니다.

    글꼴 정보를 탭합니다.

  4. 미사용 선언. 영향을 미치지 않는 모든 스타일로, 이유별로 그룹화됩니다.

    사용되지 않은 선언.

    예를 들어 위의 두 선언은 사용되지 않습니다. 콘텐츠가 인라인 요소의 높이와 너비를 결정하기 때문입니다. 해당 요소를 보려면 일치하는 항목을 클릭합니다.

  5. 미디어 쿼리. 페이지에 정의된 모든 미디어 쿼리로, 발생 횟수를 기준으로 내림차순으로 정렬됩니다. 영향을 받은 요소의 목록을 보려면 해당하는 항목을 클릭합니다.

    미디어 쿼리