2nd/10_Wiki/Topic_HTML/HTML_Responsive.md

---
id: html-responsive
title: "HTML Responsive"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["responsive web design", "RWD", "viewport meta", "responsive images", "media queries", "viewport width unit"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "responsive", "css"]
raw_sources: ["https://www.w3schools.com/html/html_responsive.asp"]
applied_in: []
github_commit: ""
---

# [[HTML Responsive]]

## 🎯 한 줄 통찰 (One-line insight)
Responsive Web Design uses HTML and CSS to automatically resize, hide, shrink, or enlarge a website so it looks good on all devices — desktops, tablets, and phones. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Responsive Web Design** — using HTML and CSS to automatically resize, hide, shrink, or enlarge a website to look good on all devices (desktops, tablets, phones). [S1]
- **Viewport meta tag** — the viewport `<meta>` element should be added to all web pages to control the page's dimensions and scaling. [S1]
- **Responsive images** — using CSS `width:100%` scales an image up and down; `max-width:100%` scales down but never above original size; `<picture>` serves different images per browser width. [S1]
- **Responsive text** — the `vw` (viewport width) unit lets text size follow the browser window size. [S1]
- **Media queries** — define completely different styles for different browser sizes via breakpoints. [S1]
- **CSS frameworks** — W3.CSS and Bootstrap provide responsive layouts by default. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Viewport setup** — `<meta name="viewport" content="width=device-width, initial-scale=1.0">`. [S1]
- **Fluid image** — `style="width:100%"` (scales both ways) vs. `style="max-width:100%;height:auto;"` (caps at original size). [S1]
- **Art-direction with `<picture>`** — `<source media="(max-width: ...)">` elements provide alternative images. [S1]
- **Viewport-relative text** — `font-size:10vw` (1vw = 1% of viewport width). [S1]
- **Breakpoint via media query** — `@media screen and (max-width: 800px) { ... }`. [S1]

## 📖 세부 내용 (Details)
**What is responsive web design?**
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge a website, to make it look good on all devices (desktops, tablets, and phones). [S1]

**Setting the viewport**
Add the following `<meta>` tag to all your web pages. This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling. [S1]
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

**Responsive images — using the `width` property**
If the CSS `width` property is set to 100%, the image will be responsive and scale up and down. Note: the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the `max-width` property instead. [S1]
```html
<img src="img_girl.jpg" style="width:100%;">
```

**Using the `max-width` property**
If the `max-width` property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size. [S1]
```html
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
```

**Show different images depending on browser width**
The `<picture>` element allows you to define different images for different browser window sizes: [S1]
```html
<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>
```

**Responsive text size**
The text size can be set with a `vw` unit, which means the "viewport width". That way the text size will follow the size of the browser window. Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm. [S1]
```html
<h1 style="font-size:10vw">Hello World</h1>
```

**Media queries**
With media queries you can define completely different styles for different browser sizes. The example below shows columns that default to 20%/60%/20% widths but stack to 100% width when the viewport is 800px or smaller: [S1]
```css
<style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>
```

**CSS frameworks — W3.CSS**
W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default. W3.CSS is smaller and faster than similar CSS frameworks, and is designed to be independent of jQuery or any other JavaScript library. [S1]
```html
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

<div class="w3-container w3-green">
  <h1>W3Schools Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>
</html>
```

**CSS frameworks — Bootstrap**
Bootstrap is another popular framework that uses HTML, CSS, and jQuery to make responsive web pages: [S1]
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum...</p>
    </div>
  </div>
</div>
```

## 🛠️ 적용 사례 (Applied in summary)
The W3.CSS and Bootstrap full-page examples above are the canonical applied demonstrations of building a complete responsive page; the image, text, and media-query snippets are applied techniques for individual responsive behaviors. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Viewport (required on every page):
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Responsive image (capped at original size):
```html
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
```
Viewport-relative text:
```html
<h1 style="font-size:10vw">Hello World</h1>
```
Breakpoint:
```css
@media screen and (max-width: 800px) {
  .left, .main, .right { width: 100%; }
}
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`width:100%`** — image scales both up and down; can exceed original size. [S1]
- **`max-width:100%`** — image scales down only, never larger than original; preferred in many cases. [S1]
- **W3.CSS** — smaller and faster than similar frameworks; independent of jQuery / any JS library. [S1]
- **Bootstrap** — popular framework using HTML, CSS, and jQuery for responsive pages. [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)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Layout]], [[HTML Head]], [[HTML Images]], [[HTML Style Guide]]
- **참조 맥락:** Referenced when making a page adapt to multiple device sizes via the viewport, fluid images, viewport-relative text, media queries, or a CSS framework.

## 📚 출처 (Sources)
- [S1] W3Schools — HTML Responsive — https://www.w3schools.com/html/html_responsive.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Responsive" page (Astra wiki-curation, P-Reinforce v3.1 format).