[CSS] Cascading과 우선순위

개발/Front

차뀨뀨 2024. 1. 17. 16:50

📑 개요

CSS 스타일을 적용하는 우선순위인 Cascading에 대해 알아보겠다.

그렇게 어려운 내용은 없어 간단하게 끝날 포스팅.

스타일 규칙 및 선언이 어떻게 적용되는지에 대한 규칙 및 우선 순위를 정의하는 프로세스

CSS의 이름이 Cascading Style Sheets인 만큼 cascading은 css에서 아주 중요한 요소이다.

브라우저 기본 스타일은 우리가 쓰고있는 크롬이나 사파리가 디폴트로 가진 스타일이며,

제작자 스타일은 웹을 개발한 사람이 설정한 스타일을 의미한다.

사용자 스타일은 사용자가 브라우저 상에서 설정한 옵션(ex. 윈도우 테마 설정)을 의미한다.

스타일 적용 범위가 좁을 수록 우선 순위가 높아진다.

관련한 것은 아래의 포스팅을 참고하면 되겠다.

[CSS] 선택자의 우선순위

📑 개요 처음 선택자란 단어를 보면 선택자가...... 뭔데?;; 라는 생각부터 들 것이다. 나도 처음 선택자란 단어가 굉장히 낯설게 다가왔는데 쉽게 생각하면 선택자란 등수매기기 정도라고 생각

chachauniverse.tistory.com

중요도와 적용범위가 같다면 나중에 나온 스타일이 먼저 나온 스타일을 덮어 쓴다.

<style>
  p {
    color: red;
  }

  p {
    color:blue;
  }
</style>

<div>
  <p>나는 파란색</p>
</div>

<style>
  div p {
    color: red;
  }
  
  p {
    color:blue;
  }
</style>

<div>
  <p>나는 빨간색</p>
</div>

아래의 경우 red가 적용된 코드는 div와 p, 두 요소에 대해 스타일이 적용되야 하지만.

blue가 적용된 코드는 p 요소 하나 대한 스타일만 적용된다.

CSS 규칙 중 "가상 특수한 규칙이 이긴다"는 원칙이 적용된 것으로

p보다 div p가 더 특수하게 선택자가 지정되었으므로 해당 스타일이 적용된 것이다.

따라서, 아래의 경우 color: red;가 적용된다

그렇게 어려운 내용은 아니다!

좁은 범위일수록 우선권을 가진다고 생각하면 쉬울 듯😋