--- 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 `` 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; `` 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** β€” ``. [S1] - **Fluid image** β€” `style="width:100%"` (scales both ways) vs. `style="max-width:100%;height:auto;"` (caps at original size). [S1] - **Art-direction with ``** β€” `` 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 `` 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 ``` **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 ``` **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 ``` **Show different images depending on browser width** The `` element allows you to define different images for different browser window sizes: [S1] ```html Flowers ``` **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

Hello World

``` **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 ``` **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 W3.CSS

W3Schools Demo

Resize this responsive page!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

``` **CSS frameworks β€” Bootstrap** Bootstrap is another popular framework that uses HTML, CSS, and jQuery to make responsive web pages: [S1] ```html Bootstrap 5 Example

My First Bootstrap Page

Resize this responsive page to see the effect!

Column 1

Lorem ipsum...

Column 2

Lorem ipsum...

Column 3

Lorem ipsum...

``` ## πŸ› οΈ 적용 사둀 (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 ``` Responsive image (capped at original size): ```html ``` Viewport-relative text: ```html

Hello World

``` 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).