CSS를 파싱하는 중 오류가 발생했습니다: %1$s. CSS 파일의 어딘가에 오타나 문법 오류가 있습니다.

An error occurred while parsing the CSS: %1$s.

 

이 오류는 CSS 파일의 코드 어딘가에 문법적인 실수나 오타가 있음을 알려주는 메시지입니다.

컴퓨터는 정해진 문법 규칙을 매우 엄격하게 따르기 때문에, 세미콜론(;) 하나가 빠지거나 괄호({})의 짝이 맞지 않는 등 사소한 실수만 있어도 코드를 이해하지 못하고 오류를 보고합니다. 📝

오류 메시지의 %1$s 부분에는 컴퓨터가 발견한 구체적인 문제에 대한 힌트가 들어있으니, 이 부분을 잘 살펴보는 것이 중요합니다.

---

## 흔하게 발생하는 오류 원인

다음은 CSS에서 자주 발생하는 문법 오류의 유형입니다.

• 세미콜론(;) 누락
  • p { color: blue } (→ blue 뒤에 ;가 빠짐)
• 괄호({ })의 짝이 맞지 않음
  • p { color: blue; (→ 닫는 괄호 }가 없음)
• 속성이나 값의 오타
  • p { colour: blue; } (→ color를 잘못 씀)
  • p { font-weight: blod; } (→ bold를 잘못 씀)
• 주석(/* */)을 제대로 닫지 않음
  • /* 주석 시작 (→ */로 닫지 않아 뒤따르는 모든 코드가 주석으로 처리됨)

---

## 오류를 찾고 해결하는 방법

1. 오류 메시지(%1$s) 확인하기 가장 먼저 %1$s에 표시된 내용을 확인하세요. "line 25에서 예기치 않은 문자 '}' 발견"과 같이 오류가 발생한 줄 번호와 문제의 원인에 대한 단서가 포함되어 있는 경우가 많습니다.
2. 코드 편집기의 '구문 검사(Linting)' 기능 활용 (가장 추천) Visual Studio Code, Sigil, Calibre Editor 등 대부분의 최신 코드 편집기는 잘못된 코드를 자동으로 감지하여 빨간 밑줄 등으로 표시해 줍니다. 워드프로세서의 맞춤법 검사 기능과 같아서, 오류를 매우 쉽고 빠르게 찾을 수 있습니다.
3. 온라인 CSS 검사기(Validator) 사용하기 W3C CSS Validation Service와 같은 웹사이트에 자신의 CSS 코드를 전부 복사하여 붙여넣으면, 문법적으로 잘못된 부분을 찾아 목록으로 알려줍니다.

직접 확인하기 위에서 언급한 '흔하게 발생하는 오류 원인'을 참고하여, 오류가 발생했다고 표시된 줄 번호와 그 바로 윗줄을 중심으로 코드를 꼼꼼히 살펴보세요. (세미콜론 누락은 다음 줄에서 오류로 잡히는 경우가 많습니다.)