클러스터 C4: CSS 및 디자인
개발자가 알아야 할 CSS 레이아웃 패턴
레이아웃 패턴은 장식이 아니라 반복 의사결정을 줄이고 반응형 동작을 예측 가능하게 만드는 기반입니다.
작업에 맞춰 레이아웃을 고르세요
폼 중심 화면은 세로 stack, 비교/미리보기는 split, 고밀도 도구는 sidebar + content 가 잘 맞습니다.
매 화면마다 구조를 새로 정하면 브레이크포인트, 간격, 액션 위치에서 같은 논쟁이 반복됩니다.
좁은 화면에서도 의미가 유지돼야 합니다
- 2열 레이아웃은 좁은 화면에서 세로로 쌓고 패널 라벨을 유지합니다.
- 핵심 액션은 입력/결과 가까이에 두고 사이드바 깊숙이 숨기지 않습니다.
- 간격, 최대 너비, sticky 동작을 공통 규칙으로 만듭니다.
실무 입력/출력 예시
입력
화면: 데이터 비교 요구사항: 왼쪽 입력, 오른쪽 결과 1024px 이하에서는 세로 스택
출력
데스크톱: 2열 split layout 모바일: 세로 stack + 패널 라벨 + 고정 액션 바