본 영상은 실제 시나리오를 통해 CSS 컨테이너 쿼리의 강력함을 명확하게 보여줍니다.
1. 주문 목록 레이아웃 유연성 확보
- 문제: 드로어(좁은 컨테이너)에서는 한 개의 열, 전체 화면(넓은 컨테이너)에서는 두 개의 열로 표시되는 반응형 동작이 필요합니다. 기존 브라우저 너비 기반 브레이크포인트로는 동일한 UI 컴포넌트의 재사용이 어려웠습니다. 브라우저가 넓으면 드로어 안에서도 원치 않게 두 개의 열로 표시될 수 있었습니다.
- 해결: CSS 컨테이너 쿼리를 활용하여 브레이크포인트를 ‘부모 컨테이너’의 너비에 기반하도록 설정했습니다. 이를 통해 드로어의 너비에 따라 한 열, 전체 화면의 너비에 따라 두 열로 유연하게 레이아웃을 전환할 수 있게 되었습니다.
2. 조직 정보 입력 폼 반응형 구현
- 기존 방식의 한계: 모달(좁은 컨테이너)에서는 한 개의 열, 새 탭(넓은 컨테이너)에서는 한 개의 행으로 표시되는 폼이 필요했습니다.
lg:flex-row와 같은 브라우저 너비 기반 Tailwind CSS 클래스를 사용하면, 모달이 열려도 브라우저가 넓으면 모달 안의 내용도 행으로 표시되는 문제가 발생했습니다. - 컨테이너 쿼리 적용:1. 뷰의 해당 영역에
@container속성을 추가하여 컨테이너 쿼리 대상으로 지정합니다. 2. 폼 내부의 레이아웃 클래스를lg:flex-row대신@lg:flex-row로 변경하여, 브레이크포인트가 화면 너비가 아닌 가장 가까운@container부모 요소의 너비를 기준으로 적용되도록 합니다. - 결과: 전체 화면에서는 넓은 부모 컨테이너 덕분에 폼이 한 개의 행으로, 모달에서는 좁은 부모 컨테이너 덕분에 한 개의 열로 올바르게 표시됩니다.이처럼 CSS 컨테이너 쿼리는 재사용 가능한 UI 컴포넌트가 다양한 컨텍스트에서 예측 가능하고 원하는 대로 반응하도록 만드는 데 필수적인 도구입니다.