Antigravity Agent
23 lines
2.8 KiB
Markdown
23 lines
2.8 KiB
Markdown
---
|
|
category: Frontend
|
|
tags: [auto-wikified, technical-documentation, frontend]
|
|
title: Scoped Styles
|
|
description: "Scoped Styles(범위가 지정된 스타일)는 컴포넌트 경계 내에서 스타일을 엄격하게 캡슐화하여 'CSS 누수(CSS leakage)'와 의도치 않은 스타일 덮어쓰기를 방지하는 아키텍처 기술이다 [1]."
|
|
last_updated: 2026-05-04
|
|
---
|
|
|
|
# Scoped Styles
|
|
|
|
## 📌 Brief Summary
|
|
Scoped Styles(범위가 지정된 스타일)는 컴포넌트 경계 내에서 스타일을 엄격하게 캡슐화하여 'CSS 누수(CSS leakage)'와 의도치 않은 스타일 덮어쓰기를 방지하는 아키텍처 기술이다 [1]. `scoped` 속성을 사용하면 전역 스타일 오염을 막고 컴포넌트 고유의 시각적 정체성을 환경에 관계없이 온전히 유지할 수 있다 [1]. 이를 통해 개발자는 다른 모듈과의 충돌 걱정 없이 단순하고 의미 있는 클래스 이름을 자유롭게 사용할 수 있다 [1].
|
|
|
|
## 📖 Core Content
|
|
* **스타일 캡슐화와 전역 오염 방지**: 마이크로 프론트엔드 아키텍처가 표준으로 자리 잡은 현대 웹 개발에서는 한 모듈의 스타일 변경이 다른 모듈의 레이아웃을 무너뜨리는 '전역 오염(global pollution)'의 위험이 매우 높다 [1]. `scoped` 속성은 이러한 환경에서 스타일을 컴포넌트 경계 내로 격리하여 안전하게 보호하는 일차적인 방어 수단이다 [1].
|
|
* **고유 데이터 속성을 통한 작동 원리**: `scoped` 속성을 적용하면 컴파일러(예: Vue의 경우 PostCSS 활용)가 컴포넌트 내의 모든 HTML 요소에 `data-v-f3f3eg9`와 같은 고유하고 결정론적인 데이터 속성을 추가한다 [1]. 이에 따라 CSS 선택자(selector)들도 해당 속성을 포함하도록 자동 재작성되어 극도로 구체적인(hyper-specific) 특성을 띠게 된다 [1].
|
|
* **클래스 명명의 단순화**: 스타일이 컴포넌트 단위로 격리되므로, 개발자는 다른 애플리케이션 영역에 있는 유사한 이름의 클래스와 충돌할 걱정 없이 `.card`나 `.title`과 같이 간단하고 의미론적인(semantic) 클래스 이름을 사용할 수 있다 [1].
|
|
|
|
## ⚖️ Trade-offs & Caveats
|
|
* **복잡한 UI 구성을 위한 추가 선택자(Selector) 학습 요구**: 스타일이 엄격하게 캡슐화되어 있기 때문에, 서드파티 자식 컴포넌트나 동적으로 전달된 콘텐츠를 스타일링할 때 제약이 발생할 수 있다 [2]. 전역 CSS 오버라이드에 의존하지 않고 유연성을 유지하려면, 서드파티 하위 컴포넌트를 위한 `:deep()` 선택자나 슬롯(slots)을 통해 전달된 콘텐츠를 위한 `:slotted()`와 같은 최신 선택자 사용법을 반드시 마스터해야 하는 기술적 부담이 따른다 [2].
|
|
|
|
---
|
|
*Last updated: 2026-05-03* |