DevTools 팁: CSS 문제 발견

Sofia Emelianova

요소에 CSS를 적용했는데 작동하지 않는 경험이 있나요?

Chrome DevTools를 사용하면 CSS 문제를 한눈에 발견하고 디버그 및 테스트할 수 있습니다.

요소 > 스타일 창에서 다양한 CSS 문제를 강조표시하는 방법을 알아보려면 동영상을 시청하세요.

• 잘못된 구문이 포함된 속성

• 재정의된 속성

• 비활성 속성

• parent에서 상속됨

  • 상속된 속성 개
  • 비상속 속성 개

• 확장 가능한 약식 속성

  • 재정의된 일반 속성
  • 활성 장기 속성

사용자 에이전트 스타일시트

• 수정할 수 없는 속성
• 수정할 수 없는 속성 재정의

추가 디버깅 팁:

• 스타일 창에서 필터를 사용하여 관심 있는 속성 하나에 초점을 맞춥니다.
• Computed 창을 사용하여 모든 캐스케이드 승자 및 계산된 값을 확인합니다.
• 계산됨 창에서 속성을 펼치고 링크를 클릭하여 스타일 창에서 소스를 찾습니다.

DevTools에서 CSS 문제를 강조표시하는 모든 방법에 관한 자세한 내용은 잘못된 CSS, 재정의된 CSS, 비활성 CSS, 기타 CSS 찾기를 참고하세요.

CSS 전문성을 높이려면 CSS 알아보기를 참고하세요.

보기 좋고 누구나 이용할 수 있는 웹사이트를 만드는 방법을 알아보려면 반응형 디자인 알아보기를 참고하세요.