이 페이지는 Cloud Translation API를 통해 번역되었습니다.

잘못된 CSS, 재정의된 CSS, 비활성 CSS 찾기

Sofia Emelianova

이 가이드에서는 사용자가 Chrome DevTools에서 CSS 검사에 익숙하다고 가정합니다. 기본사항을 알아보려면 CSS 보기 및 변경하기를 참고하세요.

작성한 CSS 검사

요소에 CSS를 추가했는데 새 스타일이 제대로 적용되는지 확인하려는 경우를 가정해 보겠습니다. 페이지를 새로고침하면 요소가 이전과 동일하게 표시됩니다. 문제가 발생했습니다.

먼저 요소를 검사하여 새 CSS가 실제로 요소에 적용되었는지 확인합니다.

요소 > 스타일 창에 새 CSS가 표시되지만 새 CSS가 흐리게 표시된 텍스트로 표시되거나 수정할 수 없거나 취소선이 그어져 있거나 옆에 경고 또는 힌트 아이콘이 표시되는 경우가 있습니다.

스타일 창은 다양한 종류의 CSS 문제를 인식하고 다양한 방식으로 강조 표시합니다.

스타일 창에는 일치하는 선택기가 일반 텍스트로, 일치하지 않는 선택기가 옅은 텍스트로 표시됩니다.

일치하는 선택기는 일반 텍스트로, 일치하지 않는 선택기는 옅은 텍스트로 표시됩니다.

스타일 창에 다음과 같은 항목 옆에 취소선이 표시되고 경고 아이콘이 표시됩니다.

잘못된 속성 이름 및 잘못된 속성 값

스타일 창에는 계층 구조 순서에 따라 다른 속성에서 재정의한 속성이 취소선으로 표시됩니다.

이 예에서 요소의 width: 300px; 스타일 속성은 .youtube 클래스의 width: 100%를 재정의합니다.

스타일 창은 옅은 텍스트로 표시되며 유효하지만 다른 속성으로 인해 영향을 미치지 않는 속성 옆에 정보 아이콘을 표시합니다.

이러한 옅은 속성은 계층 구조 순서가 아닌 CSS 로직으로 인해 비활성 상태입니다.

힌트가 있는 비활성 CSS 선언

이 예에서 display: block; 속성은 플렉스 또는 그리드 레이아웃을 제어하는 justify-content 및 align-items를 사용 중지합니다.

스타일 창에는 기본 상속에 따라 Inherited from <element-name> 섹션의 속성이 나열됩니다.

'body에서 상속됨' 섹션에 상속된 CSS와 상속되지 않은 CSS가 나열됩니다.

약어 (간결한) 속성을 사용하면 여러 CSS 속성을 한 번에 설정할 수 있으며 스타일시트를 더 읽기 쉽게 만들 수 있습니다. 그러나 이러한 속성은 길이가 짧기 때문에 약어로 암시된 속성을 재정의하는 긴 형식 (정확한) 속성을 놓칠 수 있습니다.

스타일 창에는 단축 속성이 단축된 모든 속성이 포함된 드롭다운 목록으로 표시됩니다.

드롭다운 목록이 있는 축약 속성입니다.

이 예시에서는 단축된 속성 4개 중 2개가 실제로 재정의됩니다.

스타일 창에는 수정할 수 없는 속성이 기울임꼴 텍스트로 표시됩니다. 예를 들어 다음 소스의 CSS는 수정할 수 없습니다.

user agent stylesheet: Chrome의 기본 스타일시트입니다.
요소의 스타일 관련 HTML 속성(예: 높이, 너비, 색상 등)입니다. DOM 트리에서 수정하면 스타일 창의 CSS가 업데이트되지만 그 반대의 경우는 그렇지 않습니다.

이 예에서는 <svg> 요소의 height="48" 속성이 50로 설정됩니다. 이렇게 하면 스타일 창의 svg[Attributes Style] 아래에 있는 해당 속성이 업데이트됩니다.