컨테이너 쿼리의 등장

01

같은 요소 다른 위치

넓은 곳과 좁은 곳에 같은 카드.

02

화면은 넓은데

요소가 놓인 칸은 좁을 수 있습니다.

03

사이드바

옆 영역은 항상 좁습니다.

04

재사용 어려움

위치마다 다르게 만들어야.

05

코드 중복

비슷한 것을 여러 번 만듭니다.

06

관리 부담

수정할 때 여러 곳을 고칩니다.

화면 기준

브라우저 창 크기를 봄 · 요소 위치와 무관 · 같은 화면이면 같은 모습

공간 기준

요소가 놓인 칸 크기를 봄 · 위치에 따라 다르게 · 재사용이 쉬움

상품 카드

목록과 사이드바에 같은 카드.

글 미리보기

넓은 곳은 이미지 크게.

위젯

배치 위치가 다양한 요소.

대시보드

크기가 다른 칸에 같은 구성.

재사용 부품

여러 곳에 쓰이는 공통 요소.

복잡한 레이아웃

중첩된 구조.

지원 범위를 확인합니다.

지원 안 되면 어떻게 할지.

정말 필요한 상황인지.

굳이 필요 없을 수 있습니다.

일부에만 먼저 써봅니다.

다룰 수 있는지 확인합니다.

□  같은 요소를 여러 위치에 쓰는가

□  위치마다 다르게 보여야 하는가

□  브라우저 지원 범위를 확인했는가

□  지원 안 될 때 대체 방식이 있는가

□  정말 필요한 상황인지 판단했는가

□  제작사가 다룰 수 있는가

□  일부에 먼저 적용해 봤는가