koriweb
9609c04755
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
97 lines
4.7 KiB
Markdown
97 lines
4.7 KiB
Markdown
---
|
|
id: css-absolute-units
|
|
title: "CSS Absolute Units"
|
|
category: "Frontend"
|
|
status: "draft"
|
|
verification_status: "conceptual"
|
|
canonical_id: ""
|
|
aliases: ["CSS absolute units", "fixed length units", "pixels px", "print units", "pt pc cm mm in"]
|
|
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", "units", "absolute", "length"]
|
|
raw_sources: ["https://www.w3schools.com/css/css_units_absolute.asp"]
|
|
applied_in: []
|
|
github_commit: ""
|
|
---
|
|
|
|
# [[CSS Absolute Units]]
|
|
|
|
## 🎯 한 줄 통찰 (One-line insight)
|
|
Absolute length units are fixed sizes that render exactly as specified regardless of screen size; pixels (`px`) are the most-used absolute unit for screens, while the others (`cm`, `mm`, `in`, `pt`, `pc`) are primarily for print. [S1]
|
|
|
|
## 🧠 핵심 개념 (Core concepts)
|
|
- **Fixed lengths** — absolute units appear exactly that size regardless of the screen size. [S1]
|
|
- **Not generally recommended for websites** — they are not recommended for screen use but are suitable for print layouts. [S1]
|
|
- **Pixels dominate on screen** — `px` is the most commonly used absolute unit for screens. [S1]
|
|
- **Whitespace / zero rule** — no whitespace can appear between the number and the unit; however, if the value is `0`, the unit can be omitted. [S1]
|
|
|
|
## 🧩 추출된 패턴 (Extracted patterns)
|
|
- **Use `px` for precise screen control** — choose pixels when you need fixed, exact dimensions. [S1]
|
|
- **Use physical units for print** — `cm`, `mm`, `in`, `pt`, `pc` map to physical measurements suited to print stylesheets. [S1]
|
|
|
|
## 📖 세부 내용 (Details)
|
|
**Absolute Units**
|
|
Absolute length units are fixed and will appear as exactly that size regardless of the screen size. Absolute units are not recommended for use on screen, because screen sizes vary so much; however, they can be used if the output medium is known, such as for print layout. The most commonly used absolute unit for screens is the pixel (`px`). [S1]
|
|
|
|
| Unit | Name | Description |
|
|
| --- | --- | --- |
|
|
| `px` | Pixels | The most used absolute unit for screens (1px = 1/96th of 1in) [S1] |
|
|
| `cm` | Centimeters | Primarily used in print stylesheet [S1] |
|
|
| `mm` | Millimeters | Primarily used in print stylesheet [S1] |
|
|
| `in` | Inches | Primarily used in print stylesheet (1in = 96px = 2.54cm) [S1] |
|
|
| `pt` | Points | A typographical unit (1pt = 1/72 of 1in) [S1] |
|
|
| `pc` | Picas | A print unit (1pc = 12 pt) [S1] |
|
|
|
|
Example using pixels for font sizes: [S1]
|
|
```css
|
|
h1 { font-size: 40px; }
|
|
h2 { font-size: 30px; }
|
|
p { font-size: 17px; }
|
|
```
|
|
|
|
**Note:** A whitespace cannot appear between the number and the unit. However, if the value is `0`, the unit can be omitted. [S1]
|
|
|
|
Pixel sizing gives full control but may not scale well across devices; users cannot adjust text size in browser settings when using pixels (though zoom still works). For better responsiveness in web design, consider relative units like `em` or `rem`. [S1]
|
|
|
|
## 🛠️ 적용 사례 (Applied in summary)
|
|
The page's applied case is the pixel font-size example styling `h1` (40px), `h2` (30px), and `p` (17px). No external project/commit applications found in the source.
|
|
|
|
## 💻 코드 패턴 (Code patterns)
|
|
Pixel font sizing (language: CSS):
|
|
```css
|
|
h1 { font-size: 40px; }
|
|
h2 { font-size: 30px; }
|
|
p { font-size: 17px; }
|
|
```
|
|
|
|
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
|
|
- **`px` (screen)** — most-used absolute unit for screens; precise but does not scale across devices. [S1]
|
|
- **`cm`/`mm`/`in`/`pt`/`pc` (print)** — physical/typographic units primarily for print stylesheets. [S1]
|
|
- **Relative units (`em`, `rem`)** — recommended over absolute units for responsive web design. [S1]
|
|
|
|
## ⚖️ 모순 및 업데이트 (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 Units]], [[CSS Relative Units]], [[CSS Font Size]]
|
|
- **참조 맥락:** Referenced when fixed, exact sizing is needed (e.g., pixels on screen or physical units for print).
|
|
|
|
## 📚 출처 (Sources)
|
|
- [S1] W3Schools — CSS Absolute Units — https://www.w3schools.com/css/css_units_absolute.asp
|
|
|
|
## 📝 변경 이력 (Change history)
|
|
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Absolute Units" page (Astra wiki-curation, P-Reinforce v3.1 format).
|