이 페이지는 카드 사이의 빈 공간이 아니라, 본문이 읽히는 폭과 숨 쉴 여백을 확인한다.
폭 비교
간격 스케일
브레이크포인트와 반응형 기준
| 변수 | 값 | 의미 |
|---|---|---|
--breakpoint-sm |
340px |
가장 작은 화면 구간의 기준 |
--breakpoint-md |
768px |
태블릿/중형 화면 전환점 |
--breakpoint-lg |
900px |
본문과 사이드 구조가 갈리는 기준 |
--breakpoint-xl |
1120px |
전체 페이지 폭 상한 |
--cover-responsive-breakpoint-md |
768px |
커버/이미지의 반응형 분기점 |
--cover-responsive-width-md |
720px |
커버 이미지의 중간 폭 |
모서리와 깊이
확인 포인트
- 본문 폭이 지나치게 넓어 읽기 리듬이 무너지지 않는가
- 모바일 여백이 데스크톱과 같은 값으로 과도하게 유지되지 않는가
- 반경과 그림자가 버튼, 카드, figure 사이에서 같은 축으로 보이는가