[잡담] 메롱

〈meta charset="UTF-8"> 〈title>하트 편지지〈/title> 〈style> html, body { margin: 0; padding: 0; background: transparent; font-family: '돋움', dotum; display: flex; justify-content: center; align-items: center; height: 100vh; } .letter-container { position: relative; width: 700px; height: 600px; border: 1px solid #cce5f5; background-color: #ffffffee; box-shadow: 4px 4px 0 #cce5f5; overflow: hidden; padding: 20px; box-sizing: border-box; } .heart-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .heart { position: absolute; width: 16px; height: 16px; background-image: url('https://i.postimg.cc/8crKb954/b4630e09-3be0-45d3-b3c6-af9c4034cba3.png'); background-size: contain; background-repeat: no-repeat; opacity: 0.9; animation: fall linear infinite; } @keyframes fall { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } .letter-content { position: relative; z-index: 2; width: 60%; height: 100%; margin: 0 auto; overflow-y: auto; padding: 15px; background-color: #fff; box-sizing: border-box; font-size: 13px; line-height: 1.7; color: #333; border-radius: 4px; box-shadow: inset 0 0 3px #ccc; } .image-box { text-align: center; margin: 12px 0; } .image-box img { width: 100%; border: 1px solid #ccc; border-radius: 6px; } .quote { margin-bottom: 6px; border-bottom: 1px dashed #cce5f5; padding-bottom: 4px; } 〈/style>

〈!-- 움직이는 하트 배경 -->

〈!-- 편지 내용 -->

첫 번째 여자다운 것 요구하지 말아라

두 번째 술은 절대로 세 잔 이상 먹이면 안 되구요

아무나 패거든요

그리고 카페 가면 콜라, 주스 마시지 말고 커피 드세요

가끔 때리면 안 아파도 아픈 척하거나

아파도 안 아픈 척하는 것을 좋아해요

만난 지 백 일 되면 강의실 찾아가서

장미꽃 한 송이 내밀어 보세요

되게 좋아할 거예요

검도하고 스쿼시는 꼭 배우세요

가끔 유치장 가는 것도 감수할 수 있어야 되고요

가끔 죽인다고 협박하면

진짜 죽을지도 모른다고 생각하세요

그래야 편해요

그리고 가끔 다리가 아프다고 그러면

신발도 바꿔 신고 그래요

마지막으로 글 쓰는 것 좋아하거든요

칭찬 많이 해 주세요

const area = document.getElementById('heartArea'); for (let i = 0; i 〈 40; i++) { const heart = document.createElement('div'); heart.className = 'heart'; heart.style.left = `${Math.random() * 100}%`; heart.style.top = `-${Math.random() * 100}px`; heart.style.animationDuration = `${5 + Math.random() * 3}s`; heart.style.animationDelay = `${Math.random() * 2}s`; area.appendChild(heart); }