[React] styled-components animation keyframes, & 선택자, $선택자,

목적

• styled-components를 사용하고 있기는한데 정말 기본적으로만 사용하고 있어서 새롭게 알게된 것을 정리해보려고함
• 이전 글 포함 추가된 내용을 기술해보려고 함

 

animation keyframes

• styled-components 에서 animation을 사용하기 위한 방법
• 먼저 keyframes를 import 해온다.

import styled, {keyframes} from 'styled-components'

• 다음 애니메이션을 사용할 곳을 만들어준다.

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display:flex;
  justify-content: center;
  align-items: center;
  animation: ${rotateanimation} 1s linear infinite;
`

• rotateanimation 이라는 이름으로 애니메이션 이름을 만들어준다.
• 다음 사용하기 위한 animation keyframes를 만들어 준다.

const rotateanimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius: 0px;
  }
  50% {
    border-radius: 100px;
  }
  100% {
    transform:rotate(360deg);
    border-radius: 0px;
  }
`

• 이전 styled-components를 작성하며 styled.div  가 아닌 keyframes을 사용하여 애니메이션 작성
• 360도 회전하며 border-radius가 0 -> 100 -> 0 으로 이어지는 애니메이션 작성

 

& 선택자

해당 선택자는 한 마디로 요약하자면 자기자신을 선택한다는 것

 

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  & span {
    font-size: 36px;
    color: #fff;
  
    &:hover {
      font-size: 50px;
    }
  }
  ///////////////////////// &:hover 와 span:hover는 동의어
  span:hover {
    color: red;
  }

`

function App() {
  return (
    <Wrapper>
      <Box>
        <span>해피</span>
      </Box>
    </Wrapper>
  );
}

export default App;

 

$ 선택자

• $ 선택자를 사용하는 방법으로 애니메이션 불러오기, import 불러오기, url 링크 사용하기 등 방법이 있지만
• 지금은 특정 컴포넌트만을 지정하고 싶을때 사용하기 위한 방법을 소개

const Emoji = styled.span`
    font-size: 36px;
`

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display:flex;
  justify-content: center;
  align-items: center;
  animation: ${rotateanimation} 1s linear infinite;
  ${Emoji} {
      &:hover {
      font-size: 50px;
    }
  }
`



function App() {
  return (
    <Wrapper>
      <Box>
        <Emoji>해피</Emoji>
      </Box>
      <Emoji>해피</Emoji>
    </Wrapper>
  );
}

export default App;

• 해당 부분에서 똑같이 Emoji 컴포넌트를 사용하지만 Box 컴포넌트의 자식으로 있는 경우에만 css가 적용되는 모습을 확인할 수 있다.
• 특정 컴포넌트만 자식으로 만들어 css를 적용하는 방법을 알아보았음