styled-component
를 사용해서 css
의 animation
기능을 넣어주고 싶을 때는 어떻게 하면 될까?
css
와 동일하게 keyframes
를 사용해서 애니메이션을 구현할 수 있고, 컴포넌트 안에 animation : ${animation-name}
형식으로 넣으면 동작한다.
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;
<Span />
컴포넌트를 별도로 만들 필요 없이, Box
컴포넌트 안에 span{font-size:30px}
를 작성해서 Box
컴포넌트 자식인 span
태그의 스타일을 작성할 수 있다.
span
태그에 :hover
, :active
등의 가상 선택자를 부여하고 싶을 때는 span{&:hover{font-size:70px} &:active{opacity:0}}
처럼 span{}
안에 &:
를 이용하여 가상 선택자를 부여할 수 있다.
box
안에 있는 span
태그 와 box
밖에 있는 span
태그 둘다 같은 스타일을 적용하고 box
안에 있는 span
태그만 가상 선택자 기능을 주고 싶을 때는 어떻게 해야할까? 그리고 이모지가 담긴 태그를 span
말고 다른 태그로 변경하고 싶을 때 어떻게 하면 좋을까?
span
태그는 Emoji
라는 컴포넌트로 만들어서 as
속성을 이용해서 태그명을 변경시킬 수 있고, Box
컴포넌트 내부에 ${Emoji}:hover {font-size:70px}
을 입력하여 Box
컴포넌트 내부 Emoji
컴포넌트에만 가상선택자 및 스타일을 지정할 수 있다.