CSS 특이성 실제 렌더링 우승 규칙 검사기브라우저 엔진으로 어떤 CSS 규칙이 실제로 이기는지 검증

왜 '실제 렌더링'이 필요한가? 이론적 계산만으로는 부족한 이유

인터넷에 있는 대부분의 CSS 특이성 계산기는 선택자를 공식에 대입해 점수를 뽑아낼 뿐입니다. 예를 들어 #main p는 (1,0,1), .card.active는 (0,2,0)이 됩니다. 하지만 실제 브라우저가 여러 규칙이 충돌할 때 '어떤 규칙이 적용되는지' 판단할 때는 상속, CSS 캐스케이드 순서, !important, 그리고 같은 속성이 규칙마다 어떻게 작성되어 있는지까지 고려합니다 — 이론적 계산기는 이 모든 것을 무시합니다. 이 도구는 다른 방식을 택합니다. 붙여넣은 HTML과 CSS를 숨겨진 iframe 안에서 브라우저가 실제로 렌더링하도록 한 다음, getComputedStyle()로 실제 적용된 결과를 읽어옵니다. 여기서 보이는 결과는 종이 위에서 계산한 점수가 아니라 브라우저가 실제로 내린 판정입니다.

특이성 (a, b, c)는 어떻게 비교되는가 — 예제로 살펴보기

CSS 특이성은 세 개의 숫자 (a, b, c)로 표현됩니다. a는 ID 선택자 개수, b는 class/속성/유사 클래스 선택자 개수, c는 요소/유사 요소 선택자 개수입니다. 비교는 자릿수를 비교하는 것과 같습니다 — a가 더 높은 쪽이 무조건 이기고, a가 같을 때만 b를 비교합니다. 예를 들어 #main p는 (1,0,1), .card .title.active는 (0,3,0)입니다 — 후자가 class를 3개나 쌓았어도 a가 1 > 0이므로 #main p가 이깁니다. 두 규칙의 특이성이 완전히 같다면 CSS에서 더 나중에 정의된 규칙이 적용됩니다 — 그래서 소스 코드에서의 순서도 중요합니다. !important는 특이성을 완전히 무시하고 결과를 뒤집을 수 있는 유일한 요소로, 특이성이 낮은 규칙이라도 !important가 붙으면 !important가 없는 더 높은 특이성의 규칙을 이깁니다(단, 양쪽 모두 !important가 있다면 다시 특이성으로 승부가 결정됩니다).

이 도구는 언제 사용해야 할까?

가장 흔한 상황은 '이 CSS 규칙을 분명히 작성했는데 화면이 바뀌지 않는다'는 경우입니다 — 이는 보통 특이성이 더 높은(또는 !important가 붙은) 다른 규칙이 이를 덮어쓰고 있다는 뜻입니다. 충돌하는 HTML+CSS를 붙여넣고 확인하고 싶은 요소의 선택자를 입력하면, 이 도구는 일치하는 모든 규칙과 각각의 특이성 점수를 나열하고 실제 브라우저 엔진이 어느 규칙이 진짜로 이기는지 알려줍니다 — 더 이상 캐스케이드의 어느 층이 이기고 있는지 눈으로 추측할 필요가 없습니다.

이 도구는 격리된 iframe 안에서 렌더링되며 외부 폰트, 이미지, JavaScript 실행을 지원하지 않고 Shadow DOM이나 CSS-in-JS로 동적으로 생성되는 스타일도 지원하지 않습니다 — 정확한 결과를 얻으려면 정적인 HTML/CSS 스니펫을 붙여넣어 주세요.