styled-components
-
Styled-Components 의 애니메이션 과 Pseudo Selector 를 배워보자!React/Styled-Components 2023. 2. 20. 21:34
📌 css 에서 keyframe 을 사용한 animation 은 styled-components에서 어떻게 구현할까? ...(중략) const animation1 = keyframes` from { transform:rotate(0deg); border-radius: 0px; } to { transform:rotate(360deg); border-radius: 100px; } `; ...(중략) const AnimationBox1 = styled.div` height: 200px; width: 200px; background-color: black; animation: ${animation1} 10s linear infinite; `; ...(중략) 📌 styled-components 안에서 pseudo..
-
Styled-Components 리액트 스타일 컴포넌트 props 와 extendingReact/Styled-Components 2023. 2. 20. 17:50
📌 스타일 컴포넌트에서 반복되는 코드를 줄일 수는 없는걸까? const BoxOne = styled.div` background-color: red; width: 100px; height: 100px; `; const BoxTwo = styled.div` background-color: blue; width: 100px; height: 100px; `; 📌 해결방안 : props 로 변수를 지정해주며 styled( ) 로 확장할 수 있다. ...(중략) const Box = styled.div` display: flex; align-items: center; background-color: ${(props) => props.bgcolor}; width: 100px; height: 100px; `; con..
-
Styled-Components / React 리액트 스타일 컴포넌트 공부하기React/Styled-Components 2023. 2. 20. 16:47
📌 설치하기 vscode 터미널에 npm i styled-components js file에 임포트해준다 : import styled from "styled-components" 📌 사용하기 : Html + CSS vs Styled-Components 비교 import styled from "styled-components"; const Father = styled.div` display: flex; `; const BoxOne = styled.div` background-color: red; width: 100px; height: 100px; `; const BoxTwo = styled.div` background-color: blue; width: 100px; height: 100px; `; cons..