CSS 사용자 지정 속성의 미참조 선언을 분석하는 방법

CSS를 입력해 분석하면 인식된 사용자 지정 속성과 이름별 var() 참조 횟수, 미참조 선언을 확인할 수 있습니다. 선택된 입력이 비어 있으면 성공 결과가 나오지 않습니다.

CSS 변수 참조 분석의 목적

CSS 사용자 지정 속성은 색상, 여백, 글꼴처럼 반복해서 쓰는 값을 한 곳에 선언하고 여러 규칙에서 참조하게 하는 방식입니다. 이 도구는 입력한 CSS에서 인식되는 사용자 지정 속성 선언을 찾고, 같은 이름을 사용하는 var() 참조를 세어 미참조 선언을 확인하도록 돕습니다. 테마 값을 정리하거나 이름을 바꾼 뒤 남은 선언을 살펴볼 때 사용할 수 있습니다.

결과는 CSS 전체를 해석한 진단서가 아니라, 입력 텍스트 안에서 정해진 형태로 발견된 선언과 참조를 비교한 분석입니다. 따라서 결과를 본 뒤에는 실제 스타일 구조와 함께 판단해야 합니다. 선언의 값 자체를 계산하거나 화면에 적용되는 최종 색상과 간격을 보여 주는 용도로 사용하지 마세요.

입력과 분석 결과를 확인하는 순서

1. 분석할 CSS 텍스트를 준비합니다. 사용자 지정 속성 선언은 --로 시작하는 이름을 사용해야 하며, 이름 뒤에는 콜론, 값, 세미콜론이 이어져야 인식됩니다. 이름에는 단어 문자나 하이픈이 들어갈 수 있습니다. 선언 값의 앞뒤 공백은 처리할 때 정리됩니다. 예를 들어 --main-color: #1464a0;처럼 한 줄을 구성하면 인식 규칙에 맞습니다.

2. CSS 입력 영역에 준비한 텍스트를 넣습니다. 지원되는 입력 방식이 두 가지인 경우에는 둘 중 비어 있지 않은 텍스트 입력이 다른 CSS 값보다 먼저 선택됩니다. 두 값을 함께 넣을 계획이라면 실제로 분석할 내용이 텍스트 입력에 들어 있는지 확인하세요. 선택된 입력이 빈 문자열이면 성공 결과가 나오지 않습니다.

3. 분석을 실행하고 인식된 선언 목록을 살핍니다. 선언이 보이지 않으면 이름의 시작 부분이 --인지 확인하고, 콜론 뒤에 값이 있는지, 마지막에 세미콜론이 있는지 점검합니다. 작성한 CSS 전체가 아니라 도구가 인식한 형태만 결과에 포함될 수 있으므로, 입력에 들어간 표기와 결과 목록을 나란히 비교하면 누락 원인을 찾기 쉽습니다.

4. var(--이름) 형태의 참조 집계를 확인합니다. 도구는 인식 가능한 참조를 변수 이름별로 세며, 참조 괄호 안에 선택적인 내용이 있어도 해당 이름의 참조로 계산합니다. 선언 이름과 참조 이름이 서로 일치하는지 확인한 다음, 일치하는 참조가 없는 선언을 미참조 선언으로 분류합니다.

5. 미참조 목록을 정리 후보로 표시해 두되, 즉시 삭제하지는 않습니다. 현재 입력에 포함되지 않은 CSS 사용처나 도구의 인식 규칙에 들어오지 않는 사용 방식이 있을 수 있기 때문입니다. 이름 변경, 테마 교체, 구성 파일 결합처럼 입력을 바꾼 직후라면 이전 선언이 다른 텍스트에 남아 있지 않은지도 별도로 확인하세요.

수치와 미참조 목록을 해석하는 법

성공한 경우에는 인식된 선언, 선언 총계, 미참조 선언 총계, 이름별 var() 참조 횟수를 결과에서 확인할 수 있습니다. 선언 총계는 입력에 적은 선언의 수와 다를 수 있으며, 이는 인식 조건을 충족한 항목만 집계되기 때문입니다. 이름별 횟수는 같은 변수가 몇 차례 참조되었는지 파악하는 데 사용합니다.

어떤 선언의 참조 횟수가 0으로 나타나면 현재 분석에서 같은 이름의 인식 가능한 참조를 찾지 못했다는 뜻입니다. 이 값은 정리 후보를 좁히는 데 유용하지만, 그 선언이 실제 프로젝트에서 불필요하다는 결론과 같지는 않습니다. 먼저 분석에 넣은 CSS의 범위와 이름 표기를 다시 살펴보세요.

결과에 선언이 빠졌다면 이름의 허용 문자, 콜론, 값, 세미콜론을 차례로 점검합니다. 참조가 빠졌다면 var()와 -- 이름의 표기가 인식 가능한 형태인지 확인합니다. 빈 입력으로 실패한 경우에는 분석 대상 텍스트를 선택한 입력에 넣은 뒤 다시 실행합니다.

이 도구가 제공하는 비교는 선언 이름과 참조 이름 사이의 관계에 한정됩니다. 변수 값의 계산 결과, 대체값이 적용되는 방식, CSS 문법의 표준 준수 여부, 인식 규칙 밖의 사용자 지정 속성 사용처까지 판정하는 분석으로 확대해서 해석하지 않는 것이 좋습니다.

사용 예시

테마 색상 선언과 버튼의 색상 참조를 점검하면서 입력 안에서 사용되지 않은 간격 선언이 있는지 확인합니다.

:root { --brand-color: #1464a0; --unused-gap: 1rem; } .button { color: var(--brand-color); }를 CSS 입력에 넣고 분석을 실행한 뒤, 선언 목록과 이름별 참조 집계를 확인합니다.

성공 결과에는 인식된 선언 목록과 선언 총계, 미참조 선언 총계, --brand-color 및 --unused-gap의 이름별 var() 참조 횟수가 표시됩니다. --brand-color에는 참조 횟수가 기록되고 --unused-gap은 미참조 목록에 포함되는 형태를 확인할 수 있습니다.

제한 사항

• 정해진 선언 및 참조 형태만 대상으로 하므로 CSS 표준 준수 여부, 변수 값 계산, 대체 동작, 인식 규칙 밖의 사용처를 판단할 수 없습니다.

자주 발생하는 오류

• 선택된 CSS 입력이 빈 문자열인 상태에서 실행하면 성공 결과를 받을 수 없습니다. 분석할 텍스트를 선택된 입력에 넣고 다시 실행하세요.

자주 묻는 질문

CSS에 적은 사용자 지정 속성이 모두 분석되나요?

인식 조건을 충족한 항목만 집계됩니다. 이름이 --로 시작하고 허용된 문자와 콜론, 값, 세미콜론을 갖춘 선언이어야 하며, 값의 앞뒤 공백은 처리할 때 정리됩니다.

CSS 입력을 두 방식으로 제공하면 어느 내용이 선택되나요?

비어 있지 않은 텍스트 입력이 다른 CSS 입력보다 우선됩니다. 선택되는 두 입력이 모두 비어 있으면 성공 결과를 받을 수 없습니다.

미참조 선언은 어떤 기준으로 표시되나요?

인식된 선언 이름과 같은 이름의 var(--이름) 참조를 비교합니다. 일치하는 참조가 없는 선언을 미참조로 표시하지만, 변수 값 계산이나 대체 동작까지 평가하지는 않습니다.