2nd/10_Wiki/Topic_CSS/CSS_Units_Relative.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-relative-units	CSS Relative Units	Frontend	draft	conceptual		CSS relative units em rem viewport units vw vh scalable units		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools units relative responsive	https://www.w3schools.com/css/css_units_relative.asp

CSS Relative Units

🎯 한 줄 통찰 (One-line insight)

Relative units specify a length relative to another length property — a parent element, the root element, or the viewport — so they scale better across different screen sizes, making em and rem ideal for scalable, responsive websites. [S1]

🧠 핵심 개념 (Core concepts)

• Relative to another length — relative units specify a length relative to another length property (parent element, root element, or viewport). [S1]
• Better scaling — relative length units scale better between different screen sizes. [S1]
• em — relative to the font-size of the parent element. [S1]
• rem — relative to the font-size of the root HTML element. [S1]
• Viewport units — vw/vh are relative to 1% of viewport width/height (100vw = full width, 100vh = full height); vmin/vmax to 1% of the viewport's smaller/larger dimension. [S1]
• %, fr, ch — % is relative to the parent's size; fr is a fractional unit (1fr = 1 part of available space); ch is relative to the width of the "0" (zero) character. [S1]

🧩 추출된 패턴 (Extracted patterns)

• em chains to the parent — child sizes multiply against the parent's font-size, so nested em values compound. [S1]
• rem anchors to the root — rem always references the root element, giving consistent sizing independent of nesting. [S1]

📖 세부 내용 (Details)

Relative Units Relative units specify a length relative to another length property (like parent element, root element, or viewport). Relative length units scale better between different screen sizes. [S1]

Unit	Description
em	Relative to the font-size of the parent element [S1]
rem	Relative to the font-size of the root HTML element [S1]
vw	Relative to 1% of the width of the viewport; 100vw = full width [S1]
vh	Relative to 1% of the height of the viewport; 100vh = full height [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]
fr	A fractional unit; 1fr equals 1 part of the available space [S1]
ch	Relative to the width of the "0" (zero) character [S1]

Em Font Sizing Set font sizes with em (relative to the parent's font-size; with a 16px base, 2.5em = 40px): [S1]

body {
  font-size: 16px; /* Base font size */
}

h1 {
  font-size: 2.5em; /* 2.5 * 16 = 40px */
}

h2 {
  font-size: 1.875em; /* 1.875 * 16 = 30px */
}

p {
  font-size: 1em; /* 1 * 16 = 16px */
}

Rem Font Sizing Set font sizes with rem (relative to the root element rather than the parent, giving more consistent results): [S1]

html {
  font-size: 16px; /* Set the root font size */
}

h1 {
  font-size: 2.5rem; /* 2.5 * 16 = 40px */
}

h2 {
  font-size: 1.875rem; /* 1.875 * 16 = 30px */
}

p {
  font-size: 1rem; /* 1 * 16 = 16px */
}

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

🛠️ 적용 사례 (Applied in summary)

The page's applied cases are the em and rem font-sizing examples, each computing h1/h2/p sizes from a 16px base. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

em sizing relative to parent (language: CSS):

body { font-size: 16px; }
h1   { font-size: 2.5em; }   /* 40px */

rem sizing relative to root (language: CSS):

html { font-size: 16px; }
h1   { font-size: 2.5rem; }  /* 40px */

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

• em — relative to the parent element's font-size, so nested values compound; use when sizing should respond to the local context. [S1]
• rem — relative to the root element's font-size, giving consistent results regardless of nesting; use for predictable global scaling. [S1]
• Viewport units (vw/vh/vmin/vmax) — size relative to the viewport for full-screen-aware layouts. [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 Absolute Units, CSS Font Size
• 참조 맥락: Referenced when building scalable, responsive sizing that adapts to parent, root, or viewport.

📚 출처 (Sources)

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

📝 변경 이력 (Change history)

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