CSS Cascade 소개
스타일 규칙 및 선언이 어떻게 적용되는지에 대한 규칙 및 우선 순위를 정의하는 프로세스이다. 다양한 스타일 규칙이 충돌하는 상황에서 어떤 스타일이 최종적으로 적용되는지 결정한다.
CSS(Cascading Style Sheets)라는 이름에서 볼 수 있듯, cascading는 CSS의 핵심이라고 할 수 있다.
CSS 캐스케이팅의 핵심 개념
원천 유형(Origin types)
🔹사용자 에이전트 스타일시트 (User-Agent Stylesheets)
브라우저 자체가 기본적인 스타일을 정의한다. 이러한 스타일은 웹 페이지에 브라우저별로 일관성을 제공한다.
🔹저자 스타일시트 (Author Stylesheets)
웹 페이지의 저자 또는 디자이너가 정의한 스타일 규칙이 포함된 스타일 시트이다. 이러한 규칙은 웹 페이지의 디자인을 결정하는 데 사용된다.
🔹사용자 스타일 시트( User stylesheets)
사용자가 브라우저 설정에서 사용자 지정 스타일시트를 정의할 수 있다. 이러한 스타일은 사용자가 웹 페이지의 스타일을 원하는대로 변경할 수 있게 한다.
Cascading 순서
- 중요도(Importance):
!important로 선언된 스타일 규칙은 다른 모든 규칙보다 우선순위가 높습니다. - 명시도(Specificity): 구체적인(특정한) 선택자가 높은 우선순위를 갖습니다. 예를 들어, ID 선택자가 클래스 선택자보다 높은 우선순위를 갖습니다.
- 소스 순서(Source Order): 동일한 특성 값과 특정성을 가지는 규칙은 마지막에 선언된 규칙이 먼저 선언된 규칙을 덮어씁니다. 즉, 나중에 선언된 규칙이 우선순위가 높습니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p class="red-text">This is a paragraph.</p>
</body>
</html>여기서, p 요소의 텍스트는 파란색이다. 왜냐하면 내부 스타일 시트의 규칙이 적용되었기 때문이다. 소스 순서에 따라서, 내부 스타일 시트의 규칙이 먼저 선언되었다. 이제 외부 스타일 시트를 추가해보겠다.
Copy code
p.red-text {
color: red;
}이제 p 요소의 텍스트는 빨간색으로 변경된다. 외부 스타일 시트의 규칙이 내부 스타일 시트의 규칙을 덮어쓴다. 이것은 특정성(Specificity)의 차이에 의한 결과입니다.
명시도(Specificity)
CSS 규칙을 우선 순위에 따라 적용하는 데 중요한 개념이다. 명시도는 선택자의 구체성을 나타내며, 스타일 규칙이 어떤 요소에 적용되는지 결정한다. 구체적인 규칙이 높은 특정성을 가지므로 더 높은 우선순위를 갖게 된다.
명시도 계산 방법
- 인라인 스타일(Inline Styles): 인라인 스타일은 HTML 요소의
style속성을 통해 정의된다. 인라인 스타일은 가장 높은 특정성을 가진다. 특정성 값은 1,000,000 - ID 선택자: ID 선택자는 HTML 요소의
id속성을 사용하여 정의된다. ID 선택자의 특정성 값은 1,000 - 클래스 선택자, 속성 선택자, 가상 클래스 선택자: 클래스 선택자, 속성 선택자, 가상 클래스 선택자 등은 요소의 클래스, 속성 또는 상태를 기반으로 정의된다. 이러한 선택자들의 특정성 값은 100
- 요소 선택자: 요소 선택자는 HTML 요소의 유형(예:
div,p,a등)을 기반으로 정의된다. 특정성 값은 10
명시도는 선택자에 나오는 각 요소 유형(인라인 스타일, ID 선택자, 클래스 선택자, 속성 선택자, 가상 클래스 선택자, 요소 선택자)에 대한 값의 합으로 계산된다.
예를 들어, 다음 선택자는 특정성 값이 0,0,1,3입니다
예시 코드
div#myDiv.myClass a:hover명시도는 왼쪽에서 오른쪽으로 읽히며, 각 요소 유형의 특정성 값을 합한다.
위의 예시에서, ID 선택자(#myDiv)가 1,000, 클래스 선택자(.myClass)가 100, 가상 클래스 선택자(:hover)가 1, 요소 선택자(div, a)가 각각 10의 특정성을 가지므로 특정성 값은 0,0,1,3이 된다.
명시도를 이해하면 CSS 규칙이 어떻게 우선 순위를 갖고 스타일을 결정하는지 더 잘 파악할 수 있다. 이것은 CSS 코드를 작성하고 디버깅할 때 유용한 개념이며, 스타일 충돌을 다루는 데 도움이 된다.
