linear-gradient: 그라데이션

배경색에 2가지 색을 그라데이션 효과로 넣을 수 있는 방법을 새로 알게되었다.

background-image = linear-gradient(color1, color2);

컬러 인자 앞에 인자를 넣어서 여러 효과를 낼 수있다.

JavaScript로 여러 색을 지정하고 버튼을 누를 때 마다 그라데이션 효과가 있는 랜덤한 색으로 배경색을 설정하는 코드를 짜보았다.

const body = document.querySelector("body");
const btn = document.querySelector("button");
function onClickHandler() {
    const color1 = colors[Math.floor(Math.random() * colors.length)];
    const color2 = colors[Math.floor(Math.random() * colors.length)];
    body.style.backgroundImage = `linear-gradient(0.25turn, ${color1}, ${color2})`;
}
btn.addEventListener("click", onClickHandler);