[React] Styled Component - 4 animation(keyframes), styled 컴포넌트 안의 다른 element 선택 적용

 

Styled Component를 이용해서
1. 애니메이션을 적용해보자
2. Box 컴포넌트에서 다른 태그를 선택해서 스타일을 적용해볼 수 있고, 호버(active...등등) 효과도 추가해보자
3. 내가 만든 컴포넌트를 넣어서 태그에  종속되지 않도록 만들어 줄 수 도 있다. 
4. Box 컴포넌트 안에 있는 emoji태그와 밖에있는 emoji태그를 구분해보자

이번엔 애니메이션을 적용해보자

- 코드 1

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

//styled-components를 사용할때에는 작은 따옴표, 큰따옴표가 아닌
//backtick을 사용해야한다.
const Father = styled.div`
  display: flex;
`;

const rotationAnimation = keyframes`
  from{
    transform: rotate(0deg);
  }to{
    transform: rotate(360deg);
  }`;

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation: ${rotationAnimation} 1s linear infinite;
`;

function App() {
  return (
    <Father>
      <Box />
    </Father>
  );
}

export default App;

 

- 코드 2

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

//styled-components를 사용할때에는 작은 따옴표, 큰따옴표가 아닌
//backtick을 사용해야한다.
const Father = styled.div`
  display: flex;
`;

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

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation: ${rotationAnimation} 1s linear infinite;
`;

function App() {
  return (
    <Father>
      <Box />
    </Father>
  );
}

export default App;

 이렇게 적용하면 되는데 주의할 점은 Box컴포넌트보다 애니메이션이 먼저 선언 되어야한다.

---

 

2. 위 코드 Box 컴포넌트에서 다른 태그를 선택해서 스타일을 적용해볼 수 있고, 호버(active...등등) 효과도 추가할 수 있다.

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

//styled-components를 사용할때에는 작은 따옴표, 큰따옴표가 아닌
//backtick을 사용해야한다.
const Father = styled.div`
  display: flex;
`;

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

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

function App() {
  return (
    <Father>
      <Box>
        <span>안녕하세요</span>
      </Box>
    </Father>
  );
}

export default App;

---

3. 여기서 Span으로 말고 내가 만든 컴포넌트를 넣어서 태그에  종속되지 않도록 만들어 줄 수 도 있다. 

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

//styled-components를 사용할때에는 작은 따옴표, 큰따옴표가 아닌
//backtick을 사용해야한다.
const Father = styled.div`
  display: flex;
`;

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

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

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

function App() {
  return (
    <Father>
      <Box>
        <Emoji>안녕하세요</Emoji>
      </Box>
    </Father>
  );
}

export default App;

---

4. Box 컴포넌트 안에 있는 emoji태그와 밖에있는 emoji태그를 구분해보자

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

//styled-components를 사용할때에는 작은 따옴표, 큰따옴표가 아닌
//backtick을 사용해야한다.
const Father = styled.div`
  display: flex;
`;

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

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

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

function App() {
  return (
    <Father>
      <Box>
        <Emoji>안녕하세요</Emoji>
      </Box>
      <Emoji>바깥</Emoji>
    </Father>
  );
}

export default App;