viewport와 유연한 크기로 여러 화면에 맞는 문서를 만듭니다.
반응형 페이지는 고정된 한 크기가 아니라 사용 가능한 화면 폭에 따라 배치가 바뀝니다. viewport meta로 모바일 브라우저의 기준 폭을 맞추고 이미지에는 max-width:100%, 레이아웃에는 미디어 쿼리를 사용합니다. 완성된 문서의 head에는 viewport meta가 필요합니다. 실습 iframe에는 이 설정이 이미 적용되어 있어, 예제 코드는 이미지와 레이아웃이 실제로 바뀌는 부분에 집중합니다.
원본 그림은 가로 800px이지만 .responsive img의 max-width: 100%가 자기 칸 폭을 넘지 못하게 막고, height: auto가 줄어든 폭에 맞춰 높이도 함께 줄여 비율을 지킵니다. 넓은 화면에서는 grid-template-columns: 1fr 1fr 때문에 그림과 글이 두 열로 나란히 서고, 500px 이하에서는 한 열이 되어 글이 그림 아래로 내려갑니다.
max-width 대신 width: 100%를 쓰면 원본보다 넓은 칸에서 그림이 원본 이상으로 늘어나 흐려지므로, 줄이기만 하고 키우지는 않으려면 max-width가 맞습니다. 미디어 쿼리의 폭은 브라우저 창이 아니라 그 문서의 뷰포트로 판정되기 때문에, 실습 미리보기처럼 iframe 안에 있는 문서는 iframe 폭이 500px 이하일 때 한 열로 바뀝니다.
width:800px 같은 고정 폭만 사용하면 작은 화면에서 가로 스크롤이 생깁니다.
직접 바꿔보세요미디어 쿼리 기준을 500px에서 420px로 바꾸고 차이를 확인하세요.