* 버튼을 눌리면 정해진 색깔들을 랜덤으로 조합해 배경화면 색깔이 변화면서 그라데이션 효과를 대각선으로 주게 만들었습니다.
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>background</title>
</head>
<body>
<button id="btn">Change</button>
<script src="app.js"></script>
</body>
</html>
const colorChange = document.querySelector("#btn");
function changeHandle() {
const colors = [
"#ef5777",
"#575fcf",
"#4bcffa",
"#34e7e4",
"#0be881",
"#f53b57",
"#3c40c6",
"#0fbcf9",
"#00d8d6",
"#05c46b",
"#ffc048",
"#ffdd59",
"#ff5e57",
"#d2dae2",
"#485460",
"#ffa801",
"#ffd32a",
"#ff3f34"
]
const changeColors = colors[Math.floor(Math.random()*colors.length)];
const changeColors2 = colors[Math.floor(Math.random()*colors.length)];
document.body.style.backgroundImage = `linear-gradient(to top right, ${changeColors}, ${changeColors2})`
};
colorChange.addEventListener("click", changeHandle);

처음에 노마드코더 과제로 나왔을 때 Math, floor, random 이란걸 몰라서 한참을 헤맸다고 한다.
댓글