CSS 캐스케이드 레이어를 사용한 계층화

img

내가 사는 곳의 날씨는 마침내 옷을 입지 않고도 외출할 수 있을 만큼 따뜻해지기 시작했지만, 알고 보니, 아직은 겹겹이 쌓는 것을 끝낼 수 없다! 최근 세 가지 주요 브라우저(크롬, Safari* 및 Firefox) 모두 최신 업데이트에 완전히 새로운 방식으로 레이어링할 수 있는 새로운 CSS 기능을 포함했습니다!

물론 캐스케이드 레이어를 말하는 겁니다. CSS의 캐스케이드 및 특수성 측면은 기능에 내재되어 있지만, 다른 프로그래밍 언어들이 작동하는 방식과 매우 다르며, 일부 사람들에게 약간의 루프를 안겨준다. 그러나 이 새로운 업데이트로 인해 우리는 이전보다 훨씬 더 폭포를 제어할 수 있는 새로운 도구를 갖게 되었습니다. 이는 스타일시트를 개별적으로 구성하는 방식과 대규모 애플리케이션 스타일의 아키텍처를 변화시킬 것입니다. 기본적으로, 그것은 지옥처럼 멋지고, 상충되는 스타일에 시달리지 않는 더 깨끗한 CSS를 쓰는 것을 훨씬 더 쉽게 만든다.

*Kascade Layer에 대한 Safari 지원은 이 문서 작성 시점(2022년 3월 4일)까지 여전히 "기술 미리보기" 개발 브라우저에 있지만 다음 릴리스에서 표준으로 제공될 예정입니다.

시작: 폭포는 무엇인가?

캐스케이드 레이어를 완전히 이해하기 위해서는 먼저 캐스케이드 자체를 이해해야 합니다.

우리가 CSS에서 캐스케이드에 대해 이야기할 때, 우리는 스타일의 흐름에 대해 이야기하고 있는 것입니다. 스타일은 가장 일반적인 것에서 가장 구체적인 것으로 흘러갑니다. 즉, 여러 스타일을 동일한 요소에 적용할 수 있는 경우 "윈"할 스타일이 가장 구체적입니다. 예를 들어 보겠습니다.


<body>
     <section class="main">
            <h1>Title</h1>
     <div>
               <p>Here's some intro copy.</p>
        <p>Here's some body copy.</p>
     <div> 
            </section>
</body>


.main {
    color: blue; 
}

부모 섹션에는 파란색으로 설정하는 클래스(.main)가 적용되기 때문에 시작부터 h1과 p 텍스트는 모두 파란색이 됩니다.

All text is blue

색은 섹션 부모에서 h1 및 divchild로 상속된 다음 다시 div에서 p 자식색으로 상속됩니다. 여러분은 그것을 계단 아래로 흐르는 물처럼 생각할 수 있습니다 – 그것은 다른 무언가에 의해 능동적으로 차단되지 않는 한 항상 계속 흐를 것입니다.

스타일을 차단할 수 있는 다른 것이 바로 특수성이다. 특정 요소에 충돌하는 스타일을 적용하면 해당 요소가 그렇지 않았다면 적용되었을 일반 스타일을 재정의합니다. 예를 다시 살펴보도록 하겠습니다. h1을 대상으로 하고 이미 적용된 스타일과 통합할 수 없는 스타일을 설정하는 새로운 스타일을 추가하면 보다 구체적으로 지정된 스타일이 더 일반적인 스타일보다 "우승"할 수 있습니다.


.main {
    color: blue; 
}

h1 {
    color: green;
}

Title text is green

이 실험을 한 단계 더 진행하여 .main 클래스 내의 h1만 대상으로 지정하도록 하겠습니다. 그래서 우리는 .main styles가 좀 더 구체적인 h1 styles에 "잃어버리지만" h1 styles는 h1의 특정 부분 집합만을 대상으로 하는 이 새로운 스타일과 비교할 때 "잃어버릴" 것이라고 보았다. 좀 더 구체적인 스타일은 궁극적으로 적용되는 스타일입니다.


.main {
    color: blue; 
}

h1 {
    color: green;
}

.main h1 {
    color: orange;
}

Title text is pink

