--- id: w3css-rows title: "W3CSS Rows" category: "Programming_Language" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["w3-row", "w3-half", "w3-rest", "W3.CSS ν–‰ μ‹œμŠ€ν…œ"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.88 created_at: 2026-07-04 updated_at: 2026-07-04 review_reason: "" merge_history: [] tags: ["w3css", "css-framework", "w3schools", "rows", "responsive-grid"] raw_sources: ["https://www.w3schools.com/w3css/w3css_rows.asp"] applied_in: [] github_commit: "" --- # [[W3CSS Rows]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) Every named-fraction column class (`w3-half`, `w3-third`, `w3-quarter`, etc.) automatically collapses to 100% width below 601px β€” this single mobile-first rule is what makes a `w3-row` layout "responsive" without any media queries in the developer's own code, since the breakpoint logic is baked into the framework itself. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **`w3-row`** β€” no-padding row container. **`w3-row-padding`** β€” same, but with 8px left/right padding per column. [S1] - **Named fraction classes** β€” `w3-half` (50%), `w3-third` (33.33%), `w3-twothird` (66.66%), `w3-quarter` (25%), `w3-threequarter` (75%) β€” ALL collapse to 100% on screens under 601px. [S1] - **`w3-rest`** β€” occupies whatever width remains after other fixed/percent-width columns; MUST be the last element in the row's source order. [S1] - **`w3-col`** β€” defines one column in a 12-column grid, with a manually specified width (px, %, or plain, unstyled). [S1] - **Nested rows** β€” a `w3-row` can be placed entirely inside one column of an outer `w3-row`, for sub-layouts. [S1] - **`w3-stretch`** β€” removes left/right margins, useful for stretching a `w3-row-padding` row to the container's full edge-to-edge width. [S1] - **DP (density-independent pixels)** β€” W3.CSS's responsiveness thresholds (601px small/medium boundary, 993px medium/large) are based on DP, not raw physical resolution β€” e.g. an iPhone 6 at 750Γ—1334px resolution is treated as 375Γ—667 DP, i.e. a small screen. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) - Two-thirds/one-third split: `

w3-twothird

w3-third

`. [S1] - Fixed-width + rest: `

I am 150px

I am the rest

` β€” `w3-rest` must come last. [S1] - Nested row inside a half-column: a `w3-half` div containing its own inner `w3-row` with two more `w3-half` divs. [S1] ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) - **w3-rest의 μœ„μΉ˜ μ œμ•½**: w3-rest 클래슀λ₯Ό 가진 μš”μ†ŒλŠ” λ°˜λ“œμ‹œ μ†ŒμŠ€μ½”λ“œμƒ λ§ˆμ§€λ§‰μ— μœ„μΉ˜ν•΄μ•Ό ν•œλ‹€λŠ” 점이 λͺ…μ‹œμ μœΌλ‘œ μš”κ΅¬λ¨. [S1] - **DP 기반 λ°˜μ‘ν˜• μž„κ³„κ°’**: μ‹€μ œ ν”½μ…€ 해상도가 μ•„λ‹ˆλΌ DP(밀도 독립 ν”½μ…€) κΈ°μ€€μœΌλ‘œ ν™”λ©΄ 크기λ₯Ό νŒλ‹¨ν•œλ‹€λŠ” 점이 아이폰 6 μ˜ˆμ‹œλ‘œ 증λͺ…됨(750Γ—1334 해상도가 375Γ—667 DP의 μž‘μ€ ν™”λ©΄μœΌλ‘œ μ·¨κΈ‰). [S1] ## πŸ› οΈ 적용 사둀 (Applied in summary) ν˜„μž¬ 발견된 μ‹€μ œ 적용 사둀가 μ—†μŠ΅λ‹ˆλ‹€ β€” 고정폭 μ‚¬μ΄λ“œλ°”(150px)+λ‚˜λ¨Έμ§€ μ˜μ—­(w3-rest)으둜 κ΅¬μ„±λœ λ ˆμ΄μ•„μ›ƒμ΄ μ‹€μ „ ν™œμš©μ˜ λŒ€ν‘œ 사둀닀. [S1] ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Fixed-width column plus a "rest" column that must come last (HTML): ```html

I am 150px

I am the rest

``` ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.88 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[W3.CSS Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[W3CSS Flex Items]], [[W3CSS Cells]], [[W3CSS Responsive]] - **μ°Έμ‘° λ§₯락:** λ°˜μ‘ν˜• ν–‰/μ—΄ μ‹œμŠ€ν…œ β€” μ…€(Cells) λ ˆμ΄μ•„μ›ƒ μ±•ν„°λ‘œ 이어짐. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” W3.CSS Rows β€” https://www.w3schools.com/w3css/w3css_rows.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Rows" page (Astra wiki-curation, P-Reinforce v3.1 format).