[TIL] 오늘의 개발일지

 

 

오늘 오전에는 어제 리덕스 기능 마무리했던거에, 최종 css를 입히는 작업을 했당

짜잔~ 나의 두번째 과제 페이지!

css작업을 하면서, styled-component에 키프레임을 적용시키고 싶었는데 

styled-component가 아직 익숙하지 않다보니 키프레임을 어디에다 적용을 시켜야하는지 몰랐당

 

이럴땐 모다?!

구글신에게 어떻게 적용시키냐고 여쭤보니, 생각보다 방법은 심플했다

styled-component에서 keyframes 라는 컴포넌트를 제공하고 있었고, 

import styled, { keyframes } from "styled-components";

해당 컴포넌트를 임포트만 해서 styled 처럼 사용해주면 끝 >_<

 

const neon = keyframes`
  0%,
  50% {
    text-shadow: 0 0 1vw white, 0 0 3vw #e67e87, 0 0 10vw #cf6f87, 0 0 10vw #cc3884, 0 0 .4vw #e260bb, .5vw .5vw .1vw #1c128c;
    color: #30f14a;
  }

`;

const Neon = styled.h2`
  animation: ${neon} 3s ease infinite;
  -moz-animation: ${neon} 2s ease infinite;
  -webkit-animation: ${neon} 2s ease infinite;
  font-size: 40px;
  color: white;
`;

이렇게 코드를 짜주면, 네온사인 처럼 반짝거리는 효과를 줄 수 있었다

 

다행히 오늘은 2시간 정도 후발대 강의를 듣기 전에 시간이 남았는데, 두시간 동안은 리액트 심화 강의를 예습하다가

저녁에는 후발대 강의를 들으러 가야겠당 ㅎㅎ

 

오늘의 개발일지 끝~!