반응형
⚡ 한 줄 요약: 유료 서비스 없이 HTML 한 장으로 아기 성장사진·행사 지도·참석여부(RSVP)까지 담은 돌잔치·백일 초대장을 직접 만들어 무료로 배포하는 법.
🔰 HTML이 처음이라면? 먼저 HTML이란? 왕초보 가이드를 읽어보세요.
📑 목차
🍼 왜 직접 만드나
돌·백일 초대장 앱은 편하지만 광고가 붙고 사진·연락처가 외부에 쌓입니다.
직접 만들면 광고 없이, 우리 아기 사진으로 예쁘게, 참석 인원까지 자동 집계할 수 있습니다.
공통 기술은 무료 모바일 초대장 만들기 — 템플릿 모음에 있고, 이 글은 '돌잔치·백일'에 맞췄습니다.
📄 돌잔치 초대장 HTML 한 장
index.html로 저장하고 값만 바꾸세요.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>이준이의 첫 생일에 초대합니다</title>
<meta property="og:title" content="이준이의 첫 번째 생일, 돌잔치에 초대합니다">
<meta property="og:description" content="2026년 11월 8일(일) 낮 12시 · OO뷔페 2층 연회장">
<meta property="og:image" content="https://내도메인/baby.jpg">
<meta property="og:type" content="website">
<meta name="robots" content="noindex">
<style>
body{font-family:system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
margin:0;background:#fff7fb;color:#4a4048;line-height:1.8}
.card{max-width:420px;margin:0 auto;background:#fff;padding:30px 22px;text-align:center}
.lead{color:#f0a6c0;letter-spacing:2px;font-size:13px}
h1{font-size:21px;margin:6px 0}
.sub{color:#999;font-size:13px;margin-bottom:18px}
.info{border-top:1px solid #f2e8ee;padding:13px 0;font-size:15px}
.gallery{display:flex;gap:6px;margin:14px 0}
.gallery img{flex:1;width:100%;border-radius:10px;object-fit:cover;height:96px}
.btn{display:block;width:100%;padding:14px;margin-top:10px;border:0;border-radius:12px;
background:#f0a6c0;color:#fff;font-size:15px;text-decoration:none;box-sizing:border-box}
</style>
</head>
<body>
<div class="card">
<p class="lead">FIRST BIRTHDAY</p>
<h1>이준이의 첫 생일</h1>
<p class="sub">엄마 김수진 · 아빠 이정우</p>
<div class="gallery">
<img src="baby1.jpg" alt=""><img src="baby2.jpg" alt=""><img src="baby3.jpg" alt="">
</div>
<div class="info">우리 준이가 벌써 첫 생일을 맞이합니다.<br>귀한 걸음으로 축복해 주세요.</div>
<div class="info"><b>2026. 11. 8 (일) 낮 12:00</b><br>OO뷔페 2층 연회장</div>
<a class="btn" href="https://www.google.com/maps/search/?api=1&query=OO뷔페">🗺️ 오시는 길</a>
<a class="btn" href="https://forms.gle/여기에_구글폼_링크">✅ 참석 여부 전하기</a>
</div>
</body>
</html>
📷 성장사진 갤러리 넣기
돌·백일의 매력은 사진입니다.
위 코드의 .gallery 처럼 <img> 를 나란히 넣으면 됩니다.
사진은 가로 800px 내외로 리사이즈해 올리면 로딩이 빠릅니다(원본 그대로 올리면 링크가 무거워집니다).
배포 폴더에 baby1.jpg 같은 파일을 함께 두면 끝입니다.
✅ 참석여부(RSVP)와 답례 안내
- RSVP: 식대·답례품 수량 때문에 인원 파악이 중요합니다. Google Forms로 '성함/참석 인원/식사 여부' 폼을 만들고
보내기 → 링크의https://forms.gle/…를 참석 버튼에 넣으세요. 응답은 스프레드시트로 자동 집계됩니다. - 답례·화환 안내: 필요하면 카드 하단에
<div class="info">화환은 정중히 사양합니다</div>처럼 한 줄 안내를 더하세요.
🚀 무료 배포와 개인정보 주의
- 배포: GitHub Pages·Netlify Drop·Vercel(모두 HTTPS·무료)로 링크 발급 → 카톡 공유.
- 개인정보: 아기 사진·장소가 담기니
<meta name="robots" content="noindex">(코드에 포함)로 검색 노출을 막고, 링크는 하객에게만 공유하세요.
함께 보면 좋은 글
- 무료 모바일 초대장 만들기 — 템플릿 모음 — 전체 목록과 공통 뼈대
- 모바일 청첩장 직접 만들기 — 같은 기술의 청첩장 버전
반응형
'개발 실무' 카테고리의 다른 글
| 모바일 생일 초대장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
|---|---|
| 모바일 환갑·칠순 잔치 초대장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
| 모바일 청첩장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
| 무료 모바일 초대장 직접 만들기 — HTML 템플릿 모음 (0) | 2026.07.11 |
| 모바일 부고장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.10 |
