CSS 명시도 계산기
CSS 선택자의 명시도 점수를 계산하고 비교합니다
입력 및 옵션
빠른 프리셋 및 예시
브라우저에서 실행됩니다. 입력한 내용은 이 기기에만 남습니다.
결과
결과를 보려면 값을 입력하세요.
무료 CSS 명시도 계산기 소개
이 CSS 명시도 계산기는 웹 개발자가 CSS 선택자 명시도를 이해하고 계산하고 디버깅하도록 돕는 무료 도구입니다. 명시도는 여러 규칙이 같은 요소를 대상으로 할 때 브라우저가 어떤 CSS 규칙을 우선 적용할지 결정하는 알고리즘입니다. 명시도는 (a, b, c)의 세 부분으로 이루어진 값으로 표현되며, 각 구성 요소는 서로 다른 종류의 선택자 가중치를 나타냅니다.
프런트엔드 개발자에게 가장 중요한 역량 중 하나는 CSS 명시도를 이해하는 것입니다. 스타일이 예상대로 적용되지 않을 때는 명시도 충돌이 근본 원인인 경우가 많습니다. 이 계산기는 모든 CSS 선택자를 명시도 구성 요소로 즉시 분해하여, ID 선택자(a), 클래스/속성/가상 클래스 선택자(b), 요소/가상 요소 선택자(c)가 각각 최종 점수에 몇 개씩 반영되는지 정확히 보여 줍니다.
이 도구에는 두 선택자를 나란히 놓고 명시도 대결에서 어느 쪽이 이기는지 확인할 수 있는 강력한 비교 모드가 있습니다. CSS 충돌을 디버깅하거나 스타일시트를 리팩터링하거나 캐스케이드의 작동 방식을 배울 때 매우 유용합니다. 막대 차트와 색상으로 구분한 분석 덕분에 CSS를 처음 접하는 개발자도 명시도를 직관적으로 쉽게 이해할 수 있습니다.
주요 기능
- 유효한 모든 CSS 선택자의 명시도를 즉시 계산
- ID, 클래스, 요소의 상대적 가중치를 보여 주는 막대 차트
- 선택자 구성 요소별 색상 구분 분석 (ID는 빨간색, 클래스는 노란색, 요소는 파란색)
- 두 선택자를 겨루게 하고 승자/패자를 표시하는 비교 모드
- 가상 클래스, 가상 요소, 속성 선택자를 포함한 복잡한 선택자 지원
- :not(), :is(), :where() 가상 클래스의 명시도 규칙을 정확하게 처리
- 자주 쓰는 선택자 패턴을 빠르게 익힐 수 있는 14개의 프리셋 예제
- 명시도 값을 클립보드에 원클릭 복사
- 명시도 규칙 빠른 참조 카드 내장
- 어떤 환경에서도 편안하게 쓸 수 있는 다크 모드 지원
CSS 명시도 계산기 사용 방법
- CSS 선택자 입력: 입력란에 CSS 선택자를 입력하거나 붙여 넣으세요. 입력하는 즉시 명시도가 계산됩니다.
- 분석 결과 확인: (a, b, c) 명시도 값, 막대 차트, 색상으로 구분한 구성 요소 분석을 살펴보면 점수가 어떻게 결정되는지 알 수 있습니다.
- 비교 모드 사용: 비교 모드로 전환해 두 선택자를 입력하면 어느 쪽의 명시도가 더 높은지 승자/패자/무승부 표시와 함께 확인할 수 있습니다.
- 프리셋 예제 사용: 14개의 프리셋 선택자 중 하나를 클릭하면 명시도를 바로 볼 수 있습니다. 비교 모드에서는 프리셋이 비어 있는 첫 번째 선택자 입력란에 채워집니다.
- 결과 복사: 명시도 값 옆의 복사 버튼을 클릭하면 값이 클립보드에 복사되어 문서나 코드 주석에 사용할 수 있습니다.
활용 사례
- CSS 충돌 디버깅: 명시도 점수를 비교해 승리하는 선택자를 확인하면 어떤 CSS 규칙이 다른 규칙을 덮어쓰는 이유를 알 수 있습니다.
- 스타일시트 리팩터링: 코드베이스 전반의 선택자 명시도를 분석해 지나치게 구체적인 선택자를 줄이고 CSS 유지보수성을 높입니다.
- CSS 캐스케이드 학습: 시각적 분석과 프리셋 예제로 명시도가 실제로 어떻게 작동하는지 직관적으로 이해할 수 있습니다.
- 코드 리뷰: 코드 리뷰 중 선택자 명시도를 빠르게 확인해 명시도 전쟁을 막고 일관된 스타일링 방식을 유지합니다.
- 교육 및 워크숍: CSS 워크숍, 부트캠프, 온라인 강의에서 비교 모드와 시각 차트를 교육 자료로 활용하세요.
- CSS 아키텍처 설계: 코드를 작성하기 전에 명시도의 영향을 파악해 BEM, OOCSS, 유틸리티 우선 같은 선택자 전략을 계획합니다.
- 프레임워크 커스터마이징: Bootstrap, Tailwind 등 프레임워크 스타일을 덮어쓸 때 명시도를 계산해 직접 작성한 규칙이 우선 적용되도록 합니다.
자주 묻는 질문
이 도구는 무료인가요?
예, CSS 명시도 계산기는 완전히 무료로 사용할 수 있습니다. 사용 횟수 제한도, 계정도, 유료 요금제도 없습니다. 필요한 만큼 선택자를 계산하고 비교하세요.
내 데이터는 안전한가요?
물론입니다. 모든 명시도 계산은 브라우저 안에서만 이루어집니다. CSS 선택자나 데이터는 어떤 서버로도 전송되지 않습니다. 한 번 불러오면 오프라인에서도 완전히 작동합니다.
CSS 명시도는 어떻게 작동하나요?
CSS 명시도는 (a, b, c)의 세 부분으로 이루어진 값으로 계산됩니다. “a” 열은 ID 선택자(#id)의 개수, “b” 열은 클래스 선택자(.class), 속성 선택자([attr]), 가상 클래스(:hover)의 개수, “c” 열은 타입 선택자(div, p)와 가상 요소(::before)의 개수입니다. 앞쪽 열의 값이 더 크면 뒤쪽 열과 관계없이 항상 이깁니다.
!important와 인라인 스타일은 어떻게 되나요?
인라인 스타일은 선택자 기반의 모든 명시도보다 우선하고, !important는 인라인 스타일을 포함한 모든 것보다 우선합니다. 이 둘은 (a, b, c) 명시도 체계 밖에서 처리되며 선택자 명시도에 해당하지 않으므로 이 도구에서는 계산하지 않습니다.
:not()은 명시도에 어떤 영향을 주나요?
:not() 가상 클래스 자체의 명시도는 0이지만 인수는 일반 선택자처럼 계산됩니다. 예를 들어 .active는 클래스 선택자이므로 :not(.active)는 (0, 1, 0)을 더합니다. 마찬가지로 :is()는 인수 중 가장 명시도가 높은 값을 따르고, :where()는 항상 명시도 0을 갖습니다.
두 선택자의 명시도가 같으면 어떻게 되나요?
두 선택자의 명시도 값이 같으면 CSS 캐스케이드 규칙이 적용되어 소스 코드에서 나중에 나오는 선택자가 우선합니다. 이 경우 비교 모드에는 “TIE” 표시가 나타납니다.
팁과 모범 사례
- 명시도를 낮게 유지: ID 선택자보다 클래스 선택자를 사용하면 명시도를 관리하기 쉽고, 필요할 때 스타일을 덮어쓰기도 쉬워집니다.
- !important 피하기: !important를 쓴다는 것은 명시도에 문제가 있다는 신호입니다. !important 선언을 추가하지 말고 선택자 명시도를 조정해 근본 원인을 해결하세요.
- BEM 같은 명명 규칙 사용: BEM(Block Element Modifier) 같은 방법론은 주로 단일 클래스 선택자에 의존하므로 명시도를 평평하게 유지하는 데 도움이 됩니다.
- 중첩 전에 확인: #main .content .sidebar .widget p 같은 깊게 중첩된 선택자는 명시도가 높게 쌓입니다. 커밋하기 전에 이 계산기로 확인하세요.
- :where()로 명시도 0 활용: 유틸리티 스타일이나 리셋을 작성할 때 선택자를 :where()로 감싸면 쉽게 덮어쓸 수 있습니다.
- 디버깅 중 비교: 스타일이 적용되지 않을 때 비교 모드로 다른 선택자가 명시도 대결에서 이기고 있는지 확인하세요.