플렉서블 그리드
`px` 고정 폭보다 `%`, `rem`, `fr` 같은 상대 단위와 Flexbox/Grid를 사용해 컨테이너 크기에 맞게 열을 재배치합니다.
반응형 웹 디자인의 세 축
하나의 HTML 문서를 유지하면서 화면 크기, 해상도, 방향에 맞춰 레이아웃과 미디어를 조정하는 것이 반응형 웹 디자인의 핵심입니다.
플렉서블 미디어
이미지와 비디오는 `max-width: 100%`와 `height: auto`로 부모 영역을 넘지 않게 하고 원본 비율을 유지합니다.
미디어 쿼리
`min-width`, `max-width`, `orientation` 같은 조건이 맞을 때 다른 CSS 규칙을 적용해 화면별 경험을 조정합니다.
viewport
모바일 브라우저가 실제 장치 폭을 기준으로 렌더링하도록 메타 태그를 둡니다.
mobile first
작은 화면 기본값을 먼저 만들고 넓은 화면 조건을 점진적으로 추가합니다.
핵심반응형 웹 디자인의 세 축은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.