[개념] CSS - Cascading이란?

이 내용은 MDN에서 소개한 CSS Cascading을 해석하여 제 방식대로 이해한 내용을 정리한 것입니다.

틀린 부분이 있다면 댓글로 남겨주세요 😆

CSS?

CSS는 Cascading Style Sheets의 약자로 웹페이지를 꾸미려고 작성하는 코드입니다.

이름에서도 알 수 있듯, Cascading은 CSS의 기본 개념입니다.

Cascading이란?

Cascade의 사전적 의미 : 종속

공식문서인 MDN에서 소개하는 CSS에서의 Cascading 은 다음과 같습니다.

"The cascade is an algorithm that defines how user agents combine property values originating from different sources."

"캐스케이드는 서로 다른 소스에서 발생하는 속성 값을 결합하는 방법을 정의하는 알고리즘이다."

다소 어렵게 느껴질 수 있지만 쉽게 풀자면,

여러 곳에서 작성된 스타일 중 요소에 적용할 스타일을 고르는 방식이라고 할 수 있습니다.

스타일을 고르는 방식(Cascading)은 5가지로 구분할 수 있습니다.

1. Relevance(관련성)

2. Origin and important(출처와 중요도)

3. Specificity(명시도)

4. Scoping Proximity(범위 접근성)

5. Order of appearance(코드의 순서)

🔖 Relevance

다양한 소스의 모든 규칙은 명시된 특정 요소에 적용되는 규칙을 말합니다.

선택자가 주어진 요소와 일치하고, 적절한 media에서의 규칙이 적용되는 것을 말하며, 예를 들면 @media 를 사용하여 크기를 규정한 경우 해당 크기일 때 적용되는 것과 그 중 p 태그(예를 들어)에 적용되는 코드는 div태그에 적용되지 않습니다.

🔖 Origin type(작성 출처)와 Important(중요도)

CSS는 여러 곳에서 선언할 수 있는데 이 중에는 User-agent Stylesheets(사용자 도구 스타일시트), Author Stylesheets(작성자 스타일시트), User Stylesheets(사용자 스타일시트) 등이 있습니다.

User-agent Stylesheets(사용자 도구 스타일시트)

브라우저에는 모든 문서에 기본 스타일을 제공하는 기본 스타일시트가 존재하며, 이를 User-agent Stylesheets라고 합니다.

예시 ) a 태그의 하이퍼텍스트 스타일, div의 diplay 속성 등

사용자가 User-agent Stylesheets를 수정할 수 있지만 드믄 경우이고, 권장하지 않습니다.

Author Stylesheets(작성자 스타일시트)

가장 일반적인 유형의 스타일시트로, 웹 개발자가 작성한 스타일입니다.

예시) inline 스타일, <style> 태그나 <link> 태그를 통해 페이지에 작성하는 스타일시트

User Stylesheets(사용자 스타일시트)

대부분의 브라우저에서 웹 사이트 사용자가 원하는 대로 환경을 맞춤화하도록 설계된 사용자 정의 사용자 스타일시트입니다.

말이 어렵지만 간단하게 말하면 웹 사이트 내에서 제공하는 스타일시트를 말합니다.

예시 링크

Why You Should Use a User Style Sheet

Style sheets allow you to control how pages that you visit look. They fix usability issues and can help deal with elements that you might find annoying.

www.thoughtco.com

우선순위

위에서 소개한 3가지 스타일시트와 더불어 작성된 출처에 따라(혹은 !important 사용에 따라) 우선순위를 나열하면 다음 표와 같습니다.

위에서 아래로 갈 수록 높은 우선순위를 가지며, !important를 사용하면 다른 곳에서 작성한 곳보다 우선순위를 갖는 것을 알 수 있습니다.

(여기서나온 CSS @keyframe animations은 애니메이션에 부여된 속성 값, CSS transitions은 transtions 속성을 이용하여 부여한 속성 값을 말합니다. )

🔖 Specificity(명시도)

Specificity (명시도)이란 관련성이 가장 높은 CSS 스타일을 결정하기 위해 브라우저에서 사용하는 알고리즘으로, 결과적으로 요소에 적용할 속성 값을 결정합니다.

Specificity 계산 방식

요소(의사 요소)와 일치하는 선택자 내 각 가중치 카테고리의 선택자 수에 따라 결정됩니다.

동일한 요소에 대해 서로 다른 속성 값을 제공하는 두 개 이상의 선언이 있는 경우 알고리즘 가중치가 가장 큰 스타일 블록의 선언 값이 스타일로 적용됩니다.

선택자 가중치 카테고리

0(높음)	1	2	3	4(낮음)
inline 스타일 적용	ID 선택자(#example)	CLASS 선택자(.myClass)	타입 선택자(p, a, ::before, ...)	no value(*, :where() )

(+, ≥, __ 와 같은 조합자는 가중치 계산에 영향을 주지 않습니다)

& 중첩 결합자는 가중치에 영향을 주지 않지만, 선택자의 매개변수는 영향을 미칩니다. (각각의 명시도 가중치는 명시도가 가장 높은 선택자 목록의 선택자 매개변수에서 가져옵니다)

예시

이후에 설명할 내용이지만, CSS 스타일은 코드 순서상 위에서 아래로 overriding하는 방식으로 작성됩니다.

하지만 아래 예시에서는 순서와 상관없이 우선순위에 따라 적용되는 것을 볼 수 있습니다.

inline 스타일을 적용하는 경우, 다른 선택자에 비해 우선순위가 높아 우선적으로 적용되는 것을 볼 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .myClass {
            color: burlywood;	/* 0 0 1 0 0 해당 */
        }

        #example {
            color: blueviolet;	/* 0 1 0 0 0 해당 */
        }

        p {
            color: blue;        /* 0 0 0 1 0 해당 */
        }
    </style>
