[CSS] 캐스케이딩 스타일 시트

캐스 캐이딩(Cascading) - 위에서 아래로 흐르는 스타일 시트

---

HTML element는 하나 이상의 스타일에 영향을 받을 수 있다.

그래서 스타일 간의 충돌을 막기 위해 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 한다.

이를 캐스캐이딩이라고 한다.

 

CSS 정식 명칭이 Cascading Style Sheets인 만큼 캐스캐이딩이 중요하다.

캐스캐이딩은 다음의 3가지에 의해 결정된다.

 

• Importance(중요도)
• Specificity(명시도)
• 코드 순서

 

Importance(중요도)

1 사용자 스타일 시트

저시력자, 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트.

 

2 제작자가 만든 스타일 스티 중 !important가 붙은 스타일

 

3 제작자가 만든 일반 스타일

 

4 기본적인 브라우저 스타일 시트

 

 

Specificity(명시도)

태그 요소에 스타일 속성을 줄 때 선택자를 사용한다. 그런데 선택자의 종류에 따라 명시도의 차이가 있고

이 명시도는 더 구체적이라는 뜻으로 우선순위를 의미한다.

 

1 style

태그 안에 style 속성을 사용해 해당 태그에만 스타일을 적용.

 

2 id

 

3 class

 

4 태그

 

코드 순서

선택자의 종류와 깊이가 같을 때 우선순위의 결정 방식은 코드의 순서이다.

코드 상에서 나중에 오는 경우가 우선순위가 높도록 설정된다.

 

 

참고

[CSS] 캐스캐이딩 ( cascading )

- 두잇 html5 + css3 웹 표준의 정석