손상된 CSS를 여기에 붙여넣고 "CSS 수정하기!!"를 클릭하여 복원하세요유효하지 않은 CSS 입력

CSS 수정 도구란?

CSS는 조용히 실패합니다. color: #222 뒤에 세미콜론을 빼먹거나, text-align 대신 txt-align이라고 치거나, #cart-summary 앞에 {를 하나 더 남기거나, content: "Total처럼 문자열을 닫지 않아도 — 브라우저는 오류를 던지지 않고 그저 그 규칙만 무시합니다. 이 도구는 그런 손상을 잡아내 실제로 파싱되는 CSS를 돌려줍니다. .order-row나 #cart-summary 같은 실제 셀렉터에서 잘 동작합니다.

CSS 사양은 W3C CSS Working Group이 관리하며 활발한 초안은 drafts.csswg.org에 있습니다. 각 속성의 동작을 매일 참조할 때는 MDN CSS가 표준이고, 수정 후에는 W3C CSS Validator로 결과를 다시 확인하고 caniuse.com에서 브라우저 지원 상태를 점검할 수 있습니다.

처리는 서버에서 이루어지며 입력을 보관하지 않습니다. 규칙을 고치고, 결과를 스타일시트에 다시 붙여넣고, 배포하세요.

CSS 수정 도구 사용법

세 단계입니다. 각 단계는 이 페이지의 실제 버튼과 패널을 사용합니다.

손상된 CSS 붙여넣기 또는 샘플 불러오기

왼쪽 편집기에 손상된 CSS를 붙여넣으세요. 샘플 CSS를 클릭하면 일부러 망가뜨려 둔 가장 흔한 오류 예시가 로드됩니다. 도구가 처리하는 손상된 CSS 예시:

.order-row {
  color: #222
  padding 12px;
}

누락된 세미콜론, 짝이 안 맞는 {}, 속성과 값 사이의 콜론 누락, 닫히지 않은 문자열, txt-align처럼 명백한 속성명 오타 등을 복원합니다.

"CSS 수정하기!!" 클릭

도구 모음의 녹색 CSS 수정하기!! 버튼을 클릭하세요. 도구가 입력을 분석해 구문 문제를 찾아내고 오른쪽 패널에 복원된 버전을 출력합니다. 처리 중에는 로딩 표시기가 나타납니다.

수정된 출력 확인

오른쪽 패널에 복원된 CSS가 표시됩니다. 속성 값은 그대로이고 그 주변의 구문만 수정됩니다. 출력을 스타일시트에 다시 붙여넣으세요.

이 도구를 활용하는 상황

레거시 스타일시트 정리

오래된 스타일시트에는 작은 구문 손상이 쌓이기 마련입니다 — 위아래 규칙은 멀쩡히 파싱되니 에디터가 경고하지 않은 종류의 손상이죠. 도구에 통과시켜 린터가 놓친 부분을 찾아내세요.

CMS / WYSIWYG 에디터의 CSS

CMS 테마 에디터와 WYSIWYG 익스포트는 닫는 중괄호를 하나 더 내보내곤 합니다. 이 도구가 그런 잉여 <code>}</code>를 직접 사냥하지 않아도 되도록 정리해 줍니다.

빌드 전 검증

PostCSS, Sass, 번들러에 도달하기 전에 손상된 CSS를 도구에 통과시키세요 — 입력이 처음부터 유효한 CSS이면 트랜스파일러의 오류 메시지가 훨씬 덜 난해해집니다.

AI 생성 스니펫 복구

LLM이 생성한 CSS는 종종 세미콜론이 한두 개 빠져 있습니다. 모델 출력을 도구에 통과시키면 조용히 실패하지 않고 브라우저에 실제로 적용되는 CSS가 됩니다.

자주 묻는 질문

CSS 데이터가 저장되나요?

아니요. 복원은 서버에서 수행되지만 입력을 보관하지 않습니다. 응답이 브라우저로 돌아간 뒤에는 저희 쪽에 남지 않습니다.

어떤 종류의 오류를 수정하나요?

누락된 세미콜론, 짝이 안 맞는 중괄호, 속성과 값 사이의 콜론 누락, 닫히지 않은 문자열, 명백한 속성명 오타 등 일상적인 CSS 손상입니다. 디자인을 다시 쓰지 않고 그 주변의 구문만 수정합니다.

속성 값이 변경되나요?

구문상 필요한 경우에만(예: txt-align을 text-align으로 정정) 수정합니다. 숫자 값, 색상, 문자열 값은 적힌 그대로 유지됩니다.

<code>@media</code>와 <code>@keyframes</code>도 처리되나요?

네 — 도구는 @media, @keyframes, @supports 같은 at-rule 내부의 블록도 최상위 규칙 블록과 동일하게 처리합니다. 그 안의 누락된 중괄호나 세미콜론도 복원됩니다.

수정된 CSS가 유효한지 어떻게 확인하나요?

수정 후 CSS 검증기에 출력을 통과시키면 됩니다. 빠른 2차 검사를 위해 CSS 유효성 검사기와 함께 사용할 수도 있습니다.

SCSS나 LESS에도 사용할 수 있나요?

이 도구는 일반 CSS를 대상으로 합니다. 전처리기 구문(변수, 중첩, 믹스인 등)은 먼저 SCSS → CSS 또는 LESS → CSS로 컴파일한 후, 필요하면 도구에 통과시키세요.

CSS 수정 도구