Files

T

Antigravity Agent 1cfd3bbb56 docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고,
Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.

2026-07-05 00:10:59 +09:00

3.5 KiB

Raw Blame History

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

title

HOWTO CSS Equal Height

🎯 한 줄 통찰 (One-line insight)

The display: table / display: table-cell trick repurposes HTML TABLE layout behavior (where cells in the same row always match the row's tallest cell) onto plain <div>s WITHOUT using an actual <table> element — an old technique that pre-dates Flexbox, and the recipe explicitly shows Flexbox (display: flex; flex: 1;) as the modern equivalent with an explicit caveat: Flexbox isn't supported in IE10 and earlier, which is presumably why the table-display trick is taught FIRST despite being the more obscure approach. [S1]

🧠 핵심 개념 (Core concepts)

display: table / display: table-cell — makes a <div> container and its <div> children behave like a <table> and <td>s, inheriting the automatic row-height-matching behavior of real tables, without any table markup. [S1]
Responsive stacking via media query — @media (max-width: 600px) { .col { display: block; width: 100%; } } switches the table-cell columns to stacked blocks on narrow screens. [S1]
Flexbox alternative — .col-container { display: flex; } .col { flex: 1; } achieves the same equal-height effect with less code, but is unsupported in IE10 and earlier. [S1]

📖 세부 내용 (Details)

Table-display method: .col-container { display: table; width: 100%; } .col { display: table-cell; }. [S1]
Flexbox method: .col-container { display: flex; width: 100%; } .col { flex: 1; padding: 16px; }. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.

🛠️ 적용 사례 (Applied in summary)

서로 다른 텍스트 길이를 가진 3개 컬럼이 항상 가장 높은 컬럼에 맞춰 동일한 높이로 렌더링되는 예제가 원문에서 직접 제시됨. [S1]

💻 코드 패턴 (Code patterns)

Table-display trick vs. Flexbox for equal-height columns (CSS):

/* Table-display trick -- works in older browsers */
.col-container { display: table; width: 100%; }
.col { display: table-cell; }

/* Flexbox -- modern, not supported in IE10 and earlier */
.col-container-flex { display: flex; width: 100%; }
.col-flex { flex: 1; padding: 16px; }

✅ 검증 상태 및 신뢰도

상태: draft
검증 단계: conceptual
출처 신뢰도: B (W3Schools — widely used educational reference)
신뢰 점수: 0.85
중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

상위/루트: W3Schools HOW TO
관련 개념: HOWTO CSS Four Columns, HOWTO CSS Clearfix, HOWTO CSS Mixed Columns
참조 맥락: CSS Layout & Positioning 섹션.

📚 출처 (Sources)

[S1] W3Schools — How To - Equal Height — https://www.w3schools.com/howto/howto_css_equal_height.asp

📝 변경 이력 (Change history)

2026-07-04: Initial draft synthesized from the W3Schools "How To - Equal Height" recipe (Astra wiki-curation, P-Reinforce v3.1 format).

3.5 KiB Raw Blame History