CSS 유효성 검사

이 도구 소개

CSS 유효성 검사기는 중괄호 불일치, 세미콜론 누락, 잘못된 선언, 빈 규칙 세트 등 일반적인 CSS 문법 오류를 검사합니다. 스타일시트를 붙여넣으면 즉시 줄 번호와 함께 문제 목록을 볼 수 있습니다.

모든 검사는 브라우저에서 로컬로 실행됩니다. 가장 일반적인 구조적 오류를 다룹니다. 전체 W3C 명세 준수 검사는 공식 W3C CSS 검사 서비스를 사용하세요.

사용 방법

1. 입력 영역에 CSS 코드를 붙여넣거나 예시 (유효) 또는 예시 (오류)를 클릭하여 예제를 불러오세요.
2. 검사 버튼을 클릭하여 유효성 검사를 실행하세요.
3. 결과를 검토하세요 — 오류는 빨간색으로, 경고는 황색으로 줄 번호와 함께 표시됩니다.
4. CSS 편집기에서 문제를 수정하고 오류가 없을 때까지 다시 검사하세요.

활용 사례

프론트엔드 개발자가 적용되지 않는 스타일을 디버깅할 때 사용합니다. 세미콜론 누락으로 인해 후속 선언이 무효화되는 경우가 많습니다. CSS를 배우는 학생들이 브라우저 개발자 도구 없이 문법 실수를 빠르게 발견하는 데도 유용합니다.

자주 묻는 질문

• W3C 명세에 따라 CSS 속성을 검사하나요? — 아니요. 이 도구는 구조적 문법(중괄호, 세미콜론, 콜론)을 검사합니다. 전체 속성 검사는 W3C CSS 검사 서비스를 사용하세요.
• 유효한 CSS가 왜 경고를 표시하나요? — 검사기는 휴리스틱을 사용하여 한 줄 규칙이나 비표준 at-규칙 등 경계 사례를 플래그할 수 있습니다. 경고는 정보성이며 반드시 버그를 나타내지는 않습니다.
• CSS 변수와 사용자 지정 속성을 지원하나요? — 네. --variable-name을 포함하는 줄은 사용자 지정 속성 선언으로 인식됩니다.
• CSS가 서버로 전송되나요? — 아니요. 검사는 JavaScript를 사용하여 완전히 브라우저에서 실행됩니다. 코드는 기기를 절대 떠나지 않습니다.