CSS - Cascading

Jnnsu·2023년 11월 26일

Cascading

요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. 이때 충돌을 피하기 위해 CSS 적용 우선순위가 필요한데 이를 캐스캐이딩(Cascading Order) 이라고 한다.
캐스캐이딩에는 다음과 같이 세가지 규칙이 있다

브라우저 기본제공 스타일 시트(User Agent Stylesheet) : 똑같은 선택자를 쓰고 있다면 우리가 작성한 코드보다 우선순위가 낮다.
작성한 스타일 시트(Author StyleSheet)

id 개수, class 개수, 태그 개수를 점수로 표현해서 우선순위를 정하는 방식이다.

a.order { /* 아이디 0, 클래스 1, 태그 1 = 명시도 0 1 1 */
  ...
}

a#info { /* 아이디 1, 클래스 0, 태그 1 = 명시도 1 0 1 */
  ...
}

css를 부여헀는데 변경이 없다면?
아래 링크에서 명시도를 미리 확인해보자.
Specificity Calculator

코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높다.
예를 들어서 아래 코드에서 글자색은 #2e2e2e가 된다.

.class {
	color: #ffffff;
    }
    
.class {
	color: #2e2e2e;
    }

부모태그에 적용된 CSS 규칙이 자식 태그에도 적용되는 것이다.
상속된 속성의 우선순위 : 가까운 조상에게 물려받은 속성일수록 우선순위가 높다.

조상 태그들에서 스타일이 모두 계산된 상태에서 우선순위를 따지는데, 가까운 조상에게 물려받은 속성일수록 우선순위가 높다.
예를 들어 아래 코드에서 a.order 태그에 적용되는 글자색은 #cccccc 이다.

<body>
    <div id="info">
      <p class="description">
        ...<a class="order" ...>주문</a>
      </p>
    </div>
</body>

body {
  color: #000000;
}

#info {
  color: #aaaaaa;
}

.description {
  color: #bbbbbb;
}

.order {
  color: #cccccc;
}

모든 속성이 상속되는 것은 아니고, 상속되는 속성들이 정해져 있다.

어떤 속성이 상속되는지 전부 외울 필요는 없고, 만약 어떤 속성이 상속되는지 알고 싶다면 그때그때 검색하면 된다.

위에 적어둔 속성들 중에서도 항상 상속되는 것이 아닌 것도 있다.
예를 들어 a 태그는 color 속성이 상속되지 않는다. a 태그가 상속을 받게하고 싶으면 해당 속성에 inherit 값을 쓰면 상속이 가능하다.

일부 속성은 상속되지 않는다 . 예를 들어 요소에 width 를 50% 로 설정하면, 모든 하위 항목의 너비가 부모 너비의 50% 가 되지 않는다.

CSS 는 상속을 제어하기 위한 4 가지 특수 범용 속성 값을 제공한다. 모든 CSS 속성은 이러한 값을 허용한다.

inherit (강제 상속)
선택한 요소에 적용된 속성 값을 부모 요소의 속성 값과 동일하게 설정한다.
언제 사용? -> 보통 inherit 키워드는 복잡한 속성에서 예외를 만들때 아주 유용하게 사용된다.
initial
선택한 요소에 적용된 속성 값을 브라우저의 기본 스타일 시트에서 해당 요소의 해당 속성에 설정된 값과 동일하게 설정한다. 브라우저의 기본 스타일 시트에서 값을 설정하지 않고 속성이 자연스럽게 상속되면 속성 값이 대신 inherit 되도록 설정된다.
언제 사용? -> 상속이 너무 복잡해졌다 싶으면 쓰는 것.
unset
속성을 natural 값으로 재설정 한다. 즉, 속성이 자연적으로 상속되면 inherit 된 것처럼 작동하고 그렇지 않으면 initial 처럼 작동한다.
revert
현재 엘리먼트에 선언 된 캐스캐이딩된 속성으로부터 style origin (en-US) 으로 되돌린다. 부모 속성 또는 user agent에 따라 default로 선언 된 속성으로 되돌리는 것이다. 이 속성은 css 단축 속성 all을 포함한 어떤 속성에도 적용할 수 있다.