2nd/10_Wiki/Topic_Programming/Topic_CSS/CSS_Media_Queries.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-media-queries	CSS Media Queries	Frontend	draft	conceptual		@media rule media query responsive breakpoints min-width max-width CSS media types features		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools media-queries responsive at-rules	https://www.w3schools.com/css/css3_mediaqueries.asp

CSS Media Queries

🎯 한 줄 통찰 (One-line insight)

CSS media queries apply styles conditionally based on a device's or environment's characteristics (such as viewport width), via the @media rule, making them essential for responsive web pages. [S1]

🧠 핵심 개념 (Core concepts)

• What they do — media queries allow you to apply styles based on the characteristics of the device or environment displaying the web page. [S1]
• Why they matter — they are essential for creating responsive web pages. [S1]
• Mechanism — the @media rule is used to implement media queries. [S1]
• Media type is optional — the media-type is optional unless you use not. [S1]
• Combining conditions — a query is true when the type matches and all listed features are true; and combines the type with features; not inverts the query. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Conditional style block — wrap rules in @media … { … } so they apply only when the conditions match. [S1]
• Mobile-then-up pattern — use min-width to add styles as the viewport gets wider. [S1]
• Range pattern — combine min-width and max-width with and to target a width range. [S1]

📖 세부 내용 (Details)

CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page, and are essential for creating responsive web pages. The @media rule is used to implement them. [S1]

Media query syntax [S1]

@media [not] media-type and (media-feature: value) and (media-feature: value) {
  /* CSS rules to apply */
}

Key points: the media-type is optional unless using not; the query is true when the type matches and all features are true; not inverts the query; and combines the type with features. [S1]

CSS media types [S1]

Value	Description
all	All media type devices
print	Print preview mode
screen	Computer screens, tablets, smart-phones

CSS media features [S1]

Value	Description
max-height	Maximum viewport height
min-height	Minimum viewport height
height	Viewport height (including scrollbar)
max-width	Maximum viewport width
min-width	Minimum viewport width
width	Viewport width (including scrollbar)
orientation	Landscape or portrait
resolution	Screen resolution
prefers-color-scheme	User's preferred color scheme (light/dark)

Example 1 — change background if viewport is 480px or wider [S1]

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Example 2 — change background if viewport is between 480px and 768px [S1]

@media screen and (min-width: 480px) and (max-width: 768px) {
  body {
    background-color: lightgreen;
  }
}

🛠️ 적용 사례 (Applied in summary)

The page's applied examples set the body background to lightgreen once the viewport reaches 480px (Example 1) and restrict that styling to the 480px–768px range using and with both min-width and max-width (Example 2). No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Width-up rule (language: CSS):

@media screen and (min-width: 480px) {
  body { background-color: lightgreen; }
}

Width-range rule (language: CSS):

@media screen and (min-width: 480px) and (max-width: 768px) {
  body { background-color: lightgreen; }
}

⚖️ 모순 및 업데이트 (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 Media Queries Examples, CSS Variables in Media Queries, CSS Flexbox, CSS Box Sizing
• 참조 맥락: Referenced whenever styles must adapt to viewport size, orientation, print, or user color-scheme preference.

📚 출처 (Sources)

• [S1] W3Schools — CSS Media Queries — https://www.w3schools.com/css/css3_mediaqueries.asp

📝 변경 이력 (Change history)

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