2nd/10_Wiki/Dev/Topic_HOWTO/HOWTO_CSS_Split_Screen.md

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

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
howto-css-split-screen	How To - Split Screen 1/2	Web_Recipes	draft	conceptual		50/50 split layout CSS		B	0.83	2026-07-04	2026-07-04			howto css w3schools layout position	https://www.w3schools.com/howto/howto_css_split_screen.asp

HOWTO CSS Split Screen

🎯 한 줄 통찰 (One-line insight)

Instead of floating two 50%-width columns (the technique used in [[HOWTO CSS Two Columns]]), this recipe fixes BOTH halves to the viewport independently — .split { position: fixed; height: 100%; width: 50%; } combined with .left { left: 0; } / .right { right: 0; } pins each half to an opposite screen edge, meaning the two halves never scroll and always occupy exactly half the viewport regardless of page content length, which float-based columns cannot guarantee (floated columns follow document flow and CAN scroll). [S1]

🧠 핵심 개념 (Core concepts)

• position: fixed; width: 50%; height: 100%; — anchors each half to the viewport, not the document flow, so both halves are always visible and exactly half-width. [S1]
• left: 0 / right: 0 — pins one half to the left edge, the other to the right edge, with no gap or overlap. [S1]
• Centered content inside each half — reuses the absolute+transform centering technique (position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);) already seen in [[HOWTO CSS Center Vertical]], applied per-half. [S1]

📖 세부 내용 (Details)

• Split halves: .split { height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; } .left { left: 0; background-color: #111; } .right { right: 0; background-color: red; }. [S1]
• Centered content: .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .centered img { width: 150px; border-radius: 50%; }. [S1]

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

• fixed 포지셔닝이 float 기반 2단 컬럼과 근본적으로 다름: [[HOWTO CSS Two Columns]]의 float 기반 2단 레이아웃은 문서 흐름을 따라 스크롤되지만, 이 레시피는 두 절반을 각각 position:fixed로 뷰포트에 고정해 항상 화면 절반씩을 차지하고 스크롤되지 않는다는 점이 핵심 차이로 확인됨. [S1]

🛠️ 적용 사례 (Applied in summary)

왼쪽에 여성 아바타, 오른쪽에 남성 아바타를 각각 배치해 화면을 정확히 반으로 나누는 예제가 원문에서 직접 제시됨. [S1]

💻 코드 패턴 (Code patterns)

Two viewport-fixed halves, each pinned to an opposite edge (CSS):

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  top: 0;
}
.left { left: 0; background-color: #111; }
.right { right: 0; background-color: red; }

✅ 검증 상태 및 신뢰도

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

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: W3Schools HOW TO
• 관련 개념: HOWTO CSS Two Columns, HOWTO CSS Center Vertical, HOWTO CSS Fixed Sidebar
• 참조 맥락: CSS Layout & Positioning 섹션.

📚 출처 (Sources)

• [S1] W3Schools — How To - Split Screen 1/2 — https://www.w3schools.com/howto/howto_css_split_screen.asp

📝 변경 이력 (Change history)

• 2026-07-04: Initial draft synthesized from the W3Schools "How To - Split Screen 1/2" recipe (Astra wiki-curation, P-Reinforce v3.1 format).