최종 모양을 결정하기 위해 브라우저에 의해 최종적으로 컴파일되는 스타일에 대한 여러 소스로 인해 이 문제는 더욱 복잡해집니다. 여기에는 앱에 대해 개인적으로 작성한 스타일시트, 외부 구성 요소 라이브러리 또는 아이콘 라이브러리 등에 포함된 타사 라이브러리 스타일시트, 사용자의 개인 스타일시트(예: 밝음/어둠 모드 설정 여부, 사용자 지정 글꼴 크기 등) 및 – f가 포함됩니다.inally – 브라우저 자체의 기본 스타일입니다. 휴!

알았어 캐스케이드 레이어가 뭐야?

Cascade Layers는 기본적으로 CSS 선언을 그룹화하여 속성별로 분류하는 방식 대신 모두 하나의 단위로 계단식으로 함께 계단식으로 분류하는 방식이다. 포토샵이나 피그마와 같은 디자인 소프트웨어에 익숙하다면, 기본적으로 그룹 명령어에 해당하는 CSS입니다.

A layer group in Figma

예를 들어, Figma의 스크린샷에는 "하나"라는 이름의 그룹화된 레이어가 있는데, 이 레이어는 "벡터 17"과 "벡터 16"의 두 가지 요소를 포함한다. 만약 제가 "원"을 맨 위 층으로 옮기고 싶다면, "벡터 17"과 "벡터 16"도 같이 움직여야 합니다.

지프, 지아이에프, 그래픽 인터체인지 포맷(Graphic Interchange Format)

A gif showing grouped objects moving together as one layer in Figma

Cascade Layer는 동일한 방식으로 작동하지만, 도면층 스택에서 위아래로 이동하는 페이지의 요소 대신 CSS 속성 규칙을 그룹화하여 계단식 순서를 위아래로 이동합니다. 레이어 우선 순위가 개별 요소의 우선 순위를 우선하기 때문에 일반적으로 계단식 흐름이 이루어지는 방식을 재정의할 수 있습니다. 도면층을 정렬(및 내포!)할 수도 있으므로 도면층 자체의 흐름과 계층을 직접 작성할 수 있습니다.

멋질 것 같은데, 실제 활용 사례는 어떤 건가요?

Cascade Layer의 주요 목표는 여러 스타일 소스 간의 충돌을 방지하는 것입니다. 즉, 스타일은 언제 어디서 작성되었든 응용 프로그램의 모든 위치에서 들어오는 스타일 순서를 개발자가 완벽하게 제어할 수 있습니다.

이전에는 객체 지향 CSS, 블록 요소 수정자 방법론, 역삼각형 CSS 또는 기타 유사한 접근법과 같은 명명 규칙과 프로세스를 사용하여 이 문제를 해결하거나 최소한 완화하려고 시도했습니다. 그러나 이러한 방법 중 하나를 사용하지 않는 외부 타사 라이브러리(또는 사용 중인 방법과 다른 방법을 사용하는 경우)와 함께 사용할 경우 문제가 발생할 수 있습니다. 궁극적으로, 이것은 요소, 스파게티 CSS에 대한 매우 길고 구체적인 이름들로 이어지며, 모든 것이 잘 어울리도록 하기 위한 !importants의 남용으로 이어진다. 아무리 좋게 말해도 이상적이진 않아요.

코드 좀 보자.

"응, 그래"라고 하면 "흥청망청"이라고 하겠지 저는 이미 모든 것을 알고 있었고, 저는 단지 이 새로운 기능을 사용하는 방법을 배우고 싶습니다." 좋습니다. 바로 시작하겠습니다!

계단식 도면층 정의

다음과 같이 @레이어를 정의할 수 있습니다.


@layer [layer name] {
      [layer styles]
}

구문은 @media로 미디어 쿼리를 작성하는 것과 비슷합니다. @layer를 호출하고 도면층에 이름을 지정한 다음 대괄호를 열고 해당 도면층의 일부로 그룹화할 스타일을 작성합니다.

도면층 스택 작성

목록을 만들어 레이어의 "스택"을 정의할 수도 있습니다.


@layer layer1, layer3, layer2;

이것은 도면층의 특이성 순서가 도면층이 스타일시트에 나타나는 순서에 따라 결정되기 때문에 스타일시트의 맨 위, 가져온 직후, 그러나 실제 스타일 정의 전에 수행하는 것이 가장 좋습니다. 요소 스타일이 페이지의 아래쪽에 있는 충돌하는 스타일에 의해 덮어쓰여지는 것과 마찬가지로 도면층 특이성도 모양 순서를 기반으로 합니다. 이 리스트를 사용하면 원하는 순서에 따라 레이어를 정의(그리고 빠르게 업데이트/재배열)하여 계단식 구조를 완벽하게 제어할 수 있습니다.

