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.
This commit is contained in:
Antigravity Agent
2026-07-05 00:39:13 +09:00
parent 9148c358d0
commit e9cbf23ab5
1356 changed files with 0 additions and 12831 deletions
@@ -0,0 +1,101 @@
---
id: css-height-and-width
title: "CSS Height and Width"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["height", "width", "CSS height", "CSS width", "element dimensions"]
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", "height", "width", "box-model"]
raw_sources: ["https://www.w3schools.com/css/css_height_width.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Height and Width]]
## 🎯 한 줄 통찰 (One-line insight)
The `height` and `width` properties set the size of the area inside the padding, border, and margin of an element — they do not include padding, borders, or margins. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Purpose** — the `height` and `width` properties set the height and width of the area inside the padding, border, and margin of the element. [S1]
- **Content-only** — these properties size the content area; they do not include padding, borders, or margins in their calculations. [S1]
- **Accepted values** — `auto` (browser calculates dimensions; default), a length (px, cm, em, etc.), `%` (percentage of the containing block), `initial` (default value), or `inherit` (inherited from parent). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Fixed vs. fluid** — combine a length on one axis with a `%` on the other (e.g., fixed `height` + percentage `width`) for partially responsive boxes. [S1]
- **Content-box mental model** — when reasoning about an element's footprint, add padding and border to the declared `height`/`width`, since those are excluded. [S1]
## 📖 세부 내용 (Details)
**What height and width do**
The CSS `height` and `width` properties set the height and width of the area inside the padding, border, and margin of the element. This means they do not include padding, borders, or margins in their calculations. [S1]
**Accepted values**
The `height` and `width` properties accept: [S1]
- `auto` — the browser calculates the dimensions (this is the default)
- a length — specific values in px, cm, em, etc.
- `%` — a percentage of the containing block
- `initial` — sets the property to its default value
- `inherit` — the property is inherited from the parent
**Example 1** — fixed height with percentage width: [S1]
```css
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
```
**Example 2** — fixed height and fixed width: [S1]
```css
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
```
**Note**
The tutorial emphasizes: "Remember that the height and width properties do not include padding, borders, or margins!" [S1]
## 🛠️ 적용 사례 (Applied in summary)
The two `div` examples are the page's own applied cases, demonstrating fixed and percentage-based sizing. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Size a box's content area (language: CSS):
```css
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
```
## ⚖️ 모순 및 업데이트 (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 Max-width and Min-width]], [[CSS Box Model]], [[CSS Padding and Box Sizing]]
- **참조 맥락:** Referenced whenever an element's content-area dimensions must be set explicitly.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Height and Width — https://www.w3schools.com/css/css_height_width.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Height and Width" page (Astra wiki-curation, P-Reinforce v3.1 format).