Files

T

Antigravity Agent e9cbf23ab5 docs(10_Wiki): Dev 폴더 누락분 반영 — Topic_Programming으로 통합

이전 재구성 작업에서 Dev/ 폴더가 누락되었던 것을 반영.

- Dev/Topic_Programming(중첩 폴더, 78개)은 Dev 자체 최상위 폴더들
  (Architecture/Conventions/Engineering_Intelligence 등)과 완전 중복이라 제거.
- Dev 최상위 엔지니어링 지식 폴더(Architecture/Conventions/Engineering_Intelligence/
  Failure_Library/Generalized_Principles/Language/Pattern_Catalog/Platform_Guides/
  Subsystems, 77개)는 이미 Topic_Programming/Topic_Programming에 더 최신 버전이
  존재해 중복 제거(고유 콘텐츠 1개는 예외 처리하여 이동 보존).
- Dev의 W3Schools 언어 튜토리얼 폴더(Topic_C/CPP/CSS/CSharp/HOWTO/HTML/Java/
  JavaScript/PHP/Python/SQL/W3CSS, 1201개)는 전부 Topic_Programming 하위로 이동.
- 에이전트 운영 상태(.astra/docs)는 그대로 유지, 콘텐츠 폴더만 정리.
- Topic_Programming 최종 문서 수: 2784 → 3985.

2026-07-05 00:39:13 +09:00

4.9 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 Outline Style

🎯 한 줄 통찰 (One-line insight)

An outline is a line drawn around an element, outside its borders, to make it "stand out" — and it is not part of the element's dimensions, so it never affects width or height. [S1]

🧠 핵심 개념 (Core concepts)

Definition — an outline is "a line that is drawn around elements, OUTSIDE the borders, to make the element 'stand out.'" [S1]
Outside the border — the outline is drawn outside the element's border and may overlap other content. [S1]
No dimension impact — "the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline." [S1]
outline-style gates everything — "None of the other outline properties will have ANY effect unless the outline-style property is set!" [S1]

🧩 추출된 패턴 (Extracted patterns)

Set style first — always declare outline-style before relying on outline-color, outline-width, or outline-offset, which have no effect without it. [S1]
Decorative vs. layout-neutral emphasis — use an outline (rather than a border) to highlight an element without changing its box dimensions. [S1]

📖 세부 내용 (Details)

What an outline is An outline is a line that is drawn around elements, outside the borders, to make the element "stand out." The outline is drawn outside the element's border and may overlap other content. Importantly, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline. [S1]

CSS outline properties The tutorial lists five outline properties: [S1]

outline-style — specifies the style of the outline
outline-color — specifies the color of the outline
outline-width — specifies the width of the outline
outline-offset — adds space between the outline and the element's edge/border
outline — a shorthand property

outline-style values The outline-style property accepts ten possible values: dotted, dashed, solid, double, groove, ridge, inset, outset, none, and hidden. [S1]

Demo example — applying each style to a paragraph class: [S1]

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Critical note "None of the other outline properties will have ANY effect unless the outline-style property is set!" [S1]

🛠️ 적용 사례 (Applied in summary)

The paragraph-class demo above is the page's own applied example, rendering each outline-style value. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Apply a named outline style (language: CSS):

p.solid {outline-style: solid;}

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

No contradictions found in the source.

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

Outline — drawn outside the border, may overlap other content, and does NOT affect the element's total width/height. [S1]
Border — by contrast, the outline differs from a border in that the outline is layout-neutral (no dimension impact). Use an outline when emphasis must not change the box's footprint. [S1]

✅ 검증 상태 및 신뢰도

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

🔗 지식 그래프 (Knowledge Graph)

상위/루트: CSS Tutorial
관련 개념: CSS Outline Width, CSS Outline Color, CSS Box Model
참조 맥락: Referenced whenever an element must be visually emphasized without altering its dimensions.

📚 출처 (Sources)

[S1] W3Schools — CSS Outline Style — https://www.w3schools.com/css/css_outline.asp

📝 변경 이력 (Change history)

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

4.9 KiB Raw Blame History