# CSS Specificity와 Inherited Attribute

CSS에서 스타일 충돌이 발생할 때 어떤 규칙이 적용되는지를 결정하는 핵심 요소는 Specificity(특이성)입니다. 또한, CSS 속성의 상속 여부를 이해하면 불필요한 스타일 지정 문제를 줄이고 코드 효율성을 높일 수 있습니다. 이 글에서는 Specificity와 더불어 CSS 속성의 상속 여부를 확인하는 방법을 알아보겠습니다.

---

Specificity란?

CSS의 Specificity는 각 규칙이 HTML 요소에 적용되는 우선순위를 결정하는 값입니다. 특정 규칙의 Specificity는 다음 4가지 구성 요소로 계산됩니다:

1. 인라인 스타일: 1,0,0,0
2. ID 선택자: 0,1,0,0
3. 클래스, 속성, 가상 클래스 선택자: 0,0,1,0
4. 태그 및 가상 요소 선택자: 0,0,0,1

각 구성 요소는 독립적으로 계산되며, 높은 값을 가진 규칙이 우선합니다.

---

클래스 선택자 vs. 여러 태그 선택자

Specificity 값 비교

• 클래스 선택자 (예: .class):
  • Specificity: 0,0,1,0
• 세 개의 태그 선택자 (예: div p span):
  • Specificity: 0,0,0,3

우선순위

• 클래스 선택자의 Specificity 값 0,0,1,0이 태그 선택자의 Specificity 값 0,0,0,3보다 높습니다.
• 따라서, 클래스 선택자 규칙이 우선 적용됩니다.

---

예제 코드

CSS

/* 클래스 선택자 */
.class {
  color: red;
}

/* 세 개의 태그 선택자 */
div p span {
  color: blue;
}

HTML

<div>
  <p>
    <span class="class">텍스트</span>
  </p>
</div>

결과

• 텍스트는 red 색상이 적용됩니다.
• 이유: 클래스 선택자(.class)의 Specificity 값이 태그 선택자(div p span)보다 높기 때문입니다.

---

CSS 속성 상속 여부 확인하기

속성 상속이란?

일부 CSS 속성은 부모 요소에서 자식 요소로 자동으로 상속됩니다. 예를 들어, color나 font-size 같은 타이포그래피 관련 속성은 기본적으로 상속됩니다. 반면, margin, padding 등 레이아웃 관련 속성은 상속되지 않습니다.

상속 여부 확인 방법

1. MDN CSS Properties Reference 사용:

   • MDN CSS Properties Reference에서 특정 속성이 상속 가능한지 확인할 수 있습니다.
   • Formal Definition 섹션의 Inherited 필드를 확인하세요.

2. 예시: color 속성:

   • color 속성 문서에서 Inherited: yes로 명시되어 있습니다.
   • 따라서, color 속성은 상속됩니다.

상속되지 않는 속성 강제 상속

• 상속되지 않는 속성을 자식 요소에 상속시키고 싶다면, inherit 값을 사용할 수 있습니다:

p {
  margin: inherit; /* 부모 요소의 margin 값을 상속 */
}

---

Specificity와 상속 요약

1. Specificity:

   • 클래스 선택자는 여러 태그 선택자보다 항상 높은 우선순위를 가집니다.
   • Specificity 값이 동일할 경우, 나중에 정의된 규칙이 우선 적용됩니다.

2. 상속:

   • color, font-family 등 일부 속성은 상속되지만, margin, padding 등은 상속되지 않습니다.
   • MDN의 CSS Properties Reference에서 상속 여부를 확인할 수 있습니다.

---

관련 읽을거리

• MDN: Specificity
• MDN: CSS Properties Reference