1. 정의
CSS는 Cascading Style Sheets의 줄임말로, 기본적으로 Cascading 규칙을 따르고 있다.
Cascading은 한 태그에 여러 스타일이 겹쳐지는 경우 어떤 스타일 요소를 우선 적용할 지 결정한다.
Cascading = 폭포, 위에서 아래로 흐르는
2. 동작 구조
Cascading은 두 가지의 원칙을 가진다.
- 스타일 우선 순위 원칙
- 스타일 상속
스타일 우선 순위 원칙은 스타일 요소가 가지는 우선 순위에 따라 스타일을 적용 시키는 것을 말한다.
아래의 3가지 요소가 우선 순위 결정 기준이 된다.
-
중요도
프로그래머 CSS(Author Stylesheet): 웹 개발자가 작성하는 스타일, HTML
사용자 CSS(User Stylesheet): 웹 사이트를 이용하는 사용자가 개발자 도구나 확장 프로그램을 통해 적용하는 스타일
브라우저 CSS(User Agent Stylesheet): 브라우저에 내장된 기본 스타일로, 별도의 스타일이 지정되지 않았을 때 기본적으로 적용되는 스타일
일반적인 CSS 우선 순위는 프로그래머 CSS > 사용자 CSS > 브라우저 CSS 순서다.
하지만
!important가 선언된 CSS가 가장 먼저 적용 된다.
-
명시도
선택자에 따라 우선 순위가 달라진다. 스타일의 범위가 좁을 수록 우선 순위가 높다. 그러므로 명시도에 따른 우선 순위는 인라인 > id > class > 태그 순서다.
인라인: 태그 안에 직접 넣은 스타일 요소
id: 문서에서 한 번만 쓰일 수 있는 속성
class: 문서에서 여러 번 쓰일 수 있는 속성
태그: 자체적인 태그 스타일
-
코드 순서
위에서 아래로 실행되는 구조로, 뒤에 온 코드가 앞 코드를 덮는 개념
스타일 상속 원칙은 태그들의 포함 관계로 스타일을 적용하는 원칙이다.
일반적으로 부모 요소의 스타일을 자식 요소들이 받아서 갖게 되는 상속 현상을 스타일 상속 원칙이라고 정의 한다.
Ref
https://bamtory29.tistory.com/entry/CSS-Cascading-캐스캐이딩
https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
https://ttaerrim.tistory.com/60
