모바일부터 만드는 레이아웃

앞 모듈의 소개와 검색 폼에 겹침 없는 목록·상세 레이아웃을 추가합니다.

진도 0%

레슨

앞 모듈 미션 solution의 소개·검색 폼·상세 이동을 이어받아 긴 콘텐츠를 담는 모바일 목록과 상세 화면을 완성합니다.

미션 starter는 앞 모듈 solution을 복사하고 field/cards 묶음·긴 제목·긴 URL·이미지 유무 fixture를 추가한 상태입니다. assets/site.css의 TODO를 네 레슨 규칙으로 교체합니다.
기존 label·name=q/region·aria-describedby·GET results.html·DOM 순서·상세/돌아가기 링크를 유지합니다.
border-box와 가변 컨테이너, 줄바꿈 Flex 폼, 한 열 기본 Grid와 48rem 두 열 분기를 구현합니다.
카드 min-width:0, 긴 콘텐츠 줄바꿈, 이미지 max-width:100%와 height:auto를 적용합니다. 페이지 overflow 숨김이나 고정 높이로 내용을 자르지 않습니다.
내용에 따라 늘어나는 입력·버튼, 밑줄 링크, 보이는 포커스를 유지하고 LAYOUT.md에 실제 점검 환경과 결과를 기록합니다.
교육용 정적 결과 안내를 유지합니다. 실제 API·자격증명·외부 패키지는 사용하지 않습니다.

npm ci 후 npm test에서 앞 모듈 HTML 계약 18개 유지와 CSS 계약 20개, 실패 0개를 확인합니다. 이는 선언 검사이며 렌더링 검증을 대체하지 않습니다.
index.html·event.html·results.html 각각 320·390·768·1280 CSS px에서 scrollWidth가 clientWidth를 넘지 않는지 실제 브라우저로 확인하고 수치와 환경을 LAYOUT.md에 기록합니다.
긴 제목·URL 전체를 읽을 수 있고 이미지 유무에 따라 내용이 겹치거나 잘리지 않는지 기록합니다. 기본 글꼴의 767/768px 분기 경계도 점검합니다.
브라우저 실제 200% 확대에서 안내를 읽고 검색어 책·지역 서울로 Enter/버튼 제출을 확인합니다. 빈 입력 안내·Tab/Shift+Tab·상세와 돌아가기 및 포커스 잘림을 기록합니다.
미확인 수동 기록을 통과로 판정하지 않습니다. 수정 전 원인 요소·적용 규칙·수정 후 근거를 함께 제출합니다.

npm test

모범 답안