Cascading이란?
스타일 시트나 규칙이 서로 겹칠 때 어떤 걸 적용할 지를 정하는 것입니다.
Cascading 3요소
Specificity
우선순위로 해석됩니다.
/* 1순위 - 인라인 스타일 */
/* [HTML] */
<div style="background-color:green;">
/* 2순위 - 아이디 선택자 */
/* [HTML] */
<div id="test"></div>
/* [CSS] */
#test {
}
/* 3순위 - 클래스 선택자등... */
/* [HTML] */
<div class="test"></div>
/* [CSS] */
.test{
}
1순위는 인라인, 2순위는 아이디, 3순위는 클래스 이렇게 기억해두면 좋겠습니다.
Source Order
여러개의 스타일시트가 적용되면 뒤에 오는 규칙을 우선으로 합니다.
h1 {
color:red;
}
h1 {
color:blue;
}
위를 적용한다면 h1의 결과는 파란색으로 나올 것입니다.
!important
해당 스타일이 다른 규칙보다 우선됩니다. 예를 들어보면
h1 {
color: gray !important;
}
h1 {
color: red;
}
방금전에 뒤에서 등장한 규칙이 우선 적용된다고 하였는데 그러면 h1은 red가 되어야하는 걸까요?
!important 가 위쪽 규칙에 적용되었기 때문에 h1의 색은 회색이 됩니다.
Cascading을 신경써야 하는 이유
웹사이트를 제작할 때 Cascading을 신경쓰지 않으면 자신이 원하지 않는 위치에 태그가 위치해 있을 때가 많고
그 이유를 찾을 때에도 Cascading을 모른다면 코드 수정도 어려울 수 있습니다.
그럼 다들 Cascading 기본 원칙을 지키면서 즐겁게 CSS를 공부해보도록 합시다!