program/web(html,css)

[css]캐스케이드(Cascade)

momoa210 2024. 2. 3. 11:26

캐스케이드(Cascade)

최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 의미

스타일 시트의 종류
브라우저에서 기본으로 제공하는 스타일시트(User Agent Stylesheet)는 똑같은 선택자를 쓰고 있다면 우리가 작성한 코드보다 우선순위가 낮습니다.

코드 상의 순서
코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높습니다.

명시도
선택자마다 명시도 점수가 있는데요. 간단히 말해서 아이디 개수, 클래스 개수, 태그 개수를 적어서 점수를 비교합니다.


상속
부모 태그에 적용된 CSS 규칙은 자손에게도 상속되는데요. 모든 속성이 상속되는 건 아니고, 상속되는 속성들이 정해져 있습니다.

상속된 속성의 우선순위
조상 태그들에서 스타일이 모두 계산된 상태에서 우선순위를 따지는데요. 가까운 조상에게 물려받은 속성일수록 우선순위가 높습니다.

'program > web(html,css)' 카테고리의 다른 글

[html] video tag  (0) 2024.02.03
[html] 테이블  (0) 2024.02.03
[CSS] 선택자 (전체, 자식)  (0) 2024.01.29
[css]CSS 선택자(CSS Selector)  (0) 2024.01.28
쿠키 SameSite  (1) 2024.01.27