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

4부까지 마친 상태입니다. 여기서 5부와 6부를 이어 갑니다.


──────────────────────────────────────────
1.  5부 Chapter 01 · 모바일에서 카드를 한 장씩 넘겨 보기
──────────────────────────────────────────

화면 너비 560px 이하에서만 인기 메뉴 카드를 가로로 밀어 볼 수 있게 해. 카드 한 장이 화면 너비의 80% 정도 되게 하고 오른쪽에 다음 카드가 살짝 보이게 해. 밀다가 손을 떼면 반드시 가장 가까운 카드의 왼쪽 끝에 딱 맞춰 부드럽게 멈추게 해. 어중간한 자리에 걸쳐 서는 일이 없어야 해. 카드 아래에 점을 여섯 개 놓고 지금 보고 있는 카드의 점만 진하게 표시하되 넘길 때 점도 따라 움직이게 해. 그보다 넓은 화면에서는 지금의 격자 배치를 그대로 둬.

──────────────────────────────────────────
2.  5부 Chapter 02 · 주소를 복사하고 휴대폰으로 공유하기
──────────────────────────────────────────

매장 주소와 전화번호 옆에 각각 복사 버튼을 넣어. 주소는 화면에 보이는 그대로, 전화번호는 하이픈을 빼고 숫자만 복사되게 하되 화면 표시는 그대로 둬. 복사하면 3부에서 만든 토스트와 같은 방식으로 ‘주소를 복사했습니다’, ‘전화번호를 복사했습니다’라고 알려 줘. 공유 기능이 되는 기기에서만 공유 버튼을 보여 주고, 안 되는 기기에서는 버튼을 아예 감춰. 공유할 때는 매장 이름·주소·전화번호를 함께 보내. 매장 정보 영역의 다른 부분은 수정하지 마.

──────────────────────────────────────────
3.  5부 Chapter 03 · 사진 때문에 느려지지 않게 하기
──────────────────────────────────────────

사진 때문에 페이지가 무거워. 세 가지를 한 번에 해 줘. 첫째, 메뉴와 갤러리 사진을 800·1200·1600 세 가지 크기로 만들고 화질은 80%로 저장해서 화면 크기에 맞는 것을 골라 불러오게 해. 메뉴 카드는 화면의 3분의 1, 갤러리도 3분의 1, 휴대폰에서는 화면 전체를 차지해. 둘째, 메뉴와 갤러리 사진은 그 자리에 가까워졌을 때 불러오게 하고 첫 화면 큰 사진과 카페 소개 사진에는 넣지 마. 셋째, 사진이 뜰 때 아래 내용이 밀리지 않게 사진마다 원래 가로세로 비율을 알려 줘. 사진이 오기 전에는 그 자리를 옅은 회색으로 채워 둬. 화면에 보이는 모습은 지금과 똑같아야 해. 지금 HTML의 들여쓰기와 줄 나눔은 그대로 두고 사진 태그만 고쳐.

──────────────────────────────────────────
4.  6부 Chapter 01 · 기능을 다 넣은 뒤 겹침 순서 정리하기
──────────────────────────────────────────

지금 홈페이지에서 화면에 떠 있는 것들의 겹침 순서를 정리해 줘. 토스트가 가장 위, 그다음이 확인 창, 갤러리 확대 창, 상단 메뉴, 맨 위로 버튼 순서가 되게 해. 같은 자리에 두 가지 안내가 함께 쓰이는 곳이 있는지 확인하고 있으면 자리를 나눠. 조건으로 걸러낸 카드가 투명하게 남지 않는지도 확인해 줘.


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

다 마치면 4_완성본 폴더와 같은 상태가 됩니다.
