meta viewport가 있어야 모바일 브라우저가 실제 장치 폭을 기준으로 레이아웃을 계산합니다.
responsive ui
반응형 디자인 축
모바일과 데스크톱을 따로 만드는 대신 화면 폭에 따라 Grid, Flexbox, 텍스트 크기, 여백이 자연스럽게 재배치되도록 설계합니다.
특정 폭 이하에서 열 수, 간격, 배치를 바꿔 화면 넘침을 줄입니다.
Flexbox와 CSS Grid로 카드 목록과 영역 배치를 콘텐츠 폭에 맞게 조정합니다.
viewport 태그가 기본 HTML에 포함되어 있는지 확인한다.
어느 폭에서 레이아웃이 어색해지는지 실제로 줄여 본다.
고정 폭보다 minmax, fr, flex-wrap을 우선 고려한다.
긴 제목과 버튼 문구가 좁은 화면에서 겹치지 않는지 본다.