web/html css

[css] 캐스케이딩

xudegloss 2023. 3. 9. 22:51

1. 캐스케이딩이란?

- 의미 : 폭포, 위에서 아래로 흐르는

- 상속 속성이 여러 개인 경우, 우선 순위를 부여하는 것을 의미한다.

- 예를 들면, font-familly가 있다. 폰트는 웹 환경에 따라 적용되지 않는 경우가 많기 때문에 2개 이상 지정하는 경우가 많다. 맨 마지막에는 sans-serif 등 안전 장치를 부여한다. 이런 경우에는 가장 앞에 있는 폰트가 우선 순위가 높은 폰트이고, 뒤로 갈수록 우선 순위가 낮아진다.

  1. 중요도 : 선언 위치에 따라 우선 순위가 결정된다. 
  2. 구체성 (명시도) : 구체적인 특성일 수록, 명시도가 높아진다.
  3. 선언 순서 : 맨 마지막이 우선 순위를 갖는다.

2. 중요도

  • 브라우저 스타일 시트 : 기본값
  • 사용자 스타일 시트
  • 개발자 스타일 시트

우선 순위는 개발자 > 사용자 > 브라우저 이다. 우선 순위가 높은 것이 낮은 것을 덮는다고 생각하면 된다. 그리고 css를 어떻게 적용하냐에 따라서 우선 순위가 갈린다. 인라인 css 적용 > style 태그 이용 > link로 css 파일 연결 순이다.

3. 구체성 (명시도)

우선 순위는 ID > Class > Tag > ... 순이다. 구체적이면 구체적일 수록, 우선 순위가 높아진다.  강제로 명시도를 올리기 위하여 !important를 사용하기도 한다. 하지만 가급적 이용하지 않는 것이 좋다.

4. 선언 순서

같은 부분의 스타일을 적용할 때, css 파일에서 가장 마지막에 선언된 스타일이 우선 순위를 갖는다.

'web > html css' 카테고리의 다른 글

[css] position  (0) 2023.03.19
[css] 배경과 색상  (0) 2023.03.10
[css] 단위  (0) 2023.03.09
[css] 폰트 속성  (0) 2023.03.09
[css] Layout Flex 심화  (0) 2023.03.09