로컬 CSS scope 생성기

명확한 범위 안에 컴포넌트 CSS 유지하기

범위 root와 선택적 limit selector를 정하고 격리된 컴포넌트 스타일용 @scope 블록을 복사하세요.

범위 root selector범위 limit selector (선택)

비워 두면 모든 하위 요소까지 범위가 적용됩니다.

CSS 준비 완료

생성된 범위 CSS

scope root.cardto .card__footer

@scope (.card) to (.card__footer) {
  /* Scoped component styles */
}

모든 처리는 브라우저에서 진행됩니다. 아무것도 업로드하거나 저장하지 않습니다.

A scope root limits which descendants a selector can match, keeping component rules close to their intended markup.

An optional limit creates a boundary inside the root, useful when a nested region should keep its own styles.

Scoping proximity helps a closer scope win when scoped rules compete, without rewriting every selector with extra specificity.

What should the root be?

Use the component's class or attribute, such as .card or [data-component='card'].

What does the limit do?

It stops the scope from reaching past a matching descendant, such as .card__footer.

Does @scope change specificity?

The at-rule adds scoping behavior; the selectors inside retain their normal specificity.