반응형
화면 폭과 칸 폭 - 언제 무엇을 쓰나. 화면의 값은 빌드할 때 제품 코드에서 바로 읽었어요.
두 가지 질문#
'기기가 작은가'와 '칸이 좁은가'는 다른 질문이에요.
| 화면 폭(미디어 쿼리) | 칸 폭(컨테이너 쿼리) | |
|---|---|---|
| 기준 | 창 크기 - 767 · 1024px | 놓인 칸의 크기 - 560 · 720 · 1080px 등 |
| 쓰는 곳 | 화면 위에 떠서 창을 쓰는 것 - 시트냐 팝오버냐, 누르는 칸 크기, 글자 역할 크기 | 안쪽 배치 - 행 구성, 단 수, 여백 |
| 예 | 폰에서는 컬럼 편집이 아래 시트로, PC에서는 팝오버로 | 단지 상세는 칸이 896px 이상이면 핵심 정보를 옆에 세워요 |
화면 폭을 바꿔 보기#
실제 부품을 띄운 창의 폭을 바꿔요. 767px을 넘나들면 탭의 누르는 칸이 바뀌어요.
화면 폭402px
칸 폭을 바꿔 보기#
화면은 그대로 두고 칸만 좁혀요. 같은 카드 묶음이 칸 폭에 따라 1 · 2 · 3단이 돼요.
칸 폭760px
시세
-
전세가율
-
거래량
-
AI 전망
-
입지
-
학군
-
도크 안은 좁은 칸으로 봐요#
PC에서 상세 패널은 폭 390px이에요. 창은 넓어도 패널 안쪽은 폰 화면과 똑같이 그려요.
- 패널 안의 부품은 ‘폰이다’라는 신호를 받아 폰 배치를 써요 - 같은 단지 상세가 폰과 PC 패널에서 같은 모양이에요.
- 하지만 패널 안에서 여는 팝오버는 창 크기를 따라요. 창이 1440px이면 전체 화면 시트로 덮지 않고 PC 팝오버로 떠요.
고르는 법#
- 안쪽 배치는 먼저 칸 폭(컨테이너 쿼리)으로 짜요. 같은 부품이 메인·패널·대화상자 어디에 놓여도 맞게요.
- 화면 폭은 틀(막대·패널·시트)과 손가락 크기에만 써요.
- 글자 역할 크기는 화면 폭으로 바뀌어요(767px 이하에서 한 단계 크게).