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

[youngseo-kangg]

어떤 에러인가요?

• 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