<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나이 계산하기</title>
<style>
body {
text-align:center;
}
.btn {
margin-top:50px;
font-weight: 400;
color:#fff;
background-color:#007bff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-color:#007bff;
border-radius: 0.25rem;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn:hover {
color:#fff;
background-color:#218838;
border-color:#1e7e34;
}
.show {
margin-top: 50px;
padding:20px 30px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
</style>
</head>
<body>
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시)</div>
<script>
function calc() {
const now = new Date();
const currentYear = Number(now.getFullYear());
const birthYear = Number(prompt("년도를 입력해 주세요"));
document.querySelector("#result").innerHTML = `당신의 나이는 ${currentYear + birthYear} 세입니다.`;
}
</script>
</body>
</html>
