[1주차] CSS의 Cascading이란?

CSS는 캐스케이딩 스타일시트(Cascading Stylesheet)의 줄임말입니다. 여기에서 캐스케이딩(Cascading)이란 ‘폭포같은, 계속되는, 연속적인’이라는 의미를 가진 단어입니다. 또한 이 캐스케이딩은 CSS에서 가장 중요한 스타일 적용 규칙이기도 합니다

캐스케이딩(Cascading)

'캐스케이딩'은 하나의 요소에 여러 속성들을 선언할 때 생기는 충돌을 피하는 규칙을 말합니다.

캐스캐이딩에는 다음과 같이 세가지 규칙이 있습니다.

중요도 : CSS가 어디에 선언되었는지에 따라서 우선순위가 달라진다.
명시도 : 대상을 명확하게 특정할 수록 명시도가 높아지고 우선순위가 높아진다.
코드의 순서 : 선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 스타일이 우선 적용된다.

중요도

CSS 선언의 중요도는, 그것이 '어디'에서 사용되었는지에 따라 다릅니다. 다음의 순서대로, 나중 선언이 앞선 선언을 덮어 쓰고 요소에 적용됩니다.
CSS 속성을 줄 때 !important를 뒤에 붙이면 우선순위가 가장 높아집니다.

1. 브라우저 스타일시트
2. 사용자 스타일시트의 일반 선언
3. 저작자 스타일시트의 일반 선언
4. 저작자 스타일시트의 !important

명시도

명시도란 규칙의 선택자가 얼마나 명확하게 요소를 지정하고 있는지 측정한 것입니다.
명시도가 낮은 선택자는 넓은 범위의 요소들에 적용될 것이며, 명시도가 높은 선택자는 페이지의 단 하나의 요소만 선택하고 있을 수도 있습니다.

1. element 선택자
2. class 선택자
3. id 선택자
4. inline으로 엘리먼트에 직접 css를 기술

코드의 순서

하나의 요소를 가리키는 선언이 두 개 있고, 두 선언의 중요도와 명시도가 모두 같다면, 나중에 나온 선언을 선택하게 됩니다.