<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
.container {margin-left: auto; margin-right: auto; text-align: center; width: 1000px;}
.box {display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 2fr; margin-top: 50px;}
.number {background-color: aquamarine; font-size: 15pt;}
.num {background-color: tomato; font-size: 15pt;}
</style>
</head>
<body>
<div class="container">
<h1 style="margin: 30px;">로또 당첨 번호</h1>
<h2>1 ~ 45의 숫자 범위 6개 뽑기</h2>
<h2>중복된 숫자는 입력되지 않음</h2>
<div class="box">
<div class="number">1번</div>
<div class="number">2번</div>
<div class="number">3번</div>
<div class="number">4번</div>
<div class="number">5번</div>
<div class="number">6번</div>
<div class="num num1">번호</div>
<div class="num num2">번호</div>
<div class="num num3">번호</div>
<div class="num num4">번호</div>
<div class="num num5">번호</div>
<div class="num num6">번호</div>
</div>
</div>
<script>
번호리스트 = []
for (let i = 1; i <= 6 ; i += 1) {
let 숫자i = Math.floor(Math.random() * 45 + 1)
while (번호리스트.includes(숫자i) == true) {
숫자i = Math.floor(Math.random() * 45 + 1)
}
번호리스트.push(숫자i)
}
console.log(번호리스트)
for (let i = 1; i <= 6; i += 1) {
let 번호i = document.querySelector(`.num${i}`)
번호i.textContent = 번호리스트[i - 1]
}
</script>
</body>
</html>
