CSS 명시도 계산기
CSS 선택자의 명시도를 계산하고 비교합니다. (A,B,C) 분류를 즉시 확인하고 바 차트로 시각화하여 스타일 충돌 시 어떤 선택자가 우선하는지 이해하세요.
한 줄에 하나씩
빠른 예시:
CSS 명시도 작동 방식:
A — ID 선택자 (#id): 각 100점
B — 클래스(.cls), 속성([attr]), 가상 클래스(:hover): 각 10점
C — 타입 요소(div, p), 가상 요소(::before): 각 1점
사용 방법
CSS 선택자의 명시도를 계산하고 비교합니다. (A,B,C) 분류를 즉시 확인하고 바 차트로 시각화하여 스타일 충돌 시 어떤 선택자가 우선하는지 이해하세요.
- 1CSS 선택자를 한 줄에 하나씩 입력하거나 붙여넣으세요.
- 2빠른 예시 버튼을 클릭하여 일반적인 선택자를 즉시 추가하세요.
- 3'계산' 버튼을 클릭하거나 Ctrl+Enter를 눌러 명시도 점수를 확인하세요.
- 4각 결과는 (A,B,C) 뱃지, 숫자 합계, 시각적 비교를 위한 바 차트를 보여줍니다.
- 5결과의 '분류 보기'를 클릭하여 어떤 부분이 점수에 기여했는지 확인하세요.
주요 기능
- 모든 CSS 선택자의 (A,B,C) 명시도 분류 계산
- 여러 선택자를 나란히 비교, 명시도 순으로 정렬
- A, B, C 값의 즉각적인 비교를 위한 시각적 바 차트
- 각 기여 선택자 부분을 설명하는 상세 분류
- ID, 클래스, 속성, 가상 클래스 및 가상 요소 처리