[🔧 Front-End Error] #3 / animation not working / 2021-09-27

# 어떤 에러인가요?

- css linear-gradient로 효과를 주었는데 움직이는 효과가 나타나지 않았음
- inline-style로 작성했으며 파일 상에서는 정상적으로 css코드가 나타났으나 작동이 되지 않는 이슈가 있었음

# 에러 메시지

- `에러코드는 없었으나 정상작동 하지 않았음`

# 에러 핸들링 방법

- `whatColor = 'linear-gradient(-45deg, #5591C9, #245689)';`으로 작성한 뒤 inline style로 `style={{ background: whatColor }}`작성하여 사용하고 있었음.
- `background`는 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정할 수 있는 단축속성임. 이처럼 여러가지를 받는 css 속성인데 background-image로 적용되는 linear-gradient를 background에 작성하여 정상적으로 작동하지 않았던 것으로 추측됨.
- JSX 문법을 참고하여 `style={{ backgroundImage: whatColor }}`로 입력해주니 정상작동 했음.

# 에러 핸들링을 위해 참고한 레퍼런스 링크

[MDN - CSS background](https://developer.mozilla.org/ko/docs/Web/CSS/background)