2nd/10_Wiki/Topics/Domain_Programming/Topic_CSS/CSS_Units.md

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

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
css-units	CSS Units	Frontend	draft	conceptual		CSS units CSS length length values absolute units relative units		B	0.89	2026-06-23	2026-06-23			css web frontend w3schools units length measurement	https://www.w3schools.com/css/css_units.asp

CSS Units

🎯 한 줄 통찰 (One-line insight)

CSS units express the length of properties such as font-size, width, margin, padding, and border, and they split into two families: absolute units (fixed) and relative units (scale with parent, root, or viewport). [S1]

🧠 핵심 개념 (Core concepts)

• Length values — several CSS properties take "length" values, such as font-size, width, margin, padding, and border. [S1]
• No whitespace rule — there must be no space between the number and the unit (e.g., 10px, not 10 px); however, if the value is 0, the unit can be omitted. [S1]
• Two categories — Absolute units are fixed lengths; Relative units scale based on a parent element, the root element, or the viewport. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Absolute for print, relative for screen — absolute units suit fixed/print contexts; relative units (em, rem) scale better across screen sizes. [S1]
• Omit unit only for zero — 0 is the single value where the unit may be dropped. [S1]

📖 세부 내용 (Details)

Introduction Several CSS properties take "length" values, such as font-size, width, margin, padding, and border. There must be no whitespace between the number and the unit; however, if the value is 0, the unit can be omitted. [S1]

CSS has two types of length units: Absolute and Relative. [S1]

Absolute Lengths Absolute length units are fixed lengths. [S1]

Unit	Description
cm	centimeters [S1]
mm	millimeters [S1]
in	inches (1in = 96px = 2.54cm) [S1]
px	pixels (1px = 1/96th of 1in) — the most-used absolute unit for screens [S1]
pt	points (1pt = 1/72 of 1in) — a typographical unit [S1]
pc	picas (1pc = 12 pt) — a print unit [S1]

A typical absolute-unit usage sets font sizes in pixels: [S1]

h1 { font-size: 40px; }
h2 { font-size: 30px; }
p  { font-size: 17px; }

Relative Lengths Relative length units specify a length relative to another length property, and scale better between different screen sizes. [S1]

Unit	Description
em	Relative to the font-size of the element [S1]
ex	Relative to the x-height of the current font (height of lowercase "x") [S1]
ch	Relative to the width of the "0" (zero) character [S1]
rem	Relative to the font-size of the root element [S1]
vw	Relative to 1% of the width of the viewport [S1]
vh	Relative to 1% of the height of the viewport [S1]
vmin	Relative to 1% of the viewport's smaller dimension [S1]
vmax	Relative to 1% of the viewport's larger dimension [S1]
%	Relative to the size of the parent element [S1]

Tip: The em and rem units are perfect for creating scalable and responsive websites. [S1]

🛠️ 적용 사례 (Applied in summary)

The page's applied case is the pixel font-size example styling h1, h2, and p. Detailed per-family examples live on the dedicated CSS Absolute Units and CSS Relative Units pages. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Pixel (absolute) font sizing (language: CSS):

h1 { font-size: 40px; }
p  { font-size: 17px; }

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

• Absolute units (cm, mm, in, px, pt, pc) — fixed lengths; pixels are the most-used for screens, the rest are mainly for print. [S1]
• Relative units (em, ex, ch, rem, vw, vh, vmin, vmax, %) — scale relative to another length, so they adapt across screen sizes; em and rem are recommended for scalable, responsive sites. [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.89
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Absolute Units, CSS Relative Units, CSS Font Size
• 참조 맥락: Referenced whenever specifying any length value (size, spacing, borders) in CSS.

📚 출처 (Sources)

• [S1] W3Schools — CSS Units — https://www.w3schools.com/css/css_units.asp

📝 변경 이력 (Change history)

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