유동형 레이아웃은 가용 공간에 따라 요소의 너비 등이 달라지는 배치다. [[반응형 디자인]]에서 화면 변화에 대응하는 방법 중 하나이며, 특정 너비에서 규칙을 전환하는 [[브레이크포인트]]와 함께 사용할 수도 있다.

- 고정 너비 `600px`인 목록은 놓일 공간이 줄어도 그 값이 그대로다. `width: 90%`인 목록은 일반적으로 자신을 담은 블록의 너비를 기준으로 변한다. 창 전체의 90%라는 뜻으로 외우면 좁은 칸 안에서 예상과 달라질 수 있다.
- `width: 90%; max-width: 60rem`처럼 최대 너비를 함께 정할 수 있다. 넓은 화면에서 계속 늘어나는 글줄을 제한하면서 좁은 공간에서는 줄어들게 하는 조합이다.
- 글은 폭에 따라 줄 수가 달라지고, 이미지는 [[종횡비]]에 따라 높이가 달라진다. 같은 비율로 너비를 늘려도 둘의 아래쪽 끝이 함께 움직이지는 않는다.
- [[줄바꿈하는 작품 목록]]에서는 항목을 다음 줄로 보낼 수 있다. [[좁은 칸에 들어간 긴 낱말]]처럼 쉽게 끊어지지 않는 내용도 배치의 조건이다.

## 참고

- [MDN: 반응형 웹 디자인](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design)
- [MDN: width](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/width)

#개념 #CSS #디자인 #기초