---
id: w3css-cells
title: "W3CSS Cells"
category: "Programming_Language"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["w3-cell", "w3-cell-row", "W3.CSS 셀"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.87
created_at: 2026-07-04
updated_at: 2026-07-04
review_reason: ""
merge_history: []
tags: ["w3css", "css-framework", "w3schools", "cells"]
raw_sources: ["https://www.w3schools.com/w3css/w3css_cells.asp"]
applied_in: []
github_commit: ""
---

# [[W3CSS Cells]]

## 🎯 한 줄 통찰 (One-line insight)
`w3-cell` elements self-adjust to BOTH width AND height automatically — side-by-side cells with different amounts of text content each stretch to accommodate their content's natural width, and simultaneously all cells in the same row stretch to match the TALLEST cell's height, without any explicit sizing rules from the developer. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`w3-cell`** — turns a normally block-level element (like `<div>`) into a horizontally-flowing, table-cell-like element. [S1]
- **`w3-cell-row`** — the container whose width defines the total width shared among its `w3-cell` children (default 100%). [S1]
- **Self-adjusting width** — cells automatically size to their content's natural width when placed side-by-side. [S1]
- **Self-adjusting height** — cells in the same row automatically stretch to match the tallest sibling. [S1]
- **`w3-mobile` + `w3-cell`** — cells display vertically stacked on small screens, horizontally on medium/large screens. [S1]
- **`w3-cell-top` (default) / `w3-cell-middle` / `w3-cell-bottom`** — vertical content alignment within a cell. [S1]

## 📖 세부 내용 (Details)
- Basic horizontal cells: `<div class="w3-container w3-red w3-cell"><p>Hello W3.CSS Cell.</p></div><div class="w3-container w3-green w3-cell"><p>Hello W3.CSS Cell.</p></div>`. [S1]
- Wrapped in a sizeable row: `<div class="w3-cell-row" style="width:75%">...</div>` — reduces total width of contained cells. [S1]
- Mobile-responsive cells: `<div class="w3-container w3-red w3-cell w3-mobile">...</div>` — stacks vertically below the mobile breakpoint. [S1]
- Mixed vertical alignment in one row: `<div class="w3-cell">...</div><div class="w3-cell w3-cell-middle">...</div><div class="w3-cell w3-cell-bottom">...</div>` — three different vertical alignments side by side. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- **셀의 이중 자동 조정**: 너비뿐 아니라 높이까지 형제 셀 중 가장 큰 값에 자동으로 맞춰진다는 점이 별도 예제로 증명됨. [S1]

## 🛠️ 적용 사례 (Applied in summary)
현재 발견된 실제 적용 사례가 없습니다 — 모바일에서는 세로로 쌓이고 데스크톱에서는 가로로 배치되는 셀 레이아웃이 반응형 콘텐츠 블록의 대표 실전 사례다. [S1]

## 💻 코드 패턴 (Code patterns)
Mobile-responsive cells: vertical on small screens, horizontal on larger ones (HTML):
```html
<div class="w3-container w3-red w3-cell w3-mobile"><p>Hello W3.CSS Cell.</p></div>
<div class="w3-container w3-green w3-cell w3-mobile"><p>Hello W3.CSS Cell.</p></div>
<div class="w3-container w3-blue w3-cell w3-mobile"><p>Hello W3.CSS Cell.</p></div>
```

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.87
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[W3.CSS Tutorial]]
- **관련 개념:** [[W3CSS Rows]], [[W3CSS Responsive]]
- **참조 맥락:** 자동 조정 셀 레이아웃 — 반응형 유동 그리드(Responsive) 챕터로 이어짐.

## 📚 출처 (Sources)
- [S1] W3Schools — W3.CSS Cells — https://www.w3schools.com/w3css/w3css_cells.asp

## 📝 변경 이력 (Change history)
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Cells" page (Astra wiki-curation, P-Reinforce v3.1 format).