CSS Academy · 강의

컴포넌트에 변수 범위 지정

CSS 변수의 범위를 컴포넌트 요소로 제한해 격리되고 재사용 가능한 스타일 시스템을 만듭니다.

컴포넌트에 변수 범위 지정은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

사용자 지정 속성의 범위를 지정하는 이유

전역 사용자 지정 속성은 페이지 전체에 영향을 줍니다. 사용자 지정 속성의 범위를 지정하면 스타일이 구성 요소 안에 격리되고 구성 요소 간에 의도하지 않은 상속이 발생하는 것을 막을 수 있습니다.

구성 요소 수준의 범위

구성 요소의 루트 선택자에 사용자 지정 속성을 정의하십시오. 자식 요소는 이를 상속하지만 구성 요소 바깥의 요소에는 상속되지 않습니다.

<div class="card">Scoped card variables</div>

범위가 지정된 변수 재정의

구성 요소는 수정자 클래스에서 자체 사용자 지정 속성을 재정의하여 테마 변형을 정의할 수 있습니다.

<div class="card">Default</div>
<div class="card card--dark">Dark</div>
<div class="card card--blue">Blue</div>

전역 대체값과 로컬 재정의

디자인 패턴: :root에는 전역 값을 두고 구성 요소에는 로컬 재정의를 지정합니다. 구성 요소는 전역 토큰을 사용하면서도 이를 로컬에서 사용자 지정할 수 있습니다.

<button>Royalblue (global)</button>
<div class="sidebar">
  <button>Coral (sidebar override)</button>
</div>

CSS 사용자 지정 속성 계층

잘 구성된 디자인 시스템에는 사용자 지정 속성이 여러 계층으로 구성됩니다.

전역 토큰: 원시 값(색상, 크기)
의미 토큰: 의미를 기반으로 한 값(--color-action)
구성 요소 토큰: 구성 요소별 값(--button-bg)

인라인 스타일 인터페이스

JavaScript 또는 HTML 속성의 인라인 스타일을 통해 구성 요소 변수를 공개 인터페이스로 제공하십시오. 그러면 사용자는 CSS를 수정하지 않고도 구성 요소를 사용자 지정할 수 있습니다.

<div class="card" style="--card-bg: pink;">
  Content
</div>

@scope를 사용한 범위 지정(최신 방식)

새로운 @scope 규칙은 클래스 이름에 의존하지 않고 명시적으로 CSS 범위를 지정할 수 있게 해 줍니다.

<div class="card">
  <p class="title">Scoped Title</p>
  <p>Card body</p>
</div>

data-theme을 사용한 격리

data-theme 속성을 사용하여 하위 트리 전체에 다른 테마의 범위를 지정하십시오.

<div class="panel">Light theme (default)</div>
<div data-theme="dark" class="panel">Dark theme</div>

스타일 누출 방지

사용자 지정 속성의 범위는 해당 요소와 그 자손 요소입니다. 그러나 자손 요소에 정의된 속성은 그 자손 요소와 그 자식 요소만 사용할 수 있으며, 부모 요소나 형제 요소로 누출되지 않습니다.

반응형 범위 지정 변수

범위가 지정된 사용자 지정 속성은 컨테이너 쿼리와 함께 사용할 때 특히 유용합니다.

<div class="card">
  <div class="card__inner">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>

구성 요소 토큰 문서화

개발자가 어떤 변수를 재정의할 수 있는지 알 수 있도록 구성 요소의 사용자 지정 속성 인터페이스를 문서화하십시오. 구성 요소 스타일시트 맨 위에 주석으로 변수 목록을 작성하는 것이 좋은 방법입니다.

빠른 확인

--color-accent 사용자 지정 속성이 .card 요소에 정의되어 있습니다. 형제 .nav 요소가 이 변수를 상속할 수 있습니까?

복습

구성 요소 선택자에 사용자 지정 속성의 범위를 지정하여 전역 범위와 격리하십시오. 수정자 클래스를 사용하여 변형에 맞게 범위가 지정된 변수를 재정의하십시오. 디자인 시스템은 전역 토큰 → 의미 토큰 → 구성 요소 토큰의 계층으로 구성됩니다. 외부에서 사용자 지정할 수 있도록 변수를 구성 요소 인터페이스로 제공하십시오.

자주 묻는 질문

“컴포넌트에 변수 범위 지정” 강의는 무료인가요?

네 — “컴포넌트에 변수 범위 지정” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“컴포넌트에 변수 범위 지정”에서 뭘 배우나요?

CSS 변수의 범위를 컴포넌트 요소로 제한해 격리되고 재사용 가능한 스타일 시스템을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“컴포넌트에 변수 범위 지정” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← CSS Academy(으)로 돌아가기