반응형 HTML

개념 이해하기

반응형 페이지는 고정된 한 크기가 아니라 사용 가능한 화면 폭에 따라 배치가 바뀝니다. viewport meta로 모바일 브라우저의 기준 폭을 맞추고 이미지에는 max-width:100%, 레이아웃에는 미디어 쿼리를 사용합니다. 완성된 문서의 head에는 viewport meta가 필요합니다. 실습 iframe에는 이 설정이 이미 적용되어 있어, 예제 코드는 이미지와 레이아웃이 실제로 바뀌는 부분에 집중합니다.

예제에서는 <meta name="viewport" content="width=device-width, initial-scale=1"> 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.

먼저 현재 결과를 확인한 뒤 미디어 쿼리 기준을 500px에서 420px로 바꾸고 차이를 확인하세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.