</head>
<body>
	<!-- 이 요소 우선순위 계산: 1 1 1 1 0 -->
    <p id="example" class="myClass" style="color:red;">CSS Cascading</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .myClass {
            color: burlywood;
        }

        #example {
            color: blueviolet;
        }

        p {
            color: blue;
        }
    </style>
</head>
<body>
	<!-- 이 요소 우선순위 계산: 0 1 1 1 0 -->
    <p id="example" class="myClass">CSS Cascading</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* #example {
            color: blueviolet;
        } */
        
        .myClass {
            color: burlywood;
        }

        p {
            color: blue;
        }
    </style>
</head>
<body>
	<!-- 이 요소 우선순위 계산: 0 0 1 1 0 -->
    <p id="example" class="myClass">CSS Cascading</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* #example {
            color: blueviolet;
        } */
        
        /* .myClass {
            color: burlywood;
        } */

        p {
            color: blue;
        }
    </style>
</head>
<body>
	<!-- 이 요소 우선순위 계산: 0 0 0 1 0 -->
    <p id="example" class="myClass">CSS Cascading</p>
</body>
</html>

🔖 Scoping Proximity(범위 접근성)

우선순위가 있는 원본 레이어의 두 선택자가 동일한 명시도를 갖는 경우, DOM 계층 구조에서 범위 루트까지의 계층 수가 적은 범위 스타일이 적용됩니다.

Cascade Layers

❗️ 이전에 사용되던 layer 태그와 다른 개념입니다.❗️

Cascade Layers는 CSS를 여러 레이어로 분할할 수 있는 개념입니다.

또한 레이어별 적용 순서를 적용할 있고, 적용하지 않으면 코드상 순서(작성순서)에 의거하여 마지막 레이어가 높은 우선순위를 갖습니다.

Cascade Layers는 명시도와 작성순서보다 우선순위가 더 높으며, 이는 우선순위가 더 높은 Cascade Layer에 있다면, 이보다 낮은 우선순위 Cascade Layer의 명시도와 작성순서는 체크하지 않는다는 점에서 강점을 가지고 있습니다.

예시

<style>
  @import unlayeredStyles.css;
  @import AStyles.css layer(A);
  @import moreUnlayeredStyles.css;
  @import BStyles.css layer(B);
  @import CStyles.css layer(C);
  p {
    color: red;
    padding: 1em !important;
  }
</style>

<p style="line-height: 1.6em; text-decoration: overline !important;">Hello</p>

위 코드를 기반으로 우선순위를 정리하면 다음과 같습니다.

🔖 Order of appearance(코드의 순서)

모든 우선순위가 같은 경우, 코드 상에서 위에서 부터 아래로 적용되어, 가장 마지막에 선언된 스타일이 적용됩니다.

🔖 정리

위에서 여러 우선순위를 설명했는데, 이를 표로 정리하면 다음과 같습니다.

🔖 공부하면서 느낀점

CSS는 기본적으로 적용할 우선순위가 정해져 있으며, 사용할 시에 기본적으로 숙지하고 있지 않으면 "이게 왜 이렇게 적용되지..?"라는 말이 자동으로 나옵니다. 또한 이전까지 Cascade Layers라는 개념을 모르고 있어 매번 우선순위를 줄 때, !important와 순서, 그리고 id 선택자를 통해 우선순위를 나눴는데, 이런 과정에서 작성 코드가 많아지면 적용 우선 순위를 따지기 전에 해석하는데 시간이 많이 소요됩니다.

이번 기회를 통해 우선순위를 정리하고, Cascade Layers라는 개념을 통해 보다 깔끔한 코드 작성에 다가간 느낌입니다.

"CSS Cascading" 이라는 이름을 처음 들었을 땐, "이런게 있었나?"라는 생각이 먼저 들었는데, 공부하면서 알고 있던 내용들이 정리하는 느낌이라 너저분한 방을 청소한 기분입니다 😆

참조 : MDN - Introducing the CSS Cascade

Introducing the CSS Cascade - CSS: Cascading Style Sheets | MDN

The cascade is an algorithm that defines how user agents combine property values originating from different sources. The cascade defines the origin and layer that takes precedence when declarations in more than one origin, cascade layer, or @scope block se

developer.mozilla.org

표지: 뤼튼 이미지 생성 AI

뤼튼

당신의 첫 AI 에이전트 뤼튼. AI 검색부터 나만의 AI 캐릭터까지, AI의 끝없는 가능성을 탐험해 보세요.

wrtn.ai

'WEB > CSS' 카테고리의 다른 글

[개념] CSS - Position 속성 (0)	2024.05.31