๋ฐ์ํ
๋ฐ๋ ํ์ธ ๋ฐ์ด๋ ํ ๋งํ ๋๋๊ฐ์ ํ๋ ์ค ํ ๋งํ๊ฒ ๋ญ๊ฐ ์์๊น ๊ณ ๋ฏผํ๋ค๊ฐ
HTML + CSS๋ฅผ ํ์ฉํ ๋ฐ๋ ํ์ธ ์นด๋ ๋ง๋ค๊ธฐ๋ฅผ ํ๋ฉด ์ข๊ฒ ๋ค ์ถ์ด์
GPT์ ํฌ๋ฅํฌ๋ฅ ๋ง๋ค์ด ๋ณด์๋ค.
์ฝ๋๋ ๋ค์๊ณผ ๊ฐ๋ค.
728x90
๋ฐ์ํ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Valentine's Day Card</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: pink;
font-family: Arial, sans-serif;
}
.card {
position: relative;
width: 300px;
height: 400px;
background: white;
border-radius: 20px;
text-align: center;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
}
.heart {
color: red;
font-size: 50px;
animation: pulse 1s infinite alternate;
}
@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
.message {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
input {
width: 80%;
padding: 10px;
margin-top: 20px;
border: none;
border-radius: 10px;
}
button {
margin-top: 10px;
padding: 10px 20px;
border: none;
background: red;
color: white;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="card">
<div class="heart">โค๏ธ</div>
<p class="message">Happy Valentine's Day!</p>
<input type="text" id="userMessage" placeholder="Enter your message..." />
<button onclick="updateMessage()">Send</button>
</div>
<script>
function updateMessage() {
const message = document.getElementById("userMessage").value;
document.querySelector(".message").textContent = message || "Happy Valentine's Day!";
}
</script>
</body>
</html>
๊ธฐ๋ณธ ๋ธ๋ผ์ฐ์ ๋ก ์ด๋ฉด ๋์ํ ๊ฒ์ด๋ค.
์ด์ ์์๊ฒ ๊พธ๋ฏธ๋ ๊ฒ์ ๋น์ ์ ๋ชซ.
๋ฐ์ํ