바닐라 JS_10_background, 랜덤컬러

배운점

1>

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

2>

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

3>

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

4>

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

const randomColor = colors[Math.floor(Math.random() * colors.length)];

랜덤숫자를 컬러 배열 인덱스에 넣어서 색 변하게함.
그 중 왜 곱하기 배열의 길이를 햇나 했는데

배열.length 만큼 곱하면 그 범위의 랜덤값이 나옴 로 이해함

5>

그라데이션은 두가지 색상을 섞어서해야하는데
우선 내 머리로는 저 인덱스에 숫자가 2개를 해서
그 변수로 백그라운드 바꾸면 되지 않을까
그 다음 그라데이션 함수 쓰면되지 않나 했는데

결론적으로

그라데이션 적용을 위한 변수 만들고
그 안에서 두가지 색깔 섞이는 부분은 랜덤숫자 두개를 넣음

변수도 처음에는 그냥 랜덤숫자했다가, 배열 인덱스로 감쌈

그리고

그라데이션 안에 해당 컬러색들을 인덱스 두개로 랜덤하게 해서 적용하고
그것을 배경화면에 바꾸는 함수를 만들었음

6>

그라데이션 할때는 body.style.backgroundcolor가 아니라
background 혹은 backgroundcolor이미지로 해야함.

느낀점

우선 코드를 스스로 짜도록 생각해보는 시간이 되어서 너무 좋고
(그냥 강의 코드보고 따라치는거 말고 내가 따로 응용해볼시간이 있어서 좋음) css강의도 추가적으로 이걸로 다시 해도 재밌을 것이라 생각했다.우선 챌린지에 참여하면 배운 것 바로 응용해서 코딩하는 과제가 있다는 것과 슬랙이 있어 같이 공부하는 사람들끼리 으쌰으쌰도 너무 좋음.

노마드코더 클론코딩 인강을 통하여 배운 것을 복습하는 포스팅이므로 잘못된 정보는 예쁜말로 피드백 주시면 언제나 감사합니다.