Viewport
모바일 브라우저가 실제 화면 폭 기준으로 페이지를 계산하게 합니다.
반응형 웹 점검 루프
반응형 웹은 viewport 설정, 유연한 기본 레이아웃, 미디어 쿼리, 이미지 대응을 함께 설계하는 작업입니다.
Fluid
고정 폭보다 %, fr, max-width 같은 유연한 기준을 먼저 씁니다.
Media
화면 폭 조건에 따라 열 수, 간격, 배치를 단계적으로 바꿉니다.
Image
이미지가 부모 폭을 넘지 않도록 크기와 비율을 제어합니다.
작은 화면의 기본 경험을 만든 뒤 넓은 화면에서 확장합니다.
기기 이름보다 콘텐츠가 깨지는 지점을 기준으로 정합니다.
줄 길이, 버튼 크기, 터치 간격이 모바일에서 충분한지 확인합니다.
브라우저 개발자 도구와 실제 기기에서 스크롤과 오버플로를 봅니다.
반응형 웹 점검 판단 질문
작은 화면에서 가장 중요한 콘텐츠와 행동이 먼저 보이는지 확인합니다.
반응형 웹 점검 실수 방지
미디어 쿼리만 믿지 말고 기본 레이아웃 자체를 유연하게 만듭니다.
반응형 웹 점검 루프
블로그 레이아웃이 모바일, 태블릿, 데스크톱에서 자연스럽게 재배치됩니다.