https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
์ค๋๋ ์์ฑํ ์ฝ๋๋ฅผ ์ ์ฅํด๋ณด์.
๋ฒํผ์ ๋๋ฅด๋ฉด ๋๋ค ์์ ๋ ๊ฐ๊ฐ linear-gradient๋ฅผ ํตํด ๋ฐฐํฉ๋์ด ๋ฐฑ๊ทธ๋ผ์ด๋ ์์์ด ๋ฐ๋๋ค.
<!--HTML-->
<!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>Document</title>
</head>
<body>
<button>Click!</button>
<script src="index.js"></script>
</body>
</html>//JavaScript
const btn = document.querySelector("button");
const colors = [
"์ฌ์ฉํ ",
"์์",
"๋ฐฐ์ด๋ก",
"๋ง๋ค๊ธฐ",
];
// linear-gradient()๋ฅผ ์ฌ์ฉํ ๋
// document.body.style.backgroundColor๊ฐ ์๋๋ผ document.body.style.backgroundImage ์ฌ์ฉ
// ๋๋ ๊ทธ๋ฅ document.body.style.background
function changeColor() {
const randomColor1 = colors[Math.floor(Math.random() * colors.length)];
const randomColor2 = colors[Math.floor(Math.random() * colors.length)];
document.body.style.backgroundImage = `linear-gradient(to right, ${randomColor1}, ${randomColor2})`;
console.log(document.body.style.backgroundImage);
}
btn.addEventListener("click", changeColor);
'์ด๊ฒ ์ต์ ์ผ๊น?'๋ผ๋ ๊ณ ์ฐฐ์ ํตํด ๋์์ด ์ฑ์ฅํ๊ณ , ๊ทธ ๊ณผ์ ์ ์ฆ๊ธฐ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์
๋๋ค. ์ฌ์ฉ์์ ์
์ฅ์ ์๊ฐํ๋ฉฐ ์ต์ ์ ํธ์์ฑ์ ์ฐพ๊ธฐ ์ํด ๋
ธ๋ ฅํฉ๋๋ค.