WEB · RESPONSIVE

브레이크포인트별 레이아웃 변형

반응형 레이아웃은 같은 콘텐츠를 화면 폭에 따라 한 열, 두 열, 사이드바 구조로 재배치하는 전략입니다.

브레이크포인트별 레이아웃 변형 구조

breakpoint
360px단일 열, 터치 간격 확보
768px카드 2열 또는 보조 영역 아래 배치
1024px본문 + 사이드바 병렬 배치
fluidmax-width와 gap으로 중간 폭 흡수
360px768px1024pxfluid

브레이크포인트별 레이아웃 변형 기준

점검
Mobile first작은 화면 기본 스타일에서 넓은 화면을 확장합니다.
콘텐츠 기준기기 이름보다 내용이 깨지는 폭을 기준으로 잡습니다.
이미지max-width와 aspect-ratio로 레이아웃 흔들림을 줄입니다.
터치 영역모바일 버튼과 링크는 충분한 간격을 확보합니다.