CSS의 Cascading과 상속 이해하기
CSS(Cascading Style Sheets)의 중요한 개념 중 하나는 "Cascading"과 "상속"입니다. 이 두 개념을 이해하면 CSS 규칙이 충돌할 때 어떤 규칙이 적용될지 예측할 수 있고, 더 효율적으로 스타일을 관리할 수 있습니다. 이번 글에서는 CSS의 Cascading과 상속에 대해 자세히 알아보겠습니다.
Cascading
CSS의 "Cascading"은 여러 스타일 규칙이 동일한 요소에 적용될 때 어떤 규칙이 우선되는지를 결정하는 메커니즘입니다. Cascading의 우선순위는 다음 세 가지 요소에 의해 결정됩니다:
1. 원천(Source)
2. 특이성(Specificity)
3. 중요도(Importance)
1. 원천(Source)
CSS는 다양한 원천에서 올 수 있으며, 이들 원천의 우선순위는 다음과 같습니다:
1. 브라우저 기본 스타일: 모든 브라우저는 기본적으로 HTML 요소에 대해 기본 스타일을 가지고 있습니다.
2. 사용자 스타일 시트: 사용자가 자신의 브라우저 설정에서 정의한 스타일 시트입니다.
3. 개발자 스타일 시트: 웹 페이지를 만든 개발자가 정의한 스타일 시트입니다.
4. 인라인 스타일: HTML 요소에 직접 정의된 스타일입니다.
인라인 스타일은 가장 높은 우선순위를 가지며, 브라우저 기본 스타일은 가장 낮은 우선순위를 가집니다.
2. 특이성(Specificity)
특이성은 CSS 규칙이 얼마나 구체적인지를 나타냅니다. 특이성이 높을수록 해당 규칙이 우선 적용됩니다. 특이성은 다음과 같이 계산됩니다:
- 인라인 스타일: 특이성 점수 1000점
- ID 선택자: 특이성 점수 100점
- 클래스, 속성, 가상 클래스 선택자: 특이성 점수 10점
- 요소와 가상 요소 선택자: 특이성 점수 1점
특이성 점수는 각 선택자의 유형에 따라 합산됩니다.
/* 특이성 1점 (요소 선택자) */
p {
color: blue;
}
/* 특이성 10점 (클래스 선택자) */
.myClass {
color: green;
}
/* 특이성 100점 (ID 선택자) */
#myId {
color: red;
}
/* 특이성 110점 (클래스 + ID 선택자) */
#myId .myClass {
color: yellow;
}위의 예시에서 동일한 요소에 여러 스타일이 적용될 때, 특이성 점수가 높은 스타일이 우선 적용됩니다. 따라서 <p id="myId" class="myClass"></p> 요소의 color 속성은 yellow가 됩니다.
3. 중요도(Importance)
중요도는 !important 키워드를 사용하여 스타일 규칙의 우선순위를 높이는 방법입니다. !important가 붙은 스타일은 특이성 점수와 상관없이 항상 우선 적용됩니다.
/* 특이성 10점 (클래스 선택자) */
.myClass {
color: green;
}
/* 특이성 1점 (요소 선택자) + !important */
p {
color: red !important;
}위의 예시에서 <p class="myClass"></p> 요소의 color 속성은 red가 됩니다. !important가 적용된 스타일이 항상 우선하기 때문입니다.
Cascading 규칙 적용 순서
CSS 규칙이 충돌할 때 Cascading 규칙이 어떻게 적용되는지 정리해보면:
1. 중요도(Importance): !important가 붙은 스타일이 가장 먼저 적용됩니다.
2. 특이성(Specificity): 특이성 점수가 높은 스타일이 그 다음으로 적용됩니다.
3. 원천(Source): 동일한 특이성의 규칙이 있을 경우, 스타일 시트의 원천 순서에 따라 적용됩니다.
4. 선언 순서(Order of Appearance): 동일한 요소, 동일한 특이성, 동일한 원천인 경우, 나중에 선언된 스타일이 적용됩니다.
상속
CSS 상속은 부모 요소의 스타일이 자식 요소에 전달되는 방식입니다. 상속을 통해 코드의 중복을 줄이고 스타일을 일관성 있게 적용할 수 있습니다.
상속되는 속성
일부 CSS 속성은 상속되며, 다음은 자주 상속되는 속성들입니다:
- color: 글자 색상
- font-family: 글꼴
- font-size: 글자 크기
- font-weight: 글자 굵기
- line-height: 줄 간격
- text-align: 텍스트 정렬
상속되지 않는 속성
대부분의 박스 모델 관련 속성(예: margin, padding, border, width, height)은 상속되지 않습니다. 이러한 속성들은 각 요소에 개별적으로 지정해야 합니다.
상속을 강제하기
때로는 상속되지 않는 속성을 자식 요소에 강제적으로 적용하고 싶을 때가 있습니다. 이 경우, inherit 키워드를 사용할 수 있습니다.
.parent {
border: 1px solid black;
}
.child {
border: inherit; /* 부모 요소의 border 속성을 상속받음 */
}위 예제에서 child 클래스는 부모 요소인 parent 클래스의 border 속성을 상속받습니다.
예시로 이해하기
다음은 Cascading과 상속을 설명하는 예제입니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Cascading and Inheritance Example</title>
<style>
body {
color: black; /* 상속되는 속성 */
font-size: 16px; /* 상속되는 속성 */
margin: 0; /* 상속되지 않는 속성 */
}
.container {
color: blue; /* 특이성 10점 */
border: 2px solid green; /* 상속되지 않는 속성 */
}
.container p {
font-size: inherit; /* 부모의 font-size 상속 */
margin: inherit; /* 부모의 margin 상속 */
}
#main {
color: red !important; /* 중요도 높음 */
}
</style>
</head>
<body>
<div class="container" id="main">
<p>이 텍스트는 빨간색입니다.</p>
</div>
</body>
</html>위 예제에서 p 요소의 텍스트는 color: red;가 적용됩니다. 이는 #main ID 선택자의 color: red !important;가 가장 높은 우선순위를 가지기 때문입니다. 또한, p 요소의 font-size와 margin은 각각 부모 요소인 .container의 font-size와 margin을 상속받습니다.
결론
CSS의 Cascading과 상속 개념은 스타일 규칙이 충돌할 때 어떤 규칙이 적용될지를 이해하는 데 중요한 역할을 합니다. Cascading 규칙을 통해 스타일의 우선순위를 결정하고, 상속을 통해 스타일을 일관성 있게 적용할 수 있습니다. 이러한 개념을 잘 이해하면, 더 효율적이고 일관된 스타일링을 구현할 수 있습니다.
