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

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

Sofia Emelianova

이 가이드는 Chrome DevTools에서 CSS를 검사하는 데 익숙하다고 가정합니다. 기본 사항은 CSS 보기 및 변경을 참조하세요.

작성한 CSS 검사

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

가장 먼저 할 일은 요소를 검사하고 새 CSS가 실제로 요소에 적용되었는지 확인하는 것입니다.

요소 > 스타일 창에 새 CSS가 표시되지만 새 CSS가 창백한 텍스트이거나, 수정할 수 없거나, 줄이 그어진 상태이거나, 옆에 경고 또는 힌트 아이콘이 표시되는 경우가 있습니다.

Styles 창은 여러 종류의 CSS 문제를 인식하여 다양한 방식으로 강조 표시합니다.

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

일반 텍스트의 일치하는 선택기와 창백한 텍스트의 일치하지 않는 선택기

스타일 창에 줄이 그어진 채로 다음 옆에 경고 아이콘이 표시됩니다.

잘못된 속성 이름 및 잘못된 속성 값입니다.

단계별 순서에 따라 다른 속성에 의해 재정의된 속성에는 스타일 창에 줄이 그어집니다.

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

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

이러한 창백한 속성은 단계식 순서가 아니라 CSS 로직으로 인해 비활성화됩니다.

힌트가 포함된 비활성 CSS 선언입니다.

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

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

상속받은 CSS와 상속되지 않은 CSS가 나열된 '본문에서 상속됨' 섹션

간결한 속성을 사용하면 한 번에 여러 CSS 속성을 설정하여 스타일시트 가독성을 높일 수 있습니다. 그러나 이러한 속성의 짧은 특성으로 인해 약식에서 암시하는 속성을 재정의하는 긴 형식 (정확한) 속성을 놓칠 수 있습니다.

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

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

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

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

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

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