CSS 명시도 계산기: 선택자 점수 비교
한 줄에 CSS 선택자 하나씩 붙여넣어 (a, b, c) 점수로 명시도를 계산하세요. ID는 a에, 클래스·속성·가상 클래스는 b에, 요소·가상 요소는 c에 계산됩니다. :where()는 명시도를 더하지 않고, :is(), :not(), :has()는 인자 중 가장 높은 명시도를 사용합니다. 점수를 정렬해 선택자를 비교하세요.
CSS 명시도 계산기는 CSS 선택자의 명시도를 계산하고 비교하는 브라우저 기반 도구입니다. 한 줄에 선택자 하나씩 입력하면 (a, b, c) 점수로 표시되고, 결과를 정렬해 선택자 가중치를 비교할 수 있습니다. 한 선택자가 다른 선택자보다 우선할 수 있는 이유를 더 명확히 보고 싶을 때 유용합니다.
계산기는 명시도 그룹을 따릅니다. ID는 a에, 클래스·속성·가상 클래스는 b에, 요소·가상 요소는 c에 기여합니다. 특수 가상 클래스 규칙이 중요합니다. :where()는 아무것도 더하지 않고, :is(), :not(), :has()는 인자의 최대 명시도를 취합니다. 도구에서는 조정 가능한 옵션도 제공하지만, 사용 가능한 설명에는 개별 설정이 명시되어 있지 않습니다.
CSS 선택자는 규칙이 적용되는 요소를 기술하고, 명시도는 선택자 가중치를 비교하는 방법을 제공합니다. 그 가중치를 계산하면 스타일을 검토하거나 경쟁하는 규칙을 조사할 때 도움이 됩니다. 점수를 정렬하면 서로 다른 종류의 구성 요소를 사용하는 선택자를 포함해 여러 선택자를 한눈에 비교하기 쉬워집니다.
CSS 명시도 계산기는 브라우저에서 완전히 동작합니다. 입력은 사용자의 기기에서 처리되며 업로드되거나 저장되거나 서버로 전송되지 않습니다. 페이지가 로드된 후에는 도구가 오프라인으로 동작하므로 네트워크 연결 없이 사용할 수 있습니다.
이 계산기는 CSS를 다루는 개발자와 DevOps 엔지니어에게 도움이 됩니다. 명시도 계산법을 배우는 사람부터 스타일시트를 검토하는 숙련된 사용자까지, 로컬 설치 없이 브라우저에서 동작합니다.
1단계: 한 줄에 하나씩 CSS 선택자를 붙여넣거나 입력하세요. 계산기가 각 선택자의 명시도 점수를 따로 반환합니다.
2단계: 사용 가능한 옵션을 확인하고 필요하면 조정하세요. 도구의 설명에는 개별 옵션 설정이 명시되어 있지 않습니다.
3단계: 각 결과를 (a, b, c) 점수로 확인하세요. ID는 a에, 클래스·속성·가상 클래스는 b에, 요소·가상 요소는 c에 기여합니다.
4단계: 결과를 점수 순으로 정렬해 선택자 명시도를 비교하고 어떤 규칙이 우선할지 조사하는 데 활용하세요.
5단계: 결과를 복사해 메모나 CSS 리뷰에 사용하세요.
사용 사례: 서로를 덮어쓰는 것처럼 보이는 CSS 규칙을 디버깅하면서 선택자 명시도를 확인하세요. 점수를 비교하면 한 선택자의 명시도가 더 클 때 알아차리는 데 도움이 됩니다.
사용 사례: 리팩터링 중 스타일시트를 검토하고 구조를 바꾸기 전에 선택자를 비교하세요. 계산기로 각 선택자의 (a, b, c) 점수를 쉽게 살펴볼 수 있습니다.
사용 사례: 각 점수를 손으로 계산하지 않고 ID, 클래스, 속성, 가상 클래스, 요소, 가상 요소가 명시도에 어떻게 기여하는지 이해하세요.
사용 사례: :is(), :not(), :has()를 사용하는 선택자를 비교하세요. 계산기는 각 가상 클래스 인자의 최대 명시도를 적용합니다.
사용 사례: 선택자에서 :where()의 효과를 확인하세요. 명시도를 더하지 않으므로 CSS를 검토할 때 검증에 유용할 수 있습니다.
사용 사례: 로컬 도구를 설치하지 않고 CSS 명시도 검사를 처리하세요. 사용하는 컴퓨터의 브라우저에서 계산기를 여세요.
사용 사례: 내부 프로젝트 세부 정보가 포함된 선택자를 제3자 서비스에 업로드하지 않고 검토하세요. 입력은 브라우저에서 처리됩니다.