반응형 CSS와 overflow
mobile-first에서는 좁은 화면을 기본으로 두고 min-width 조건으로 열 수, 간격, 타이포를 확장한다.
| 점검 축 | 좁은 화면 기본 | 넓은 화면 확장 | 위험 신호 |
|---|---|---|---|
| Layout | 1열 또는 단순 흐름 | 2열·3열 grid/flex 확장 | 모바일에서 가로 스크롤 |
| Width | width:100%, max-width 사용 | 컨테이너 최대 폭 제한 | 고정 px 폭이 화면보다 큼 |
| Text | 줄바꿈과 행간 확보 | 제목 크기와 간격 확장 | 긴 단어가 박스 밖으로 나감 |
| Media | 이미지와 iframe이 부모 폭을 넘지 않음 | 비율과 최대 크기 지정 | height만 고정해 찌그러짐 |
| Test | 320px부터 실제 콘텐츠 확인 | breakpoint 사이도 확인 | 대표 기기 폭만 보고 끝냄 |
반응형 품질은 예쁜 breakpoint보다 가장 좁은 폭에서 정보가 넘치지 않고 읽히는지로 판단한다.