CSS - Cascading

CSS의 Cascading(캐스케이딩)은 스타일 규칙이 HTML 요소에 적용될 때의 우선순위를 결정하는 과정을 의미합니다.

 

중요도 (Importance)

중요도는 스타일이 선언된 위치(사람)에 따라서 우선순위를 매기는 것입니다. 스타일 시트는 작성자(author), 사용자(user), 사용자 도구(user agent, 브라우저가 대표적)가 작성한 세 종류로 나뉩니다. 이 중에서 가장 중요도가 높은 것은 작성자의 CSS파일입니다. 각 스타일 시트의 우선순위를 나누면 다음과 같은 순서로 적용됩니다.

우선순위는 작성자 스타일 > 사용자 스타일 > 브라우저 기본 스타일 순입니다.

 

!important를 사용하는 경우
css를 지정하는데 있어 !important를 넣을 경우 다른 스타일 보다 제일 우선시 되어 적용 됩니다

 

명시도(Specificity)

명시도는 스타일 규칙이 얼마나 특정한지를 나타내는 숫자 체계입니다.

인라인 > id > class > 태그

특이성이 동일한 스타일 규칙이 있을 경우, 나중에 정의된 규칙이 우선적으로 적용됩니다.

 

코드 순서 Source Order

우선순위의 마지막 요소는 코드 순서입니다. 코드 순서는 코드에서 가장 마지막에 등장한 속성을 최우선으로 적용한다는 것 입니다. 이것은 위에서 아래로 해석해나가는 프로그래밍의 기본 원리와도 일치합니다.