CSS 유효성 검사기
CSS 코드의 구문 오류 유효성 검사
CSS 입력
유효성 검사 결과
CSS 유효성 검사 예제
유효한 CSS는 올바른 구문을 가지며, 잘못된 CSS는 오류를 포함합니다. 예제:
유효한 CSS
잘못된 CSS – 세미콜론 누락
첫 번째 줄에 1200px 뒤 세미콜론이 없습니다.
위의 편집기에 예제 중 하나를 붙여넣어 유효성 검사 결과를 확인하세요. 샘플을 사용하여 더 많은 데이터를 불러오세요.
CSS 유효성 검사기란?
CSS(Cascading Style Sheets)에는 구문 규칙이 있습니다. 누락된 세미콜론, 닫히지 않은 중괄호, 잘못된 속성 이름이나 잘못된 선택자는 파싱 오류를 일으킵니다. CSS 유효성 검사기는 스타일시트가 올바르게 구성되어 있는지 확인하고 줄과 위치와 함께 오류를 보고합니다. W3C CSS 명세가 언어를 정의합니다.
이 도구는 CSS를 파싱하고 구문 오류를 보고합니다. 브라우저에서 완전히 실행됩니다. 서버에 아무것도 전송되지 않습니다. 유효한 CSS를 포맷하려면 CSS 포매터를 사용하세요. 최소화에는 CSS 최소화기를 사용하세요.
이 도구 사용 방법
CSS 붙여넣기 또는 업로드
CSS를 복사하여 왼쪽 편집기에 붙여넣으세요. 업로드를 클릭하여 .css 파일을 불러올 수도 있습니다. 샘플 버튼은 예제 데이터를 불러옵니다.
유효성 검사 결과 확인
오른쪽 패널에 유효 또는 잘못됨이 표시됩니다. 잘못된 경우 줄과 위치와 함께 오류가 표시됩니다. 일반적인 문제: 닫히지 않은 중괄호, 누락된 세미콜론, 잘못된 속성값 또는 잘못된 미디어 쿼리.
수정 후 재검사
입력에서 오류를 수정하고 다시 유효성 검사를 하세요. 포맷에는 CSS 포매터를 사용하세요. SCSS나 Less의 경우 SCSS → CSS 또는 Less → CSS로 먼저 컴파일하세요.
일반적인 CSS 오류
닫히지 않은 중괄호 }나 대괄호 ]가 자주 발생합니다. 속성 사이에 누락된 세미콜론은 연속적인 파싱 오류를 일으킬 수 있습니다. 잘못된 속성 이름이나 값 (예: display 대신 dispaly 같은 오타)은 규칙을 깨뜨립니다. 잘못된 @media나 @keyframes 블록도 오류를 일으킵니다. W3C CSS 명세가 유효한 구문을 정의합니다. W3C CSS 유효성 검사기는 서버 측 유효성 검사를 제공합니다.
CSS 유효성 검사가 도움이 되는 경우
많은 개발자들이 적용되지 않는 스타일을 디버깅할 때, 서드파티 CSS를 통합할 때, 또는 프로덕션 배포 전에 유효성 검사가 필요합니다. 단 하나의 구문 오류가 전체 스타일시트를 깨뜨릴 수 있습니다. 여기서 CSS를 실행하면 레이아웃이나 렌더링 문제를 일으키기 전에 문제를 발견합니다. Vite나 Webpack 같은 빌드 도구는 항상 CSS 오류를 명확하게 보고하지 않습니다—여기서 유효성 검사를 하면 정확한 줄 번호를 얻을 수 있습니다.
팀원과 스타일을 공유하거나 풀 리퀘스트를 제출하기 전에도 유용합니다. 유효성 검사 후 브라우저 호환성을 위해 CSS 프리픽서를 사용하세요. 유효한 CSS 포맷에는 CSS 포매터를 사용하세요. SCSS나 Less의 경우 SCSS → CSS 또는 Less → CSS로 먼저 컴파일하세요.
자주 묻는 질문
CSS가 유효하지 않은 경우는?
닫히지 않은 중괄호나 대괄호, 누락된 세미콜론, 잘못된 속성 이름이나 값, 잘못된 선택자 또는 @media나 @keyframes의 구문 오류입니다. 유효성 검사기가 위치를 정확히 알려줍니다.
브라우저 지원을 확인하나요?
이 도구는 구문만 유효성 검사합니다—CSS가 올바르게 구성되어 있는지 여부입니다. 브라우저 호환성은 확인하지 않습니다. 그것을 위해서는 Can I Use를 사용하세요.
내 데이터는 안전한가요?
네. 유효성 검사는 브라우저에서 완전히 실행됩니다. 서버에 데이터가 전송되지 않습니다.
SCSS나 Less를 지원하나요?
이 도구는 일반 CSS를 유효성 검사합니다. SCSS나 Less의 경우 SCSS → CSS 또는 Less → CSS로 먼저 컴파일한 후 출력을 유효성 검사하세요.
벤더 프리픽스는 어떻게 되나요?
벤더 프리픽스 속성 (예: -webkit-, -moz-)은 유효합니다. 유효성 검사기가 이를 허용합니다. 프리픽스 자동 추가에는 CSS 프리픽서를 사용하세요.
관련 도구
CSS 명세: W3C CSS. MDN CSS가 참조입니다. W3C CSS 유효성 검사기는 서버 측 유효성 검사를 제공합니다. Can I Use는 브라우저 지원을 제공합니다.