<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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:40px 20px;
}
.container{
max-width:900px;
margin:0 auto;
background:#fff;
border-radius:25px;
padding:35px;
box-shadow:0 15px 35px rgba(0,0,0,0.25);
}
h1{
text-align:center;
color:#1e3c72;
margin-bottom:30px;
}
.menu{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-bottom:30px;
}
input{
width:180px;
padding:14px;
border:2px solid #ddd;
border-radius:10px;
font-size:18px;
text-align:center;
}
button{
padding:14px 22px;
border:none;
border-radius:10px;
background:#1e3c72;
color:white;
font-size:16px;
cursor:pointer;
transition:0.3s;
}
button:hover{
background:#ffb703;
color:#111;
transform:translateY(-3px);
}
#result{
margin-top:25px;
padding:25px;
background:#f5f7fb;
border-radius:20px;
min-height:250px;
}
.title{
font-size:30px;
color:#1e3c72;
margin-bottom:20px;
text-align:center;
}
.item{
background:white;
margin:8px 0;
padding:12px;
border-radius:10px;
font-size:22px;
text-align:center;
box-shadow:0 3px 8px rgba(0,0,0,0.08);
}
.all-wrap{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;
}
.card{
background:white;
padding:18px;
border-radius:15px;
box-shadow:0 5px 12px rgba(0,0,0,0.1);
}
.card h2{
text-align:center;
color:#1e3c72;
margin-bottom:10px;
}
.game-box{
text-align:center;
}
.question{
font-size:36px;
margin:20px 0;
color:#1e3c72;
font-weight:bold;
}
.message{
margin-top:15px;
font-size:22px;
font-weight:bold;
}
@media(max-width:600px){
.menu{
flex-direction:column;
}
input, button{
width:100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>자바스크립트 구구단 종합 프로그램</h1>
<div class="menu">
<input type="number" id="danInput" placeholder="2~9단 입력">
<button onclick="showInputDan()">입력한 단 보기</button>
<button onclick="showAllDan()">전체 구구단 보기</button>
<button onclick="startGame()">랜덤 문제 시작</button>
</div>
<div id="result">
<div class="title">원하는 기능을 선택하세요</div>
</div>
</div>
<script>
let answer = 0;
function showInputDan(){
let dan = Number(document.getElementById("danInput").value);
let result = document.getElementById("result");
if(dan < 2 || dan > 9 || isNaN(dan)){
result.innerHTML = `<div class="title">2부터 9 사이의 숫자를 입력하세요.</div>`;
return;
}
let html = `<div class="title">${dan}단</div>`;
for(let i = 1; i <= 9; i++){
html += `
<div class="item">
${dan} × ${i} = <strong>${dan * i}</strong>
</div>
`;
}
result.innerHTML = html;
}
function showAllDan(){
let result = document.getElementById("result");
let html = `<div class="title">전체 구구단</div>`;
html += `<div class="all-wrap">`;
for(let dan = 2; dan <= 9; dan++){
html += `<div class="card"><h2>${dan}단</h2>`;
for(let i = 1; i <= 9; i++){
html += `<p>${dan} × ${i} = ${dan * i}</p>`;
}
html += `</div>`;
}
html += `</div>`;
result.innerHTML = html;
}
function startGame(){
let dan = Math.floor(Math.random() * 8) + 2;
let num = Math.floor(Math.random() * 9) + 1;
answer = dan * num;
let result = document.getElementById("result");
result.innerHTML = `
<div class="game-box">
<div class="title">랜덤 구구단 문제</div>
<div class="question">${dan} × ${num} = ?</div>
<input type="number" id="userAnswer" placeholder="정답 입력">
<button onclick="checkAnswer()">정답 확인</button>
<button onclick="startGame()">다음 문제</button>
<div id="message" class="message"></div>
</div>
`;
}
function checkAnswer(){
let userAnswer = Number(document.getElementById("userAnswer").value);
let message = document.getElementById("message");
if(userAnswer === answer){
message.innerHTML = "정답입니다!";
message.style.color = "green";
}else{
message.innerHTML = `틀렸습니다. 정답은 ${answer}입니다.`;
message.style.color = "red";
}
}
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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:40px 20px;
}
.container{
max-width:900px;
margin:0 auto;
background:#fff;
border-radius:25px;
padding:35px;
box-shadow:0 15px 35px rgba(0,0,0,0.25);
}
h1{
text-align:center;
color:#1e3c72;
margin-bottom:30px;
}
.menu{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-bottom:30px;
}
input{
width:180px;
padding:14px;
border:2px solid #ddd;
border-radius:10px;
font-size:18px;
text-align:center;
}
button{
padding:14px 22px;
border:none;
border-radius:10px;
background:#1e3c72;
color:white;
font-size:16px;
cursor:pointer;
transition:0.3s;
}
button:hover{
background:#ffb703;
color:#111;
transform:translateY(-3px);
}
#result{
margin-top:25px;
padding:25px;
background:#f5f7fb;
border-radius:20px;
min-height:250px;
}
.title{
font-size:30px;
color:#1e3c72;
margin-bottom:20px;
text-align:center;
}
.item{
background:white;
margin:8px 0;
padding:12px;
border-radius:10px;
font-size:22px;
text-align:center;
box-shadow:0 3px 8px rgba(0,0,0,0.08);
}
.all-wrap{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;
}
.card{
background:white;
padding:18px;
border-radius:15px;
box-shadow:0 5px 12px rgba(0,0,0,0.1);
}
.card h2{
text-align:center;
color:#1e3c72;
margin-bottom:10px;
}
.game-box{
text-align:center;
}
.question{
font-size:36px;
margin:20px 0;
color:#1e3c72;
font-weight:bold;
}
.message{
margin-top:15px;
font-size:22px;
font-weight:bold;
}
@media(max-width:600px){
.menu{
flex-direction:column;
}
input, button{
width:100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>자바스크립트 구구단 종합 프로그램</h1>
<div class="menu">
<input type="number" id="danInput" placeholder="2~9단 입력">
<button onclick="showInputDan()">입력한 단 보기</button>
<button onclick="showAllDan()">전체 구구단 보기</button>
<button onclick="startGame()">랜덤 문제 시작</button>
</div>
<div id="result">
<div class="title">원하는 기능을 선택하세요</div>
</div>
</div>
<script>
let answer = 0;
function showInputDan(){
let dan = Number(document.getElementById("danInput").value);
let result = document.getElementById("result");
if(dan < 2 || dan > 9 || isNaN(dan)){
result.innerHTML = `<div class="title">2부터 9 사이의 숫자를 입력하세요.</div>`;
return;
}
let html = `<div class="title">${dan}단</div>`;
for(let i = 1; i <= 9; i++){
html += `
<div class="item">
${dan} × ${i} = <strong>${dan * i}</strong>
</div>
`;
}
result.innerHTML = html;
}
function showAllDan(){
let result = document.getElementById("result");
let html = `<div class="title">전체 구구단</div>`;
html += `<div class="all-wrap">`;
for(let dan = 2; dan <= 9; dan++){
html += `<div class="card"><h2>${dan}단</h2>`;
for(let i = 1; i <= 9; i++){
html += `<p>${dan} × ${i} = ${dan * i}</p>`;
}
html += `</div>`;
}
html += `</div>`;
result.innerHTML = html;
}
function startGame(){
let dan = Math.floor(Math.random() * 8) + 2;
let num = Math.floor(Math.random() * 9) + 1;
answer = dan * num;
let result = document.getElementById("result");
result.innerHTML = `
<div class="game-box">
<div class="title">랜덤 구구단 문제</div>
<div class="question">${dan} × ${num} = ?</div>
<input type="number" id="userAnswer" placeholder="정답 입력">
<button onclick="checkAnswer()">정답 확인</button>
<button onclick="startGame()">다음 문제</button>
<div id="message" class="message"></div>
</div>
`;
}
function checkAnswer(){
let userAnswer = Number(document.getElementById("userAnswer").value);
let message = document.getElementById("message");
if(userAnswer === answer){
message.innerHTML = "정답입니다!";
message.style.color = "green";
}else{
message.innerHTML = `틀렸습니다. 정답은 ${answer}입니다.`;
message.style.color = "red";
}
}
</script>
</body>
</html>
#자바스크립트 구구단 종합 프로그램