AI에게 몰라서 못 시킨 홈페이지 기능 20가지
─────────────────────────────────────────────

이 폴더에서 시작합니다.

이 폴더를 복사해 실습용 폴더를 만들고, 그 폴더를 통째로 AI에 첨부한 뒤
아래 요청문을 위에서부터 하나씩 보내면 됩니다.


──────────────────────────────────────────
0.  맨 처음 한 번만 (1부 Chapter 02)
──────────────────────────────────────────

앞으로 고칠 때 HTML은 index.html, CSS는 style.css, JavaScript는 script.js에만 넣어. 한 파일에 섞지 마.


──────────────────────────────────────────
1.  2부 Chapter 01 · FAQ를 더 찾기 쉽게 만들기
──────────────────────────────────────────

FAQ 제목 아래에 검색창을 추가해. 검색어가 질문이나 답변에 들어 있는 항목만 보여 줘. 검색어를 지우면 모든 질문이 다시 나타나게 해. 결과가 없으면 ‘검색된 질문이 없습니다. 다른 단어로 찾아 봐.’라고 표시해. 안내 문구는 ‘배송, 보관, 주차 등을 검색해 봐’로 해. 한 번에 하나의 답변만 열리는 기능은 그대로 유지해. CSS는 style.css에, JavaScript는 script.js에 넣어.

──────────────────────────────────────────
2.  2부 Chapter 02 · 확대한 사진을 닫지 않고 넘겨 보기
──────────────────────────────────────────

갤러리에서 사진을 확대했을 때 아래를 모두 넣어 줘. 사진 좌우에 이전·다음 버튼. 닫지 않고 앞뒤 사진으로 바뀌게. 아래에 ‘3 / 6’ 형식의 번호와 사진 설명. 넘길 때마다 같이 바뀌게. 방향키로도 넘기게. 단 확대 화면이 닫혀 있을 때는 방향키가 아무 동작도 하지 않게. 첫 사진에서는 이전 버튼을, 마지막 사진에서는 다음 버튼을 흐리게 하고 눌러도 넘어가지 않게. 지금의 닫기 버튼, 바깥 클릭 닫기, Esc 닫기는 그대로 유지해.

──────────────────────────────────────────
3.  2부 Chapter 03 · 지금 보고 있는 위치를 메뉴에서 알려 주기
──────────────────────────────────────────

화면을 내릴 때 지금 보고 있는 영역의 상단 메뉴를 강조해 줘. 소개, 인기 메뉴, 갤러리, 후기, FAQ, 예약 여섯 개에 모두 적용해. 강조는 글자 아래 밑줄로 하고, 색이 갑자기 바뀌지 않고 짧게 스며들듯 바뀌게 해. 화면 맨 위에 있을 때는 어떤 메뉴도 강조하지 마. 화면 오른쪽 아래에는 맨 위로 이동 버튼을 동그랗게 넣어. 한 화면 정도 내렸을 때 나타나고, 맨 위로 올라가면 사라지게 해. 메뉴를 눌러 이동하는 기능은 그대로 유지해.

──────────────────────────────────────────
4.  2부 Chapter 04 · 카드가 화면에 들어올 때 차례로 나타나게 하기
──────────────────────────────────────────

인기 메뉴 카드와 갤러리 사진이 화면에 들어올 때 하나씩 차례로 나타나게 해. 페이지를 열자마자 전부 나타나는 방식이 아니라, 화면을 내려서 카드가 보이는 순간에 나타나게 해. 16픽셀 아래에서 올라오면서 서서히 진해지게 하고 0.5초 만에 끝나게 해. 동작 줄이기 설정을 켠 사용자에게는 움직이지 않고 바로 보이게 해. 히어로 영역과 예약 폼에는 넣지 마. 카드 내용과 배치는 그대로 유지해.


─────────────────────────────────────────────
한 번에 하나씩 보내세요. 보낸 뒤 책의 「직접 해 보기」로 확인하고 다음으로 갑니다.
결과가 어긋나면 책의 「이럴 때는」 상자에 있는 한 줄을 이어서 보내면 됩니다.
같은 요청문을 보내도 AI가 만드는 코드는 조금씩 다르게 나옵니다. 정상입니다.

다 마치면 1_2부까지 폴더와 같은 상태가 됩니다.
