software

CSS @property: 고급 테마

발행: (2026년 1월 8일 오후 08:05 GMT+9)
4 min read
원문: Dev.to

I’m happy to help translate the article, but I’ll need the full text you’d like translated. Could you please paste the content (excluding the source line you already provided) here? Once I have the text, I’ll translate it into Korean while preserving the original formatting and code blocks.

@property 로 로컬 변수 정의하기

@property --box-radius {
    syntax: "*";
    inherits: false;
    initial-value: 16px;
}
@property --box-background {
    syntax: "*";
    inherits: false;
    initial-value: #a2a3a3;
}

.box {
    background: var(--box-background);
    border-radius: var(--box-radius);
}

그런 다음 로컬 속성을 재정의하여 변형을 적용할 수 있습니다:

.box-dark  { --box-background: #626262; }
.box-light { --box-background: #d4d6d7; }

.box-rad-s { --box-radius: 8px; }
.box-rad-l { --box-radius: 32px; }

속성이 상속되지 않기 때문에, 박스를 중첩해도 부모가 자식에 영향을 주지 않습니다:

<div class="box">
    Parent box with customized property values
    <div class="box">
        Child box with initial property values
    </div>
</div>

로컬 변수를 전역 값에 연결하기

값을 하드코딩하지 않으려면 :root에 전역 변수를 정의하고 폴백으로 참조합니다:

:root {
    --global-background: light-dark(#dedede, #676767);
    --global-radius: 16px;
}

/* Local properties (no initial values needed) */
@property --box-radius {
    syntax: "*";
    inherits: false;
}
@property --box-background {
    syntax: "*";
    inherits: false;
}

/* Component styles */
.box {
    background: var(--box-background, var(--global-background));
    border-radius: var(--box-radius, var(--global-radius));
}

/* Theme variations */
.box-dark  { --box-background: oklch(from var(--global-background) calc(l - 0.2) c h / alpha); }
.box-light { --box-background: oklch(from var(--global-background) calc(l + 0.2) c h / alpha); }

.box-rad-s { --box-radius: calc(var(--global-radius) / 2); }
.box-rad-l { --box-radius: calc(var(--global-radius) * 2); }

이제 전체 테마를 소수의 전역 변수로 제어할 수 있으며, 개별 컴포넌트는 여전히 자체 로컬 오버라이드를 유지합니다.

계산된 변수 소개

많은 컴포넌트가 유사한 변환을 필요로 할 때, 계산된 변수라는 중간 레이어를 도입하면 유용합니다. 이는 전역 API와 로컬 구현 사이의 다리 역할을 하여 설계를 예측 가능하게 합니다.

:root {
    /* Global vars */
    --global-background: light-dark(#dedede, #676767);
    --global-radius: 16px;

    /* Computed vars */
    --radius-s: calc(0.5 * var(--global-radius));
    --radius-m: var(--global-radius);
    --radius-l: calc(2 * var(--global-radius));

    --background-normal: var(--global-background);
    --background-dark:   oklch(from var(--global-background) calc(l - 0.2) c h / alpha);
    --background-light:  oklch(from var(--global-background) calc(l + 0.2) c h / alpha);
}

/* Local properties */
@property --box-radius {
    syntax: "*";
    inherits: false;
}
@property --box-background {
    syntax: "*";
    inherits: false;
}

/* Component styles */
.box {
    --box-background: var(--background-normal);
    --box-radius: var(--radius-m);
    background: var(--box-background);
    border-radius: var(--box-radius);
}

/* Theme variations */
.box-dark  { --box-background: var(--background-dark); }
.box-light { --box-background: var(--background-light); }

.box-rad-s { --box-radius: var(--radius-s); }
.box-rad-l { --box-radius: var(--radius-l); }

이 구조에서는 테마가 몇 개의 고수준 변수(--global-background, --global-radius)만 노출합니다. 계산된 레이어는 허용 가능한 변형을 정의하고, 로컬 레이어는 전역 변수를 직접 접근하지 않고 그 값을 사용합니다. 이러한 분리는 일관성을 보장하고 테마 확장을 용이하게 합니다.

결론

세 개의 CSS 변수 레이어—global, computed, local—를 사용하면 Open‑Closed Principle에 부합하는 깔끔하고 예측 가능한 테마 시스템을 제공한다. 향후 개선으로는 @function at‑rule을 통해 computed 레이어를 노출시켜 내부 값이 실수로 변경되는 것을 더욱 보호할 수 있다.

프론트엔드 개발을 즐기세요!

Back to Blog

관련 글

더 보기 »