Files

T

Antigravity Agent c24165b8bc refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조

에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게
[공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류.
문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인).

- Topic_Programming → Domain_Programming (내부 구조 보존)
- Topic_Graphic → Domain_Design
- Topic_Business → Domain_Product
- Topic_General → Domain_General
- _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning),
  Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing)
- 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서)
- 빈 폴더 정리 (memory/procedures)
- 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

2026-07-11 11:05:56 +09:00

5.2 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

CSS Specificity

🎯 한 줄 통찰 (One-line insight)

Specificity is the algorithm that decides which CSS declaration wins when multiple rules target the same element — the declaration with the highest specificity is the one that gets applied. [S1]

🧠 핵심 개념 (Core concepts)

Specificity = the deciding algorithm — when more than one rule applies to an element, the browser uses specificity to determine which style declaration is ultimately applied. [S1]
Highest specificity wins — among competing declarations, the one with the highest specificity "wins", and that style is applied to the HTML element. [S1]
Selector types differ in weight — element selectors, class selectors, ID selectors, and inline styles carry increasing specificity in that order. [S1]

🧩 추출된 패턴 (Extracted patterns)

Escalation pattern — adding a more specific selector (element → class → id → inline) overrides a less specific one targeting the same element. [S1]
Color-override demonstration — the canonical teaching pattern stacks p, .test, #demo, and an inline style on one paragraph to show each level overriding the previous. [S1]

📖 세부 내용 (Details)

What specificity is. CSS specificity is an algorithm that determines which style declaration is ultimately applied to an element. When multiple CSS rules target the same element, the declaration with the highest specificity will "win", and that style will be applied to the HTML element. [S1]

Example — element selector (red). A red color is specified for <p> elements. Result: the text will be red. [S1]

<html>
<head>
  <style>
    p {color: red;}
  </style>
</head>
<body>

<p>Hello World!</p>

</body>
</html>

Example — class selector (green). A class selector named "test" is added with a green color. Result: the text will be green, because the class selector has higher specificity than the element selector. [S1]

<html>
<head>
  <style>
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>

<p class="test">Hello World!</p>

</body>
</html>

Example — id selector (blue). An id selector named "demo" is added. Result: the text will be blue, because the id selector has higher specificity than the class selector. [S1]

<html>
<head>
  <style>
    #demo {color: blue;}
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>

<p id="demo" class="test">Hello World!</p>

</body>
</html>

Example — inline style (pink). An inline style is added for the <p> element. Result: the text will be pink, because the inline style has the highest specificity. [S1]

<html>
<head>
  <style>
    #demo {color: blue;}
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>

<p id="demo" class="test" style="color: pink;">Hello World!</p>

</body>
</html>

🛠️ 적용 사례 (Applied in summary)

The four stacked examples on the page are the applied demonstrations: the same paragraph is styled successively redder/greener/bluer/pinker as each higher-specificity selector is added, proving the "highest specificity wins" rule. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Specificity escalation on a single element (language: HTML/CSS):

<style>
  p {color: red;}        /* element  — lowest */
  .test {color: green;}  /* class    — higher */
  #demo {color: blue;}   /* id       — higher still */
</style>
<p id="demo" class="test" style="color: pink;">Hello World!</p>
<!-- inline style wins: text is pink -->

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

상태: draft
검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
신뢰 점수: 0.9
중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

상위/루트: CSS Tutorial
관련 개념: CSS Specificity Hierarchy, CSS !important, CSS Selectors
참조 맥락: Consulted whenever two or more CSS rules conflict on the same element and you need to know which one applies.

📚 출처 (Sources)

[S1] W3Schools — CSS Specificity — https://www.w3schools.com/css/css_specificity.asp

📝 변경 이력 (Change history)

2026-06-23: Initial draft synthesized from the W3Schools "CSS Specificity" page (Astra wiki-curation, P-Reinforce v3.1 format).

5.2 KiB Raw Blame History