유연한 레이아웃·미디어·breakpoint를 함께 설계합니다.
반응형 디자인은 한 페이지가 다양한 화면에 적응하도록 fluid width, max-width, flex/grid, media query를 조합합니다. 단순히 요소를 숨기는 것이 아니라 우선순위와 작업 흐름을 유지해야 합니다.
.demo가 실습 기본 폭 대신 최대 720px까지 넓어지고, .stage는 repeat(auto-fit, minmax(140px, 1fr))로 140px 이상인 열을 들어가는 만큼 만듭니다. .stage가 가장 넓을 때 662px라 140px 열 네 개와 간격이 들어가 A부터 D까지 한 줄에 서고, 화면이 좁아지면 열이 셋, 둘, 하나로 줄며 남은 항목이 아래 줄로 내려갑니다. 각 열은 1fr이라 남는 폭을 나눠 가집니다.
auto-fit은 항목이 없는 빈 트랙을 0으로 접어 남은 항목이 줄 전체로 늘어나게 하고, auto-fill은 빈 트랙을 그대로 남겨 항목이 최소 폭 근처에 머뭅니다. 이 예제는 .demo가 720px에서 멈춰 다섯째 열이 생길 수 없으므로 두 값의 결과가 같습니다.
데스크톱을 그대로 축소해 작은 글자와 작은 클릭 영역을 만들지 마세요.
직접 바꿔보세요minmax의 최소 폭을 100px과 220px로 비교하세요.