반응형 설계 점검

반응형 중단점 판단

작은 화면에서 먼저 읽히게 만들고, 공간이 충분해지는 지점마다 열과 여백을 확장합니다.

mobile first 1열, 큰 터치 영역, 짧은 줄 길이
tablet 2열 후보, 사이드 정보 배치
desktop 넓은 그리드, 여백 상한, 긴 줄 제한
viewport

모바일 기준 맞춤

페이지 폭이 기기 폭과 맞아야 미디어 쿼리와 터치 크기가 예측대로 동작합니다.

max-width

넘침 제한

이미지와 본문 컨테이너는 부모보다 커지지 않게 제한하고, 넓은 화면에는 상한을 둡니다.

@media

깨지는 지점 보정

기기 이름보다 콘텐츠가 답답해지는 폭을 기준으로 열 수와 간격을 바꿉니다.

relative units

유연한 크기

%, fr, rem을 섞어 화면 변화에 따라 늘고 줄어드는 레이아웃을 만듭니다.

반응형 중단점 실수 방지

작은 화면에서 글자를 과하게 줄이지 마세요. 본문은 12px 이상을 유지하고 줄바꿈과 여백으로 해결합니다.