CSS의 Cascading 이해하기
이번 스프린트 1주차 위클리페이퍼는 CSS의 Cascading에 대한 주제인데요,
CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 언어입니다.
여기서 "Cascading"이라는 개념이 중요한 역할을 합니다.
Cascading이란 무엇인가?
Cascading은 여러 CSS 규칙이 동일한 요소에 적용될 때 어떤 규칙이 우선되는지를 결정하는 방법입니다. 이를 이해하기 위해 세 가지 중요한 요소를 알아야 합니다:
원천(Source), 특이성(Specificity), 그리고 중요도(Importance)입니다.
1. 원천(Source)
CSS 규칙은 여러 출처에서 올 수 있습니다. 이 출처들은 다음과 같은 순서로 우선순위를 가집니다:
- 브라우저 기본 스타일: 모든 브라우저는 HTML 요소에 대해 기본 스타일을 가지고 있습니다.
- 사용자 스타일 시트: 사용자가 브라우저 설정에서 정의한 스타일 시트입니다.
- 개발자 스타일 시트: 웹 페이지를 만든 개발자가 정의한 스타일 시트입니다.
- 인라인 스타일: HTML 요소에 직접 정의된 스타일입니다.
예를 들어, <div style="color: red;">처럼 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 규칙이 충돌할 때 특이성과 중요도를 고려하는 예제입니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Cascading Example</title>
<style>
body {
background-color: white; /* 요소 선택자 */
}
.container {
background-color: lightgray; /* 클래스 선택자 */
}
#main {
background-color: blue; /* ID 선택자 */
}
div {
background-color: yellow !important; /* 중요도 설정 */
}
</style>
</head>
<body>
<div id="main" class="container">
Cascading Example
</div>
</body>
</html>이 예제에서 여러 CSS 규칙이 div 요소에 적용됩니다.
1. body { background-color: white; }
2. .container { background-color: lightgray; }
3. #main { background-color: blue; }
4. div { background-color: yellow !important; }
이 경우, div 요소의 최종 배경색은 yellow가 됩니다. 이는 !important가 적용된 규칙이 가장 높은 우선순위를 가지기 때문입니다.
CSS의 Cascading 개념을 이해하면, 다양한 CSS 규칙이 충돌할 때 어떤 규칙이 적용될지를 예측할 수 있습니다. 이를 통해 더 세련되고 일관된 스타일을 유지할 수 있습니다.
