responsive

반응형 디자인 조정 요소

모바일 대응은 화면을 줄이는 작업이 아니라 컨테이너 폭, 열 수, 간격, 텍스트 흐름을 폭에 맞게 다시 배치하는 일입니다.

viewport meta

모바일 브라우저가 페이지 폭을 장치 폭으로 해석하도록 기본 메타 태그를 둡니다.

미디어 쿼리

특정 폭 이하에서 grid 열 수, flex 방향, 여백을 단계적으로 바꿉니다.

Flex와 Grid

아이템 흐름과 2차원 배치를 적절히 나눠 작은 화면에서도 구조를 유지합니다.

break

어느 폭에서 레이아웃이 깨지는지 직접 줄여 본다.

gap

작은 화면에서 여백이 콘텐츠보다 커지지 않는지 본다.

wrap

텍스트와 카드가 자연스럽게 다음 줄로 넘어가는지 확인한다.

mobile

터치 영역과 읽기 순서가 모바일에서도 유지되는지 본다.