CSS의 Cascading 대하여

cascade란?

일반적으로 cascade란 계단 형식의 폭포의 형태 일컫는다고 한다.

지금 배우고 있는 css에서는 규칙을 순서에 따라서 합치는 걸 cascade라고 한다.

 

 

위 내용처럼 여러 css규칙이 적용될 때 순서에 따라 합쳐지는 형태이다.

취소선 있는 속성은 위에 속성이 우선되기 때문에 적용되지 않고 정의되지 않은 영역만이 그대로 적용이 된 걸 볼 수 있다.

 

 

 

cascade 순서

 

1. 똑같은 클래스라면 맨 아래 코드 줄에 적인 스타일이 우선 적용된다.

2. 선택자에 대한 명시도에 따라 우선 적용된다.

명시도는 아이디 개수, 클래스 개수, 요소 개수를 순서대로 숫자를 나열해서 점수를 매긴다.

 

 

 

 

요약 (+추가 정보)

 

CSS는 "Cascading Style Sheets"의 약자라고 한다.

캐스케이드는 CSS에서 한 요소에 여러 개의 스타일이 적용될 때, 어떤 스타일이 우선 적용될지 결정하는 규칙을 의미한다.

CSS 캐스케이드는 스타일의 우선순위를 결정하여, 여러 개의 스타일이 충돌하더라도 개발자가 웹 페이지의 레이아웃과 모양을 제어할 수 있게 해 준다.

 

CSS 캐스케이드에서 중요하게 고려되는 요소 정리하자면

1. 특수성(Specificity): 선택자(selector)의 특수성은 특정 요소를 선택하는 선택자가 얼마나 "구체적"인지 결정. 높은 특수성을 가진 선택자는 낮은 특수성을 가진 선택자보다 우선 적용.
2. 중요도(Importance): "!important" 선언은 스타일 규칙에 가장 높은 우선순위를 줄 수 있다. 즉, 특수성(Specificity)에 관계없이 다른 모든 스타일보다 우선 적용.
3. 출처 순서(Source order): 스타일시트에서 나중에 선언된 스타일이 이전 스타일보다 우선 적용. HTML 문서의 끝에 있는 스타일 블록에서 정의된 스타일이 문서의 시작에서 정의된 스타일보다 우선 적용되는 것을 의미.

 

 순서를 매기자면?

1. !important 라고 지정된 요소가 가장 우선순위가 높다.
2. 인라인 스타일(inline style)이 두 번째로 우선순위가 높다.
3. ID 선택자(selector)
4. 클래스 선택자(class selector), 속성 선택자(attribute selector), 가상 클래스(pseudo-classes)
5. 요소(element) 즉, HTML 태그 선택자 (예, p, div 같은 거), 그리고 pseudo-elements(예 : ::before)