반응형
⚡ 한 줄 요약: 유료 서비스 없이 HTML 한 장으로 잔치 안내·오시는 길·헌수(축하금) 계좌 복사·참석여부까지 담은 환갑·칠순 초대장을 직접 만들어 무료로 배포하는 법.
🔰 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년 12월 6일(일) 낮 12시 · OO한정식 별관">
<meta property="og:image" content="https://내도메인/main.jpg">
<meta property="og:type" content="website">
<meta name="robots" content="noindex">
<style>
body{font-family:"Nanum Myeongjo",system-ui,"Apple SD Gothic Neo",serif;
margin:0;background:#f5f1e6;color:#3b352a;line-height:1.9}
.card{max-width:420px;margin:0 auto;background:#fffdf8;padding:34px 24px;text-align:center;
border-top:4px solid #b1902f}
.lead{color:#b1902f;letter-spacing:6px;font-size:13px}
h1{font-size:22px;margin:8px 0}
.sub{color:#8a8270;font-size:13px;margin-bottom:20px}
.info{border-top:1px solid #ece5d3;padding:14px 0;font-size:15px}
.btn{display:block;width:100%;padding:14px;margin-top:11px;border:0;border-radius:8px;
background:#b1902f;color:#fff;font-size:15px;text-decoration:none;box-sizing:border-box}
.btn.line{background:#fffdf8;color:#b1902f;border:1px solid #b1902f}
</style>
</head>
<body>
<div class="card">
<p class="lead">七旬 宴</p>
<h1>아버지 칠순을 축하합니다</h1>
<p class="sub">아버지 김영수 · 어머니 박정순<br>자녀 일동 올림</p>
<div class="info">늘 사랑으로 보살펴 주신 아버지의<br>칠순을 맞아 조촐한 자리를 마련했습니다.<br>귀한 걸음으로 축복해 주세요.</div>
<div class="info"><b>2026. 12. 6 (일) 낮 12:00</b><br>OO한정식 별관</div>
<a class="btn" href="https://www.google.com/maps/search/?api=1&query=OO한정식">🗺️ 오시는 길</a>
<button class="btn line" type="button" onclick="copy('국민 123-45-6789 김영수')">🎁 축하의 마음 전하기</button>
<a class="btn" href="https://forms.gle/여기에_구글폼_링크">✅ 참석 여부 전하기</a>
</div>
<script>
function copy(acct){
navigator.clipboard.writeText(acct)
.then(function(){ alert("계좌가 복사되었습니다.\n" + acct); })
.catch(function(){ prompt("복사해서 사용하세요:", acct); });
}
</script>
</body>
</html>
🎁 헌수(축하금) 계좌 복사
축하금을 받는다면 계좌를 눌러 바로 복사되게 하면 손님이 편합니다.
위 코드의 copy('은행 계좌 예금주') 버튼이 그 역할입니다(HTTPS에서 동작, 실패 시 prompt 폴백).
'마음만 받겠다'면 이 버튼 대신 <div class="info">축하금과 화환은 정중히 사양합니다</div> 한 줄로 대체하세요.
✅ 참석여부(RSVP) 받기
식당 예약 인원 때문에 참석 파악이 중요합니다.
Google Forms로 '성함/참석 인원/식사 여부' 폼을 만들고, 보내기 → 링크의 https://forms.gle/… 를 참석 버튼 href 에 넣으면 응답이 스프레드시트로 자동 집계됩니다.
어르신 손님이 많다면 폼을 간단히(성함·인원만) 두는 편이 좋습니다.
🚀 무료 배포와 개인정보 주의
- 배포: GitHub Pages·Netlify Drop·Vercel(모두 HTTPS·무료)로 링크 발급 → 카톡 공유.
- 개인정보: 계좌·장소가 담기니
<meta name="robots" content="noindex">(코드에 포함)로 검색 노출을 막고, 링크는 손님에게만 공유하세요.
함께 보면 좋은 글
- 무료 모바일 초대장 만들기 — 템플릿 모음 — 전체 목록과 공통 뼈대
- 모바일 청첩장 직접 만들기 — 같은 기술의 청첩장 버전
반응형
'개발 실무' 카테고리의 다른 글
| HTML이란? 왕초보를 위한 개념과 공부 사이트 (0) | 2026.07.12 |
|---|---|
| 모바일 생일 초대장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
| 모바일 돌잔치·백일 초대장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
| 모바일 청첩장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
| 무료 모바일 초대장 직접 만들기 — HTML 템플릿 모음 (0) | 2026.07.11 |
