<!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:1200px;
max-width:100%;
margin:0 auto;
}
h1{
text-align:center;
color:#fff;
margin-bottom:40px;
font-size:48px;
font-weight:bold;
}
#result{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
gap:20px;
}
.card{
background:#fff;
border-radius:20px;
padding:25px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
transition:0.3s;
}
.card:hover{
transform:translateY(-10px);
}
.card h2{
text-align:center;
background:#2a5298;
color:#fff;
padding:12px;
border-radius:10px;
margin-bottom:15px;
font-size:28px;
}
.gugu-item{
padding:8px 0;
border-bottom:1px solid #ddd;
font-size:18px;
color:#333;
transition:0.2s;
}
.gugu-item:hover{
color:#2a5298;
padding-left:10px;
}
.gugu-item:last-child{
border-bottom:none;
}
@media(max-width:768px){
h1{
font-size:32px;
}
.card h2{
font-size:22px;
}
.gugu-item{
font-size:16px;
}
}
</style>
</head>
<body>
<div class="container">
<h1> 자바스크립트 구구단 프로그램</h1>
<div id="result"></div>
</div>
<script>
let result = document.getElementById("result");
for(let dan = 2; dan <= 9; dan++){
let card = `<div class="card">`;
card += `<h2>${dan}단</h2>`;
for(let i = 1; i <= 9; i++){
card += `
<div class="gugu-item">
${dan} × ${i} = <strong>${dan * i}</strong>
</div>
`;
}
card += `</div>`;
result.innerHTML += card;
}
</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:1200px;
max-width:100%;
margin:0 auto;
}
h1{
text-align:center;
color:#fff;
margin-bottom:40px;
font-size:48px;
font-weight:bold;
}
#result{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
gap:20px;
}
.card{
background:#fff;
border-radius:20px;
padding:25px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
transition:0.3s;
}
.card:hover{
transform:translateY(-10px);
}
.card h2{
text-align:center;
background:#2a5298;
color:#fff;
padding:12px;
border-radius:10px;
margin-bottom:15px;
font-size:28px;
}
.gugu-item{
padding:8px 0;
border-bottom:1px solid #ddd;
font-size:18px;
color:#333;
transition:0.2s;
}
.gugu-item:hover{
color:#2a5298;
padding-left:10px;
}
.gugu-item:last-child{
border-bottom:none;
}
@media(max-width:768px){
h1{
font-size:32px;
}
.card h2{
font-size:22px;
}
.gugu-item{
font-size:16px;
}
}
</style>
</head>
<body>
<div class="container">
<h1> 자바스크립트 구구단 프로그램</h1>
<div id="result"></div>
</div>
<script>
let result = document.getElementById("result");
for(let dan = 2; dan <= 9; dan++){
let card = `<div class="card">`;
card += `<h2>${dan}단</h2>`;
for(let i = 1; i <= 9; i++){
card += `
<div class="gugu-item">
${dan} × ${i} = <strong>${dan * i}</strong>
</div>
`;
}
card += `</div>`;
result.innerHTML += card;
}
</script>
</body>
</html>
#구구단 프로그램