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

제슬린 옌
제슬린 예
Twitter GitHub 홈페이지

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

CSS 개요 패널 열기

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

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

    CSS 개요를 클릭합니다.

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

    CSS 개요 표시 명령을 클릭합니다.

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

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

    CSS 개요 캡처

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

    개요 삭제를 탭합니다.

CSS 개요 보고서 이해하기

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

  1. 개요 요약. 페이지 CSS에 관한 간략한 요약 개요 요약

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

    색상으로 이동합니다.

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

    색상을 사용하는 요소 목록

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

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

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

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

    글꼴 정보

  4. 사용되지 않은 선언. 효과가 없는 모든 스타일로 이유별로 그룹화됩니다.

    사용되지 않은 선언.

    예를 들어 위의 두 선언은 콘텐츠가 인라인 요소의 높이와 너비를 결정하므로 사용되지 않습니다. 해당 요소를 보려면 어커런스를 클릭하세요.

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

    미디어 쿼리입니다.