Styled-Component(4) - Animation and Pseudo Selectors

Checkpoint 1

styled-component를 사용해서 css의 animation 기능을 넣어주고 싶을 때는 어떻게 하면 될까?

 

keyframes

css와 동일하게 keyframes를 사용해서 애니메이션을 구현할 수 있고, 컴포넌트 안에 animation : ${animation-name} 형식으로 넣으면 동작한다.

 

Checkpoint 2

Box 컴포넌트 안에 span 태그를 넣으려고 한다. 스타일을 적용하는 모든 태그들을 다 컴포넌트 처리 해줘야 하는걸까?

import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
`;

const Box = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 200px;
  background-color: tomato;
`;
const Span = styled.span`
  font-size: 30px;
`;

function App() {
  return (
    <Wrapper>
      <Box>
        <Span>😊</Span> // 이렇게 해야하는걸까?
      </Box>
    </Wrapper>
  );
}

export default App;

 

Pseudo Selectors

<Span /> 컴포넌트를 별도로 만들 필요 없이, Box 컴포넌트 안에 span{font-size:30px}를 작성해서 Box 컴포넌트 자식인 span 태그의 스타일을 작성할 수 있다.

span태그에 :hover, :active 등의 가상 선택자를 부여하고 싶을 때는 span{&:hover{font-size:70px} &:active{opacity:0}}처럼 span{ } 안에 &:를 이용하여 가상 선택자를 부여할 수 있다.

 

Checkpoint 3

box 안에 있는 span태그 와 box 밖에 있는 span태그 둘다 같은 스타일을 적용하고 box안에 있는 span태그만 가상 선택자 기능을 주고 싶을 때는 어떻게 해야할까? 그리고 이모지가 담긴 태그를 span말고 다른 태그로 변경하고 싶을 때 어떻게 하면 좋을까?

 

Pseudo Selectors with Component

span태그는 Emoji라는 컴포넌트로 만들어서 as 속성을 이용해서 태그명을 변경시킬 수 있고, Box 컴포넌트 내부에 ${Emoji}:hover {font-size:70px}을 입력하여 Box 컴포넌트 내부 Emoji 컴포넌트에만 가상선택자 및 스타일을 지정할 수 있다.