미트라이프 HTML 광고 템플릿 50종

현재 웹 재생은 JPG 슬라이드가 아닌 HTML/CSS 레이어 방식입니다.
제목(h1), 설명(p), 사진(img), 배경·장식(CSS)이 분리되어 있습니다.

1. index.html에서 원하는 광고를 엽니다.
2. 화면을 터치하고 '사진·문구 편집'을 누릅니다.
3. 장면 1~10을 선택하여 사진, 제목, 설명, 강조 문구를 교체합니다.
4. 레이아웃 20가지 중 원하는 구성을 선택할 수 있습니다.
5. '이 브라우저에 저장'은 현재 기기에 임시 작업본을 보관합니다.
6. 'HTML 파일로 저장'은 사진과 디자인을 포함한 독립 HTML 파일을 만듭니다.
   이 파일을 다른 PC로 옮겨 열면 인터넷 없이 재생하고 다시 편집할 수 있습니다.
   독립 HTML은 파일 자체의 내용을 우선합니다. 재편집 후 HTML로 다시 저장하세요.

직접 개발할 때:
- catalog.js: 50개 광고의 문안, 사진 경로, 장면별 레이아웃, 색상
- screen.css: 글꼴, 크기, 위치, 여백 및 레이아웃 20종
- screen.js: HTML 레이어 구성과 재생·전환
- template-editor.js: 사진 교체, 문구 수정, 브라우저 저장, 독립 HTML 내보내기
- mobile-landscape.js: 모바일 가로보기와 전체화면 진행 표시 숨김
- assets/: 글자가 합성되지 않은 원본 사진의 화면용 사본

웹에서 편집해도 서버 원본이나 다른 사용자의 화면은 바뀌지 않습니다.
JPG 다운로드 및 갤러리 썸네일은 기존 원본 시안이며 편집 내용이 반영되지 않습니다.
수정본을 사용하려면 HTML 파일로 저장하세요.
긴 문구로 바꾼 경우 재생 화면에서 글자 배치를 확인하세요.
사진 출처: assets/photo-credits.json
