웹 문서와 검색 폼

지역 행사 소개와 검색 폼을 시맨틱 HTML로 작성합니다.

진도 0%

레슨

지역 행사를 찾는 사용자를 위한 소개와 검색 진입 화면을 만듭니다.

제공된 첫 모듈 starter에서 지역 행사 소개·예시 목록·상세 이동·검색 폼을 완성합니다. 이전 모듈은 없습니다.
main과 h1을 각각 하나 두고 주요 메뉴·소개·검색·행사 article의 역할과 제목 계층을 설명합니다.
검색어와 지역에 label을 연결하고 GET으로 q와 region을 results.html에 전달합니다. 전체 지역 값은 all입니다.
빈 검색어를 required로 막고 항상 보이는 입력 안내를 aria-describedby로 연결합니다. 사용자 정의 오류와 공백 정리는 이후 모듈 범위입니다.
KEYBOARD.md에 브라우저와 OS, 실제 Tab·Shift+Tab 순서, 빈 입력 안내, Enter와 버튼 제출 주소를 기록합니다.
실제 서비스 자격증명 없이 교육용 정적 자료를 사용하며 결과 폴더 전체를 다음 모듈에 넘깁니다.

npm ci 후 npm test에서 검사 18개, 실패 0개를 확인합니다.
내부 링크 목적지가 존재하고 검색어→지역→검색 버튼 DOM 순서, 레이블과 설명 참조가 검사됩니다.
브라우저에서 빈 입력 검증과 책/서울 Enter 제출, 책/전체 버튼 제출을 관찰해 KEYBOARD.md에 기록합니다. 자동 검사만으로 이 항목을 완료하지 않습니다.

npm test

모범 답안