<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로또 번호 생성기</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: linear-gradient(135deg, #f7f8fc, #e9eefb);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
color: #1f2937;
}
.card {
width: 100%;
max-width: 720px;
background: #ffffff;
border-radius: 24px;
padding: 32px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
text-align: center;
}
h1 {
margin: 0 0 8px;
font-size: 2rem;
}
p {
margin: 0 0 24px;
color: #6b7280;
line-height: 1.6;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-bottom: 24px;
}
button {
border: none;
border-radius: 14px;
padding: 14px 20px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.primary {
background: #2563eb;
color: white;
}
.secondary {
background: #eef2ff;
color: #3730a3;
}
.number-set {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin: 24px 0;
min-height: 68px;
}
.ball {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 800;
color: white;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
animation: pop 0.25s ease;
}
.range-1 { background: #f59e0b; }
.range-2 { background: #3b82f6; }
.range-3 { background: #ef4444; }
.range-4 { background: #6b7280; }
.range-5 { background: #22c55e; }
.history {
margin-top: 28px;
text-align: left;
border-top: 1px solid #e5e7eb;
padding-top: 20px;
}
.history h2 {
font-size: 1.1rem;
margin: 0 0 14px;
}
.history-list {
display: grid;
gap: 10px;
}
.history-item {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 12px 14px;
font-weight: 600;
color: #374151;
}
.note {
margin-top: 20px;
font-size: 0.92rem;
color: #6b7280;
}
@keyframes pop {
from {
transform: scale(0.85);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@media (max-width: 600px) {
.card {
padding: 24px 18px;
}
.ball {
width: 48px;
height: 48px;
font-size: 1rem;
}
}
</style>
</head>
<body>
<div class="card">
<h1>🎟️ 로또 번호 생성기</h1>
<p>
1부터 45까지 중복 없이 6개의 번호를 자동으로 생성합니다.<br />
버튼을 누를 때마다 새로운 추천 번호를 확인할 수 있어요.
</p>
<div class="controls">
<button class="primary" onclick="generateNumbers()">번호 생성하기</button>
<button class="secondary" onclick="generateMultipleSets(5)">5세트 생성</button>
<button class="secondary" onclick="clearHistory()">기록 지우기</button>
</div>
<div id="result" class="number-set"></div>
<div class="history">
<h2>생성 기록</h2>
<div id="historyList" class="history-list">
<div class="history-item">아직 생성된 번호가 없습니다.</div>
</div>
</div>
<div class="note">
이 사이트는 무작위 번호를 생성하는 기능만 제공합니다.
</div>
</div>
<script>
const historyList = document.getElementById('historyList');
const result = document.getElementById('result');
let history = [];
function getRandomLottoNumbers() {
const numbers = [];
while (numbers.length < 6) {
const num = Math.floor(Math.random() * 45) + 1;
if (!numbers.includes(num)) {
numbers.push(num);
}
}
return numbers.sort((a, b) => a - b);
}
function getBallClass(number) {
if (number <= 10) return 'range-1';
if (number <= 20) return 'range-2';
if (number <= 30) return 'range-3';
if (number <= 40) return 'range-4';
return 'range-5';
}
function renderBalls(numbers) {
result.innerHTML = '';
numbers.forEach(number => {
const ball = document.createElement('div');
ball.className = `ball ${getBallClass(number)}`;
ball.textContent = number;
result.appendChild(ball);
});
}
function renderHistory() {
historyList.innerHTML = '';
if (history.length === 0) {
historyList.innerHTML = '<div class="history-item">아직 생성된 번호가 없습니다.</div>';
return;
}
history.slice().reverse().forEach((set, index) => {
const item = document.createElement('div');
item.className = 'history-item';
item.textContent = `세트 ${history.length - index}: ${set.join(' / ')}`;
historyList.appendChild(item);
});
}
function generateNumbers() {
const numbers = getRandomLottoNumbers();
renderBalls(numbers);
history.push(numbers);
renderHistory();
}
function generateMultipleSets(count) {
const allSets = [];
for (let i = 0; i < count; i++) {
const numbers = getRandomLottoNumbers();
history.push(numbers);
allSets.push(numbers);
}
renderBalls(allSets[allSets.length - 1]);
renderHistory();
}
function clearHistory() {
history = [];
result.innerHTML = '';
renderHistory();
}
generateNumbers();
</script>
</body>
</html>