이미지 출처 및 라이선스

이 목업의 이미지는 두 계열로 나뉩니다.

⚠️ **실제 오픈 전 확인 사항**

1. CC BY / CC BY-SA 이미지는 **저작자 · 라이선스 · 원본 링크 표기가 의무**입니다.

현재 푸터의 `이미지 출처` 링크가 그 자리이며, 실제로는 이 문서 내용을 담은 페이지로 연결해야 합니다.

2. 제품 사진이 **실제 판매 모델과 일치하는지** 반드시 확인하세요.

지금은 "사진에 찍힌 실제 제품"에 맞춰 상품명을 적어둔 상태입니다.

3. 제조사 공식 스튜디오컷을 쓰시려면 총판/제조사 프레스킷을 받아야 합니다.

파일만 주시면 아래 규격에 맞춰 교체 가능합니다.

1. 제품 실물컷 — Wikimedia Commons

전부 흰 배경으로 정규화(여백 트리밍 → 순백 캔버스 중앙 배치)해서 저장했습니다.

퀵 카테고리 (400 × 400)

보드DB 갤러리 (640 × 448)

콘텐츠샵 (640 × 480)

원본은 <https://commons.wikimedia.org/> 에서 파일명으로 검색하면 찾을 수 있습니다.

2. 분위기 사진 — Pexels

[Pexels License](https://www.pexels.com/license/) : 무료 / 상업적 이용 / 수정 가능 / 출처 표기 불필요.

3. 이미지 규격

교체 시 아래 비율만 맞추면 CSS 수정 없이 그대로 적용됩니다.

(object-fit + aspect-ratio 로 잡혀 있어 비율이 약간 달라도 깨지지 않습니다.)

제품컷은 배경이 흰색이어야 카드와 자연스럽게 이어집니다.

투명 PNG 도 그대로 동작하므로, 누끼 이미지가 있다면 그대로 넣으셔도 됩니다.

4. 메인 배너 소재 가이드 (타사 홍보 배너용)

메인 슬라이더는 슬라이드 1장 = 이미지 1장 + 링크 구조입니다.

카피가 마크업에 없으므로 광고주가 만든 완성 소재를 그대로 올리면 됩니다.

입고 규격

- PC · 모바일 두 벌을 함께 받으세요. <picture> 로 900px 에서 자동 전환됩니다.

- 한 벌만 있어도 동작하지만(object-fit: cover) 좌우가 잘릴 수 있습니다.

세이프 에어리어 ⚠

슬라이더 조작 UI(이전·다음·인디케이터)가 우측 하단에 떠 있습니다.

이 영역에는 로고·가격·필수 고지 같은 핵심 정보를 배치하지 마세요.

교체 방법

index.html 의 <div class="slides"> 안에서 파일명만 바꾸면 끝입니다.

```html

<div class="slide on">

<a href="https://advertiser.example.com" class="slide-link" target="_blank" rel="noopener">

<picture>

<source media="(max-width: 900px)" srcset="img/banner/소재명-m.jpg">

<img src="img/banner/소재명.jpg" alt="광고 문구를 그대로 적어주세요" width="1400" height="600">

</picture>

</a>

</div>

```

- alt 에는 배너에 적힌 문구를 그대로 넣어주세요. 이미지에 글자가 들어 있어

화면낭독기·검색엔진이 읽을 수 있는 유일한 통로입니다.

- 슬라이드를 추가·삭제하면 인디케이터 버튼(.slider-dots button)도 같은 개수로 맞춰주세요.

1 / 3 카운터는 스크립트가 자동 계산합니다.