Cascading이란?
최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 것
우선순위가 높은 규칙일수록 우선적으로 속성을 적용한다.
스타일 우선순위
스타일 요소는 각각 우선순위를 가지고 있는데 이 우선순위가 가장 높은 스타일이 적용되게 된다.
스타일 우선순위는 다음 3가지 요소를 통해 우선순위를 결정한다.
1. 중요도
2. 명시도
3. 코드 순서
중요도
!important로 선언된 스타일 규칙은 다른 모든 규칙보다 우선순위가 높다.
중요도를 끌어올리고자하는 속성 뒤에 !important를 붙여주면 된다.
명시도
명시도는 셀렉터가 가리키는 것이 명확할수록 우선순위를 높게 주는 것을 의미한다. (모호하게 여러개를 가리키는 셀렉터보다 적은 범위를 명확하게 가리키는 셀렉터 스타일의 우선순위가 높음)
명시도에 따른 우선순위는 다음과 같다.
인라인 > id > class > 태그
- 인라인 스타일 : 하나의 태그 내에서만 적용되므로 높은 우선순위를 갖는다. HTML 요소의 style 속성을 통해 정의된다.
- id는 문서 내에서 한 번만 등장하므로 비교적 좁은 범위를 가지게 된다. HTML 요소의 id 속성을 사용하여 정의된다.
- class는 여러번 쓰일 수 있기에 id보다는 넒은 범위를 갖는다. 클래스, 속성 또는 상태를 기반으로 정의된다.
- 태그는 문서 내 모든 태그를 가리키므로 범위가 제일 넒다. HTML 요소의 유형(예: div, p, a 등)을 기반으로 정의된다.
코드 순서
코드에서 가장 마지막에 등장한 속성을 최우선으로 적용한다.
스타일 상속
바깥쪽의 태그를 부모 요소, 내부의 태그를 자식 요소라고 한다.
상속: 부모 태그에 적용된 CSS 규칙은 자손에게도 상속된다는 것을 의미한다.
모든 속성이 상속되는 건 아니고, 상속되는 속성(color, font-family 등)들이 정해져 있다.
조상 태그들에서 스타일이 모두 계산된 상태에서 우선순위를 따지는데, 가까운 조상에게 물려받은 속성일수록 우선순위가 높다.
주의사항
!important, 인라인 스타일 정의는 스타일 디버깅을 어렵게 하기 때문에 남용하는 것은 좋지 않다.
