docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거

Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를
Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류.

- 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로
  자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거,
  동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거.
- 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming,
  Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business,
  Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로,
  나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는
  title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백).
  원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지.
- 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서.
- 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는
  지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지.
- Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경.
- 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
This commit is contained in:
Antigravity Agent
2026-07-05 00:33:48 +09:00
parent 1cfd3bbb56
commit 9148c358d0
6455 changed files with 1 additions and 86875 deletions
@@ -0,0 +1,23 @@
---
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*