CSS 상속(Inheritance)과 우선순위(Specificity)
CSS 상속의 개념과 원리 (Concept and Principles of CSS Inheritance)
역사적 배경 (Historical Background)
CSS 상속은 CSS가 처음 도입된 1996년부터 존재해 온 개념입니다. 상속은 CSS의 효율성을 높이고 스타일시트의 일관성을 유지하기 위한 핵심 원리입니다.
개념 및 원리 (Concept and Principles)
상속이란 부모 요소에 적용된 스타일이 자식 요소에 자동으로 적용되는 것을 의미합니다. CSS는 기본적으로 텍스트 관련 속성(글꼴, 색상 등)을 상속하도록 설계되었습니다.
예를 들어, 부모 요소에 color 속성을 지정하면, 그 자식 요소는 별도로 color 속성이 지정되지 않는 한, 부모 요소의 color 속성을 상속받습니다.
body {
color: blue;
}
p {
font-size: 16px;
}
위의 CSS에서, body 요소의 텍스트 색상은 파란색입니다. 이때 모든 p 요소도 파란색 텍스트를 갖게 됩니다.
우선순위 규칙 (Specificity Rules)
역사적 배경 (Historical Background)
CSS의 우선순위 규칙은 스타일시트가 복잡해짐에 따라 필요성이 대두되어 점진적으로 정교해졌습니다. 초기 CSS 버전에서는 단순한 선택자 우선순위가 적용되었지만, CSS2부터는 보다 복잡한 우선순위 계산 방식이 도입되었습니다.
우선순위 규칙 (Specificity Rules)
CSS 우선순위는 네 가지 주요 기준에 따라 결정됩니다:
- 인라인 스타일 (Inline Styles): HTML 요소에 직접 지정된 스타일
- 아이디 선택자 (ID Selectors):
#header처럼 ID를 사용하는 선택자 - 클래스, 속성 선택자, 의사 클래스 (Class, Attribute, Pseudo-class Selectors):
.example,[type="text"],:hover등 - 태그 선택자 (Tag Selectors):
div,p등
우선순위는 다음과 같이 계산됩니다:
- 인라인 스타일: 1000점
- 아이디 선택자: 100점
- 클래스, 속성, 의사 클래스: 10점
- 태그 선택자: 1점
예제:
/* 1점 */
p {
color: red;
}
/* 10점 */
.example {
color: blue;
}
/* 100점 */
#header {
color: green;
}
/* 1000점 */
<div style="color: yellow;"></div>
위 예제에서 우선순위는 p < .example < #header < 인라인 스타일 순서로 적용됩니다.
!important 규칙의 사용과 주의사항 (Usage and Cautions of !important Rule)
역사적 배경 (Historical Background)
!important 규칙은 CSS1에서 처음 도입되었습니다. 특정 스타일을 모든 다른 스타일 규칙보다 우선시하기 위해 사용됩니다. 이는 특히 복잡한 스타일시트에서 특정 스타일을 강제로 적용해야 할 때 유용합니다.
사용법 (Usage)
!important는 해당 스타일 규칙의 우선순위를 가장 높게 설정합니다. 이는 다른 모든 우선순위 계산을 무시하고 적용됩니다.
p {
color: red !important;
}
p.special {
color: blue;
}
위 예제에서, p.special 선택자는 특정 클래스에 적용되지만, color: red !important 규칙이 더 높은 우선순위를 가지므로 모든 p 요소의 색상은 빨간색이 됩니다.
주의사항 (Cautions)
- 사용 자제: 너무 자주 사용하면 스타일시트를 유지보수하기 어렵게 만듭니다.
- 디버깅 어려움: !important 규칙은 예상치 못한 스타일 충돌을 일으킬 수 있습니다.
- 대체 방법: 가능하면 구체적인 선택자를 사용해 우선순위를 조정하는 것이 좋습니다.
상속되지 않는 속성들 (Non-inherited Properties)
역사적 배경 (Historical Background)
상속되지 않는 속성은 CSS 초기 버전부터 존재했으며, 이는 레이아웃과 상호작용 속성이 주로 해당됩니다. 이런 속성은 상속될 경우 의도치 않은 디자인 문제가 발생할 수 있습니다.
상속되지 않는 속성들 (List of Non-inherited Properties)
상속되지 않는 속성들은 주로 레이아웃, 박스 모델, 포지셔닝과 관련된 속성들입니다. 몇 가지 예는 다음과 같습니다:
- 레이아웃 속성:
display,position,top,right,bottom,left - 박스 모델 속성:
margin,border,padding,width,height - 기타 속성:
background,overflow,z-index
예제:
div {
display: flex;
}
p {
display: none;
}
여기서, div 요소는 flex로 레이아웃을 설정하지만, p 요소는 display 속성을 상속받지 않습니다. 따라서 p 요소는 display: none이 적용됩니다.
종합 예제 (Comprehensive Example)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Specificity Example</title>
<style>
body {
color: black;
}
.highlight {
color: green;
}
#main-title {
color: blue;
}
p {
color: red !important;
}
div p {
color: purple;
}
</style>
</head>
<body>
<h1 id="main-title" class="highlight">This is the main title</h1>
<p class="highlight">This is a paragraph.</p>
<div>
<p>This paragraph is inside a div.</p>
</div>
</body>
</html>
이 예제에서 우선순위 규칙과 상속의 개념을 명확히 이해할 수 있습니다. p 태그에 color: red !important가 적용되어 다른 모든 색상 규칙을 덮어씁니다. 또한, body의 color: black 속성은 텍스트 관련 속성이므로 상속됩니다.
이렇게 CSS 상속과 우선순위 규칙을 이해하고 적절히 적용하면, 보다 효율적이고 일관성 있는 스타일시트를 작성할 수 있습니다.