<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>단 선택 구구단</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Arial', sans-serif;
background:linear-gradient(135deg,#1e3c72,#2a5298);
min-height:100vh;
padding:50px 20px;
}
.container{
width:800px;
max-width:100%;
margin:0 auto;
text-align:center;
}
h1{
color:white;
margin-bottom:30px;
font-size:42px;
}
.button-wrap{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:40px;
}
button{
width:80px;
height:60px;
border:none;
border-radius:15px;
background:white;
font-size:22px;
font-weight:bold;
cursor:pointer;
transition:0.3s;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}
button:hover{
background:#ffd700;
transform:translateY(-5px);
}
#result{
background:white;
border-radius:25px;
padding:35px;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
min-height:400px;
}
.result-title{
font-size:40px;
color:#2a5298;
margin-bottom:20px;
}
.gugu-item{
font-size:28px;
padding:12px;
margin:8px 0;
border-radius:10px;
background:#f5f5f5;
transition:0.2s;
}
.gugu-item:hover{
background:#dbe9ff;
transform:scale(1.03);
}
.guide{
color:#888;
font-size:22px;
margin-top:120px;
}
@media(max-width:768px){
h1{
font-size:30px;
}
button{
width:65px;
height:50px;
font-size:18px;
}
.gugu-item{
font-size:22px;
}
}
</style>
</head>
<body>
<div class="container">
<h1> 구구단 선택 프로그램</h1>
<div class="button-wrap">
<button onclick="showDan(2)">2단</button>
<button onclick="showDan(3)">3단</button>
<button onclick="showDan(4)">4단</button>
<button onclick="showDan(5)">5단</button>
<button onclick="showDan(6)">6단</button>
<button onclick="showDan(7)">7단</button>
<button onclick="showDan(8)">8단</button>
<button onclick="showDan(9)">9단</button>
</div>
<div id="result">
<div class="guide">
원하는 단을 선택하세요
</div>
</div>
</div>
<script>
function showDan(dan){
let result = document.getElementById("result");
let html = `
<div class="result-title">
${dan}단
</div>
`;
for(let i = 1; i <= 9; i++){
html += `
<div class="gugu-item">
${dan} × ${i} = <strong>${dan * i}</strong>
</div>
`;
}
result.innerHTML = html;
}
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>단 선택 구구단</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Arial', sans-serif;
background:linear-gradient(135deg,#1e3c72,#2a5298);
min-height:100vh;
padding:50px 20px;
}
.container{
width:800px;
max-width:100%;
margin:0 auto;
text-align:center;
}
h1{
color:white;
margin-bottom:30px;
font-size:42px;
}
.button-wrap{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:40px;
}
button{
width:80px;
height:60px;
border:none;
border-radius:15px;
background:white;
font-size:22px;
font-weight:bold;
cursor:pointer;
transition:0.3s;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}
button:hover{
background:#ffd700;
transform:translateY(-5px);
}
#result{
background:white;
border-radius:25px;
padding:35px;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
min-height:400px;
}
.result-title{
font-size:40px;
color:#2a5298;
margin-bottom:20px;
}
.gugu-item{
font-size:28px;
padding:12px;
margin:8px 0;
border-radius:10px;
background:#f5f5f5;
transition:0.2s;
}
.gugu-item:hover{
background:#dbe9ff;
transform:scale(1.03);
}
.guide{
color:#888;
font-size:22px;
margin-top:120px;
}
@media(max-width:768px){
h1{
font-size:30px;
}
button{
width:65px;
height:50px;
font-size:18px;
}
.gugu-item{
font-size:22px;
}
}
</style>
</head>
<body>
<div class="container">
<h1> 구구단 선택 프로그램</h1>
<div class="button-wrap">
<button onclick="showDan(2)">2단</button>
<button onclick="showDan(3)">3단</button>
<button onclick="showDan(4)">4단</button>
<button onclick="showDan(5)">5단</button>
<button onclick="showDan(6)">6단</button>
<button onclick="showDan(7)">7단</button>
<button onclick="showDan(8)">8단</button>
<button onclick="showDan(9)">9단</button>
</div>
<div id="result">
<div class="guide">
원하는 단을 선택하세요
</div>
</div>
</div>
<script>
function showDan(dan){
let result = document.getElementById("result");
let html = `
<div class="result-title">
${dan}단
</div>
`;
for(let i = 1; i <= 9; i++){
html += `
<div class="gugu-item">
${dan} × ${i} = <strong>${dan * i}</strong>
</div>
`;
}
result.innerHTML = html;
}
</script>
</body>
</html>
#단 선택 구구단