실습 데모 목록

15장 — 확대가 막힌 화면

의도적으로 잘못 만든 교보재입니다. 이 페이지에는 문제가 셋 있습니다.

뷰포트에서 확대를 막았고(user-scalable=no), 아래 '약관 전문 보기'는 버튼처럼 보이지만 <span>이라 키보드로 누를 수 없으며, 그 조작 대상의 크기가 최소 기준(24×24px)에 못 미칩니다.

이렇게 해보세요

  1. 휴대폰으로 이 페이지를 여세요.
  2. 아래 작은 글씨를 두 손가락으로 벌려 확대해보세요. 안드로이드 크롬이라면 확대되지 않습니다. 아이폰이라면 확대가 됩니다. 같은 코드인데 결과가 다른 이유는 책에서 설명합니다.
  3. 폰이 없다면 데스크톱 브라우저의 개발자도구에서 기기 모드(모바일 화면 흉내)를 켜고 뷰포트 설정이 어떻게 적용되는지 확인해보세요.
  4. Tab 키로 '약관 전문 보기'에 도달해보세요. 도달할 수 없습니다.

예약 안내

예약 변경은 방문 24시간 전까지 가능하며, 이후에는 위약금이 발생할 수 있습니다. 주차는 건물 지하 2층을 이용해 주시고, 주차권은 카운터에서 받으실 수 있습니다. 반려동물 동반은 테라스석에 한해 가능합니다.

약관 전문 보기 필수 확인 사항

저시력 사용자에게 확대는 취향이 아니라 유일한 독해 수단입니다. 고령 사용자도 마찬가지입니다. 뷰포트 한 줄이 그 수단을 빼앗습니다. 무엇을 어떻게 고치는지는 책 15장에서 다룹니다.