[Javascript / CSS] linear-gradient() 사용하여 랜덤으로 배경 색상 바꾸기

결과물

 

사용자가 버튼 클릭 시, colors 배열에서 두 개의 색상이 랜덤 선택되고 그라데이션으로 바뀌는 이벤트를 실행해보자.

 

---

필요한 것

• linear-gradient : 선형 그러데이션을 만들어주는 CSS 함수 

linear-gradient(방향, 색1, 색2,...)

 

background: linear-gradient(orange, yellow);

방향의 기본 값은 위->아래 이고 방향은 각도로 정할 수 있다.

 

background: linear-gradient(90deg, pink, orange);

 

• Math.floor() : 주어진 숫자의 소수점 이하를 내림해서 반환하는 함수
• Math.random() : 0에서 1보다 작은 범위의 난수를 반환하는 함수 

 

 

• length : 배열의 길이(요소의 개수)를 반환하는 프로퍼티 

 

 

과정

const button = document.querySelector("button");

function handleButton() {
  ...
}
button.addEventListener("click", handleButton);

 

1. 버튼 클릭 시 배경 색상이 랜덤으로 변경되어야 하기 때문에 클릭 이벤트를 걸어주고 함수를 생성한다.

 

function handleButton() {
  const color1 = colors[Math.floor(Math.random() * colors.length)];
  const color2 = colors[Math.floor(Math.random() * colors.length)];
  }
}

 

2. 배경의 색상은 colors 라는 배열에서 받아와야 한다.

이때, 랜덤으로 받아올 수 있도록 Math.floor() 와 Math.random() 함수를 사용하고

colors 배열의 크기만큼 랜덤 난수를 생성하기 위해 length 프로퍼티를 사용하여

두 개의 컬러 변수 color1 / color2 를 만든다. 

 

function handleButton() {
  const color1 = colors[Math.floor(Math.random() * colors.length)];
  const color2 = colors[Math.floor(Math.random() * colors.length)];
  if (color1 !== color2) {
    document.body.style.background = `linear-gradient(90deg,
      ${color1},
      ${color2}
    )`;
  }
}

 

3. color1과 color2의 색상이 똑같으면 그라데이션이 되지 않기 때문에 두 색상이 같지 않을 때

body의 스타일 중 background 속성에 linear-gradient() 함수로 그라데이션을 적용한다.

 

js에서 css스타일을 적용할 때에는 style.[속성] = "속성값"; 의 형태로 작성하는데 여기서 우리는 변수를 넣어주어야 하므로 템플릿 리터럴 [ ``(백틱) 과 ${} ]을 사용한다. 

 

 

 

전체 코드

const colors = [
  "#ef5777",
  "#575fcf",
  "#4bcffa",
  "#34e7e4",
  "#0be881",
  "#f53b57",
  "#3c40c6",
  "#0fbcf9",
  "#00d8d6",
  "#05c46b",
  "#ffc048",
  "#ffdd59",
  "#ff5e57",
  "#d2dae2",
  "#485460",
  "#ffa801",
  "#ffd32a",
  "#ff3f34"
];

const button = document.querySelector("button");

function handleButton() {
  const color1 = colors[Math.floor(Math.random() * colors.length)];
  const color2 = colors[Math.floor(Math.random() * colors.length)];
  if (color1 !== color2) {
    document.body.style.background = `linear-gradient(90deg,
      ${color1},
      ${color2}
    )`;
  }
}
button.addEventListener("click", handleButton);

---

참고

linear-gradient()

linear-gradient() - CSS: Cascading Style Sheets | MDN

Math.floor()

Math.floor() - JavaScript | MDN

Math.random()

Math.random() - JavaScript | MDN

length

Array.prototype.length - JavaScript | MDN