노을 진 해안 도시
담긴 칸이 넓어지면 글과 그림이 좌우로 나뉘어 한 줄에 들어갑니다.
@container
화면이 아니라 담긴 칸 너비로 반응
같은 카드가 좁은 칸에선 세로로, 넓은 칸에선 가로로 자동 전환돼요. 미디어 쿼리(화면 크기 기준) 없이요.
컨테이너 너비를 직접 조절300px (세로)
300px
380px를 넘으면 카드가 세로 -> 가로로 바뀝니다. 화면 크기는 그대로예요.
같은 카드, 다른 칸 - 한눈에 비교
좁은 칸 (260px) - 세로
노을 진 해안 도시
담긴 칸이 넓어지면 글과 그림이 좌우로 나뉘어 한 줄에 들어갑니다.
넓은 칸 - 가로
노을 진 해안 도시
담긴 칸이 넓어지면 글과 그림이 좌우로 나뉘어 한 줄에 들어갑니다.
핵심: 카드 코드는 한 벌뿐이에요. 좁게 보일지 넓게 보일지는 카드가 아니라 "카드를 감싼 칸"이 정합니다. 그래서 같은 컴포넌트를 사이드바든 본문이든 모달이든 어디에 넣어도 알아서 맞춰져요.