하나의 페이지가 화면 크기와 기기에 맞춰 레이아웃·이미지·글자 크기를 바꾸도록 만드는 접근. 미디어 쿼리(Media Query), 유연한 레이아웃(Flexible Layout), 반응형 미디어(Responsive Media)가 세 축이다.
미디어 쿼리와 모바일 우선
- 레이아웃이 바뀌는 지점을 브레이크포인트(Breakpoint)라고 한다. 특정 기기 크기보다 콘텐츠가 깨지는 지점을 기준으로 정한다
- 모바일 우선(Mobile First): 좁은 화면용 단일 열 레이아웃을 기본으로 쓰고,
min-width미디어 쿼리로 넓은 화면에서 열을 늘린다. 작은 화면에서는 넓은 화면용 규칙이 적용되지 않으니 덮어쓸 일이 줄어든다
유연한 레이아웃
- Flexbox는 공간에 따라 아이템을 늘리고 줄인다
- CSS Grid의
fr과repeat(auto-fit, minmax())는 미디어 쿼리 없이도 열 수를 바꾼다 - 다단 레이아웃(Multi-column Layout,
columns)은 글을 신문처럼 여러 열로 흘린다
반응형 미디어
img, picture, video { max-width: 100%; }로 컨테이너를 넘지 않게 한다srcset·sizes나picture요소로 화면 크기·해상도에 맞는 이미지 파일을 고르게 한다. 화면 밖 이미지는 loading 속성으로 늦춘다- 비율을 지키는 박스는 비율을 유지하는 박스 참고
반응형 글자 크기
font-size: 6vw처럼 뷰포트 단위(Viewport Units)만 쓰면 사용자가 확대해도 글자가 안 커진다. calc(1.5rem + 3vw)처럼 rem 값에 vw를 더하거나 clamp()로 범위를 둔다.
뷰포트 메타 태그(Viewport Meta Tag)
<meta name="viewport" content="width=device-width, initial-scale=1" />초기 스마트폰 브라우저는 데스크톱용 사이트를 보여 주려고 뷰포트를 980px쯤으로 가정하고 축소해서 그렸다. 이 태그가 없으면 지금도 그렇게 그려서 미디어 쿼리가 의도대로 동작하지 않는다. 반응형 페이지에는 항상 넣는다.