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
parent 9148c358d0
commit e9cbf23ab5
1356 changed files with 0 additions and 12831 deletions
@@ -0,0 +1,143 @@
+---
+id: css-image-shapes
+title: "CSS Image Shapes"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["clip-path", "shape-outside", "image clipping", "circle() clip", "polygon() clip", "ellipse() clip"]
+duplicate_of: ""
+source_trust_level: "B"
+confidence_score: 0.88
+created_at: 2026-06-23
+updated_at: 2026-06-23
+review_reason: ""
+merge_history: []
+tags: ["css", "web", "frontend", "w3schools", "clip-path", "shape-outside", "images"]
+raw_sources: ["https://www.w3schools.com/css/css3_image_shapes.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[CSS Image Shapes]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+With CSS it is easy to shape (clip) images to circles, ellipses, and polygons using the `clip-path` property, while `shape-outside` lets inline content wrap around the shaped image. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **`clip-path`** — lets you clip an element to a basic shape or to an SVG source. [S1]
+- **`shape-outside`** — lets you define a shape for the wrapping of the inline content. [S1]
+- **`circle()`** — defines a circle with a radius and a position. [S1]
+- **`ellipse()`** — defines an ellipse with two radii, x and y. [S1]
+- **`polygon()`** — defines a polygon. [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Clip to a basic shape** — apply a shape function (`circle()`, `ellipse()`, `polygon()`) as the value of `clip-path` on an image. [S1]
+- **Reposition the clip** — use the `at` keyword inside a shape function (e.g. `circle(50% at right)`) to move the clip's center. [S1]
+- **Wrap text around a shape** — combine `float` with `clip-path` (visual clip) and `shape-outside` (the wrap geometry) so inline content flows around the shaped image. [S1]
+
+## 📖 세부 내용 (Details)
+**Shaping images** — With CSS it is easy to shape (clip) images to circles, ellipses and polygons. [S1]
+
+**Circle with `clip-path`** [S1]
+```css
+img {
+  clip-path: circle(50%);
+}
+```
+
+**Circle positioned to the right** — the `at` keyword positions the circle. [S1]
+```css
+img {
+  clip-path: circle(50% at right);
+}
+```
+
+**Circle with `shape-outside`** — the `shape-outside` property lets you define a shape for the wrapping of the inline content. [S1]
+```css
+img {
+  float: left;
+  clip-path: circle(40%);
+  shape-outside: circle(45%);
+}
+```
+
+**Ellipse with `clip-path`** — the `ellipse()` function defines an ellipse with two radii x and y. [S1]
+```css
+img {
+  clip-path: ellipse(50% 35%);
+}
+```
+
+**Ellipse positioned to the right** [S1]
+```css
+img {
+  clip-path: ellipse(50% 35% at right);
+}
+```
+
+**Ellipse with `shape-outside`** [S1]
+```css
+img {
+  float: left;
+  clip-path: ellipse(40% 50%);
+  shape-outside: ellipse(45% 50%);
+}
+```
+
+**Polygon with `clip-path`** — the `polygon()` function defines a polygon. [S1]
+```css
+img {
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+}
+```
+
+**Properties and functions reference** [S1]
+
+| Property / Function | Description |
+|---|---|
+| `clip-path` | Lets you clip an element to a basic shape or to an SVG source |
+| `shape-outside` | Lets you define a shape for the wrapping of the inline content |
+| `circle()` | Defines a circle with a radius and a position |
+| `ellipse()` | Defines an ellipse with two radii x and y |
+| `polygon()` | Defines a polygon |
+
+## 🛠️ 적용 사례 (Applied in summary)
+The page's own examples are the applied cases: circular/elliptical/polygonal image clips, and text-wrapping layouts where a floated image uses `shape-outside`. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Clip an image to a centered circle (language: CSS):
+```css
+img {
+  clip-path: circle(50%);
+}
+```
+Wrap inline text around a circular image (language: CSS):
+```css
+img {
+  float: left;
+  clip-path: circle(40%);
+  shape-outside: circle(45%);
+}
+```
+
+## ⚖️ 모순 및 업데이트 (Contradictions & updates)
+No contradictions found in the source.
+
+## ✅ 검증 상태 및 신뢰도
+- **상태:** draft
+- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
+- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
+- **신뢰 점수:** 0.88
+- **중복 검사 결과:** 신규 생성 (New discovery)
+
+## 🔗 지식 그래프 (Knowledge Graph)
+- **상위/루트:** [[CSS Tutorial]]
+- **관련 개념:** [[CSS Object Fit]], [[CSS Masking PNG]], [[CSS Borders]]
+- **참조 맥락:** Referenced when cropping images to non-rectangular shapes or wrapping text around floated images.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — CSS Image Shapes — https://www.w3schools.com/css/css3_image_shapes.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Shapes" page (Astra wiki-curation, P-Reinforce v3.1 format).