반응형
⚡ 한 줄 요약: 유료 서비스 없이 HTML 한 장으로 파티 안내·지도·참석여부(RSVP)·선물 위시리스트 링크까지 담은 생일 초대장을 직접 만들어 무료로 배포하는 법.
🔰 HTML이 처음이라면? 먼저 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년 9월 20일(토) 오후 6시 · OO루프탑">
<meta property="og:image" content="https://내도메인/party.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:#eef4ff;color:#2f3546;line-height:1.8}
.card{max-width:420px;margin:0 auto;background:#fff;padding:30px 22px;text-align:center}
.lead{color:#5b8def;letter-spacing:2px;font-size:13px}
h1{font-size:22px;margin:6px 0}
.sub{color:#8a93a6;font-size:13px;margin-bottom:18px}
.info{border-top:1px solid #eef1f6;padding:13px 0;font-size:15px}
.tag{display:inline-block;background:#eef4ff;color:#5b8def;border-radius:20px;
padding:4px 12px;font-size:13px;margin-top:6px}
.btn{display:block;width:100%;padding:14px;margin-top:10px;border:0;border-radius:12px;
background:#5b8def;color:#fff;font-size:15px;text-decoration:none;box-sizing:border-box}
.btn.line{background:#fff;color:#5b8def;border:1px solid #5b8def}
</style>
</head>
<body>
<div class="card">
<p class="lead">BIRTHDAY PARTY 🎉</p>
<h1>서준이의 생일 파티</h1>
<p class="sub">함께 즐겨요!</p>
<div class="info">서준이의 생일을 맞아 작은 파티를 엽니다.<br>편한 걸음으로 놀러 오세요.</div>
<div class="info"><b>2026. 9. 20 (토) 오후 6:00</b><br>OO루프탑
<br><span class="tag">드레스코드 · 화이트</span></div>
<a class="btn" href="https://www.google.com/maps/search/?api=1&query=OO루프탑">🗺️ 오시는 길</a>
<a class="btn line" href="https://내위시리스트링크">🎁 선물 위시리스트</a>
<a class="btn" href="https://forms.gle/여기에_구글폼_링크">✅ 참석 여부 전하기</a>
</div>
</body>
</html>
✅ 참석여부(RSVP)와 드레스코드
- RSVP: 자리·케이크 준비를 위해 인원 파악이 필요하죠. Google Forms로 '성함/인원/참석여부' 폼을 만들고
보내기 → 링크의https://forms.gle/…를 참석 버튼에 넣으세요. - 드레스코드: 위 코드의
.tag처럼 한 줄 배지로 넣으면 분위기가 삽니다(예: "화이트", "캐주얼").
🎁 선물 위시리스트 링크
'선물 뭐 사지?' 를 없애는 실용 기능입니다.
쿠팡·네이버 위시리스트, 또는 구글 시트로 원하는 선물 목록을 만들어 그 공유 링크를 위 🎁 선물 위시리스트 버튼 href 에 넣으세요.
부담되면 이 버튼은 빼도 됩니다.
🚀 무료 배포와 개인정보 주의
- 배포: GitHub Pages·Netlify Drop·Vercel(모두 HTTPS·무료)로 링크 발급 → 카톡 공유.
- 개인정보: 장소·연락 정보가 담기니
<meta name="robots" content="noindex">(코드에 포함)로 검색 노출을 막고, 링크는 초대한 사람에게만 공유하세요.
함께 보면 좋은 글
- 무료 모바일 초대장 만들기 — 템플릿 모음 — 전체 목록과 공통 뼈대
- 모바일 청첩장 직접 만들기 — 같은 기술의 청첩장 버전
반응형
'개발 실무' 카테고리의 다른 글
| AI 코딩 도구 코드 유출 막는 법 3가지 (0) | 2026.07.15 |
|---|---|
| HTML이란? 왕초보를 위한 개념과 공부 사이트 (0) | 2026.07.12 |
| 모바일 환갑·칠순 잔치 초대장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
| 모바일 돌잔치·백일 초대장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
| 모바일 청첩장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
