0Pricing
CSS Academy · 강의

특이성 계산: 인라인 스타일, ID, 클래스, 요소

특이성 점수를 계산하고 어떤 스타일 충돌에서 어느 규칙이 우선하는지 예측합니다.

특이성 계산: 인라인 스타일, ID, 클래스, 요소은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

명시도란 무엇입니까

명시도는 여러 규칙이 동일한 요소와 속성을 대상으로 할 때 어떤 CSS 규칙이 우선하는지를 결정합니다. 명시도는 (A, B, C, D)의 네 부분 점수로 계산되며, A가 가장 높고 D가 가장 낮습니다.

명시도의 구성 요소

네 개의 열은 다음과 같습니다.

  • A: 인라인 스타일(style="" 속성) = 1,0,0,0
  • B: ID 선택자(#id) = 0,1,0,0
  • C: 클래스 선택자(.class), 속성 선택자, 의사 클래스 = 0,0,1,0
  • D: 유형(요소) 선택자, 의사 요소 = 0,0,0,1

명시도 예시

명시도 계산하기:

<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
  Header block — matches <code>#header</code>
  <span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
  <a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>

범용 선택자에는 명시도가 없습니다

범용 선택자 *, 결합자(+, >, ~, 공백), 그리고 :where() 의사 클래스는 모두 명시도에 0(0,0,0,0)을 기여합니다.

인라인 스타일이 우선합니다

인라인 스타일(style="" 속성)은 가장 높은 명시도(1,0,0,0)를 가집니다. 스타일시트 규칙에서 이를 재정의할 수 있는 것은 !important뿐입니다.

명시도 점수 비교하기

왼쪽에서 오른쪽으로 비교하십시오. 점수가 다른 첫 번째 열이 어느 쪽이 우선하는지를 결정합니다. ID 열이 즉시 우선하므로 (0,1,0,0)이 (0,0,99,99)보다 우선합니다.

:is() :not() 및 :has()의 명시도

:is(), :not(), :has()는 가장 명시도가 높은 인수의 명시도를 사용합니다.

<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>

nth-child의 명시도

:nth-child(), :first-child, :hover 및 다른 모든 의사 클래스는 클래스 수준의 명시도인 (0,0,1,0)을 추가합니다.

의사 요소의 명시도

::before, ::after, ::first-line 등은 요소 수준의 명시도인 (0,0,0,1)을 추가합니다. 이들은 D 열에 해당합니다.

명시도는 상속이 아닙니다

명시도는 요소의 속성별로 계산됩니다. 특정 속성에서는 명시도가 더 높은 규칙이 우선하지만, 명시도가 높은 부모에서 상속된 값이 자식 요소에 직접 적용된 더 구체적인 규칙보다 우선하지는 않습니다.

명시도 계산 도구

specificity.keegan.st와 같은 온라인 도구나 브라우저 DevTools를 사용하여 명시도를 확인하십시오. DevTools에서는 스타일 패널에서 취소선이 그어진 스타일을 통해 더 구체적인 규칙이 우선했음을 알 수 있습니다.

빠른 확인

#sidebar .link와 .nav .nav-item .nav-link.active 중 어느 선택자의 명시도가 더 높습니까?

복습

명시도 점수는 (A, B, C, D)로 표시됩니다. 각각 인라인 스타일, ID, 클래스/속성/의사 클래스, 요소/의사 요소를 나타냅니다. 왼쪽에서 오른쪽으로 비교하며, 처음으로 값이 다른 열이 우선합니다. :where()는 항상 0을 기여합니다. ID 하나가 클래스 선택자의 개수와 관계없이 모두를 이깁니다. DevTools의 스타일 패널을 사용하면 어떤 규칙이 왜 우선하는지 확인할 수 있습니다.

자주 묻는 질문

“특이성 계산: 인라인 스타일, ID, 클래스, 요소” 강의는 무료인가요?

네 — “특이성 계산: 인라인 스타일, ID, 클래스, 요소” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“특이성 계산: 인라인 스타일, ID, 클래스, 요소”에서 뭘 배우나요?

특이성 점수를 계산하고 어떤 스타일 충돌에서 어느 규칙이 우선하는지 예측합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“특이성 계산: 인라인 스타일, ID, 클래스, 요소” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 특이성 계산: 인라인 스타일, ID, 클래스, 요소
  2. 캐스케이드: 출처와 순서
  3. !important: 언제 사용하고 왜 피해야 하는가
  4. 상속과 all 속성
← CSS Academy(으)로 돌아가기