상속(Inheritance)과 우선순위: 내 CSS가 적용되지 않는 이유

 

웹 디자인을 하다 보면 CSS 코드가 의도대로 작동하지 않아 개발자 도구(F12)를 켜고 취소선이 그어진 속성들을 허망하게 바라보곤 합니다. CSS는 이름 그대로 'Cascading(폭포처럼 쏟아지는)' 규칙을 따르기 때문에, 어떤 스타일이 최종적으로 선택되는지 결정하는 명확한 체계가 있습니다.

1. CSS 상속(Inheritance): 부모의 유산

상속은 부모 요소에 적용된 스타일이 자식 요소에게 전달되는 성질입니다. 하지만 모든 속성이 상속되는 것은 아닙니다.

상속되는 속성 vs 상속되지 않는 속성

• 상속되는 것들: 주로 텍스트 관련 속성 (color, font-family, font-size, font-weight, line-height, text-align 등)
• 상속되지 않는 것들: 주로 박스 모델 관련 속성 (margin, padding, border, width, height, background, display 등)

💡 예제: 상속의 흐름

<div style="color: blue; border: 2px solid red; padding: 20px;">
  부모 요소 (파란 글씨, 빨간 테두리)
  <p>자식 요소 (글씨색은 상속받아 파란색이지만, 테두리와 패딩은 상속받지 않음)</p>
</div>

위 예제에서 p 태그는 부모의 color는 이어받지만, border나 padding은 직접 정의하지 않는 한 나타나지 않습니다.

2. 우선순위 점수 계산법 (Specificity)

여러 곳에서 동일한 요소에 스타일을 적용할 때, 브라우저는 '점수'를 매겨 가장 높은 점수의 스타일을 채택합니다. 이를 **명시도(Specificity)**라고 합니다.

점수 배점표

1. Inline Style (1000점): 태그 안에 직접 쓰는 style="..."
2. ID Selector (100점): #header, #submit
3. Class / Attribute / Pseudo-class (10점): .container, [type="text"], :hover
4. Element / Pseudo-element (1점): div, p, span, ::before
5. 전체 선택자 (*): 0점

💡 예제: 누가 이길까요?

/* 1. 태그 선택자 (1점) */
div { color: black; }

/* 2. 클래스 선택자 (10점) */
.content { color: blue; }

/* 3. ID 선택자 (100점) */
#main-text { color: red; }

/* 4. 부모를 포함한 복합 선택자 (10 + 1 = 11점) */
body .content { color: green; }

결과: 만약 <div id="main-text" class="content">...</div>라는 요소가 있다면, 가장 점수가 높은 **빨간색(red)**이 적용됩니다. body .content가 11점으로 .content(10점)보다 높지만, 100점인 ID 선택자를 이길 수는 없습니다.

3. 캐스케이딩(Cascading)의 3대 원칙

점수가 같거나 계산이 복잡할 때 브라우저는 다음 3가지 원칙에 따라 순서를 결정합니다.

1. 중요도 (Importance): !important가 붙은 속성이 무조건 1순위입니다. (단, 남용하면 유지보수가 불가능해지니 주의하세요.)
2. 명시도 (Specificity): 위에서 설명한 점수 계산법이 적용됩니다.
3. 소스 순서 (Source Order): 점수가 완전히 같다면, 나중에 선언된 스타일이 이전 스타일을 덮어씁니다.

💡 예제: 순서의 차이

.button { background-color: blue; }
.button { background-color: red; } /* 같은 점수이므로 나중에 선언된 레드 출력 */

4. 내 CSS가 적용되지 않을 때 체크리스트

스타일이 먹히지 않는다면 다음 순서대로 확인해 보세요.

1. 오타 확인: 선택자 이름이나 속성명에 오타가 없는지 확인합니다.
2. 명시도 싸움: 혹시 다른 곳에서 더 구체적인 선택자(ID나 부모 경로가 포함된 선택자)로 스타일을 지정하지 않았나요?
3. 상속 여부: 부모에게 준 속성이 상속되지 않는 속성(margin 등)은 아닌가요?
4. 연결 순서: HTML에서 CSS 파일을 불러오는 순서가 잘못되어 나중에 선언된 다른 라이브러리 CSS에 덮어씌워진 건 아닌가요?
5. 개발자 도구 활용: 브라우저에서 F12를 눌러 해당 요소를 클릭해 보세요. 어떤 스타일이 취소선(<s>) 처리가 되었는지 보면 원인을 바로 알 수 있습니다.

5. 결론: !important는 최후의 수단으로

우선순위 문제를 해결하기 위해 모든 곳에 !important를 붙이는 것은 불끄기 위해 폭탄을 던지는 것과 같습니다.

가장 좋은 방법은 **클래스 기반의 일관된 명명법(BEM 등)**을 사용하고, ID 선택자의 사용을 지양하며, 선택자를 너무 깊게 중첩하지 않는 것입니다. CSS의 우선순위 규칙을 이해하면 더 이상 스타일 "운빨"에 의존하지 않고 논리적으로 화면을 구성할 수 있습니다.