시작 코드 받기
폴더째 내려받아 AI 코딩 도구로 여세요.
파일은 다섯 개입니다. index.html, menu.html,
location.html, style.css, 그리고 이미지가 들어갈
빈 images/ 폴더입니다. 사진 파일은 넣지 않았습니다.
이미지가 뜨지 않는 상태가 오히려 대체 텍스트를 확인하기 좋습니다.
의도적으로 잘못 만든 교보재입니다. 이 코드를 그대로 가져다 쓰지 마세요. 무엇이 심어져 있는지는 미리 알려드리지 않습니다. 찾는 것부터가 실습입니다.
실습 순서
- 출혈부터 멈추기. 고치기 전에 규칙 파일을 프로젝트에 넣습니다. 규칙 세트를 복사해 쓰세요.
- 진단. 책 25장의 진단 프롬프트로 AI에게 맡기고, 검사 도구를 한 번 돌리고, 5분 루틴으로 직접 짚습니다. 셋을 합치는 것이 삼각측량입니다.
- 원인 단위 수리. 증상이 아니라 원인을 세세요. 카드 하나가 세 페이지에 복제돼 있습니다.
- 새 기능은 규칙 아래에서. 예약 문의 폼을 추가합니다.
- 재검사. 그리고 아래 해설과 맞춰봅니다.
다 고친 뒤에
심어둔 문제의 전체 목록을 해설 페이지에 두었습니다. 먼저 직접 찾아본 뒤에 열어보세요.
완성본은 자동 검사 위반 0건입니다. 다 고친 뒤 자기 결과와 비교해 보세요.
참고
자동 검사만으로는 절반쯤만 잡힙니다. 나머지는 키보드와 눈으로 찾아야 하고, 그 경험이 이 실습의 핵심입니다. 18장과 23장에서 말한 그 절반입니다.