도면층 가져오기

가져온 스타일시트를 자체 도면층으로 정의하거나 공용 도면층에 추가할 수도 있습니다. 이것은 앞에서 논의한 외부 스타일시트를 관리하는 데 특히 유용할 수 있습니다. 예를 들어, 여기서는 KendoReact 구성 요소를 Star Trek LCARS UI처럼 보이도록 테마화하는 데 사용하는 사용자 지정 스타일시트를 가져옵니다. 이것은 중요하지만 구성요소의 UI에만 적용되므로 실제 응용프로그램 레이아웃 스타일을 재정의하지 않습니다. 이제 자신의 검도 레이어에 붙이고 전역 스타일 시트에서 레이어를 어떻게 정렬할지 지정할 수 있습니다.


@import 'styles/LCARS.scss' layer(kendo);

@layer reset, kendo, app

도면층 중첩

확실히 SASS 팬들을 흥분시키는 움직임으로, 층들은 서로 내부에 포개질 수 있다. 이것은 CSS에서 중첩된 스타일이 곧 따라온다는 것을 의미할 수 있나요? 행운을 빌어요!


@layer base {
      @layer theme {
                h1 {
                              color: blue; 
                }
      }
      @layer custom {
             p {
                       color: grey;
             }
      }

중첩 도면층은 점 표기법을 사용합니다. 즉, 다음과 같이 점으로 구분된 상위 도면층과 하위 도면층을 호출하여 참조할 수 있습니다.주제

점 표기법을 사용하여 리스트 스택의 하위 도면층을 참조할 수도 있습니다.


@layers reset, kendo, base.custom, base.theme, app

제가 알아야 하는게 또 있나요?

층을 쌓을 준비가 됐나요? 다음은 첫 번째 계단식 층 작성을 시작할 때 기억해야 할 몇 가지 간단한 팁과 요령입니다.

이름이 지정되지 않은 도면층을 작성할 수 있습니다(그러나 작성해서는 안 됩니다).

이름 없이 @layer를 쓸 수 있지만 권장되지는 않습니다. 이것은 당신의 코드를 다른 개발자들이 이해하기 어렵게 만들 뿐만 아니라, 당신의 캐스케이드 레이어를 주문하는 것에 있어서 몇 가지 중요한 단점이 있다. 이름 없이 레이어의 순서를 쉽게 변경할 수 없습니다. 레이어 순서는 실제로 파일의 위치에 따라 결정됩니다. 레이어 순서는 코드에 처음 나타날 때 결정됩니다. 이름을 사용할 경우 스타일 시트 맨 위에 있는 리스트 방법을 사용하여 쉽고 빠르게 레이어 순서를 변경할 수 있습니다.

도면층 스타일은 도면층되지 않은 스타일을 재지정합니다.

캐스케이드 계층은 비계층 CSS를 무시하지 않으며, 이는 역호환성을 위해 의도적으로 수행되었다. 즉, 개발자는 기존 스타일의 흐름을 뒤집을 염려 없이 계층별로 작업을 시작할 수 있습니다. 이것은 실제로 사람들이 기존의 코드베이스 전체를 먼저 업데이트할 필요 없이 새로운 코드에서 바로 레이어를 사용할 수 있도록 하는 매우 영리한 접근법입니다.

도면층 특이성이 요소 특이성을 재지정합니다.

레이어를 멋지게 만드는 것은 지금까지 우리가 CSS를 작성하도록 훈련받은 방식과 반대되는 것이기도 합니다. 레이어 내부의 콘텐츠의 특수성은 레이어 자체의 특수성에 버금가는 것입니다. 즉, 고차 레이어에 덜 구체적인 선택기가 있는 경우 저차 레이어의 더 구체적인 선택기보다 "이긴다"는 뜻입니다. 다음 예제가 도움이 될 수 있습니다.


<h1 class="title">Title</h1>


@layer base, pink; 

@layer base {
    .title {
          color: green;
    }
}

@layer pink {
     h1 {
           color: pink;
     }
}

이 경우, 덜 구체적인 선택기(h1)는 더 구체적인 선택기(.title 클래스)를 오버라이드한다.

하지만 잠깐, 나는 이 멋진 것에 대해 더 읽고 싶어!

걱정 마, 친구 내가 잡았어. 다음은 제가 블로그를 작성하기 위해 참조한 기사 목록과 새로운 기능에 대한 다른 멋진 설명 및 분석입니다.

mdn 웹 문서에 CSS Cascade 소개
CSS의 상속, Cascading 및 특이성 - Cascading 계층이 아닌 CSS의 기술 개요
Stephanie Eckles의 스매싱 매거진용 CSS Cascade 레이어 시작하기
미리암 수잔(Jen Simmons, Elika Etemad, Florian Rivoal 및 Tab Atkins Jr.)의 캐스케이드 레이어 설명자 - 이 출처는 기술적으로 구식이지만 캐스케이드 레이어의 근거와 사용 사례를 잘 설명합니다.
Cascade Layer by Chris Coyier – CSS Trick에 대해 말하지 않고도 CSS에 대해 말할 수 있습니까?
Jen Simmons의 Twitter에서 캐스케이드 레이어 대 비포함 캐스케이드 레이어의 멋진 비주얼

'레이어' 위에 눕는 거 들키면 안 돼!

Cascade Layer가 출시될 예정이라는 사실은 꽤 오래 전부터 알고 있었습니다. 이제 곧 출시될 기능으로서 약 1년 동안 공통적으로 논의될 예정이었습니다. 따라서 Seagate가 드디어 이 자리에 참석하여 지원을 받고 사용할 수 있게 되어 매우 기쁩니다! 조직 및 건축에 큰 도움이 될 것입니다. 개인적으로 가능한 한 빨리 모든 프로젝트에 사용할 수 있게 되어 기쁩니다! 캐스케이드 레이어의 가능성에 대해 어떻게 생각하세요? 바로 사용할 건가요, 아니면 아직 조금 혼란스럽나요? 정확하게 어떻게 구현할 것인지, 아니면 프로젝트에 가장 적합한 방법을 파악할 수 있습니까? 댓글로 알려주세요.

저작자표시

'css' 카테고리의 다른 글

대응에서 구문 강조를 통해 JSON을 예쁜 인쇄로 표시 (0)	2022.03.09
스타일링된 구성요소의 사용자 지정 구성요소에 오신 것을 환영합니다! (0)	2022.03.09
뉴 캐스케이드로부터의 질문들 (0)	2022.03.09
이 놀라운 호버 효과로 어떻게 로고를 디자인할 수 있을까요? (0)	2022.03.09
게임 대시보드 UI (0)	2022.03.09

ui-box

CSS 캐스케이드 레이어를 사용한 계층화

시작: 폭포는 무엇인가?

알았어 캐스케이드 레이어가 뭐야?

멋질 것 같은데, 실제 활용 사례는 어떤 건가요?

코드 좀 보자.

계단식 도면층 정의

도면층 스택 작성

도면층 가져오기

도면층 중첩

제가 알아야 하는게 또 있나요?

이름이 지정되지 않은 도면층을 작성할 수 있습니다(그러나 작성해서는 안 됩니다).

도면층 스타일은 도면층되지 않은 스타일을 재지정합니다.

도면층 특이성이 요소 특이성을 재지정합니다.

하지만 잠깐, 나는 이 멋진 것에 대해 더 읽고 싶어!

'레이어' 위에 눕는 거 들키면 안 돼!

'css' 카테고리의 다른 글

댓글

티스토리툴바

CSS 캐스케이드 레이어를 사용한 계층화

시작: 폭포는 무엇인가?

알았어 캐스케이드 레이어가 뭐야?

멋질 것 같은데, 실제 활용 사례는 어떤 건가요?

코드 좀 보자.

계단식 도면층 정의

도면층 스택 작성

도면층 가져오기

도면층 중첩

제가 알아야 하는게 또 있나요?

이름이 지정되지 않은 도면층을 작성할 수 있습니다(그러나 작성해서는 안 됩니다).

도면층 스타일은 도면층되지 않은 스타일을 재지정합니다.

도면층 특이성이 요소 특이성을 재지정합니다.

하지만 잠깐, 나는 이 멋진 것에 대해 더 읽고 싶어!

'레이어' 위에 눕는 거 들키면 안 돼!

'css' 카테고리의 다른 글

관련글

댓글

티스토리툴바