React/Style (2) 썸네일형 리스트형 Styled Components에서 keyframes의 prop이 작동하지 않을 때 해결 방법 styled componets의 컴포넌트 안에 애니메이션을 위한 keyframes 코드를 넣으면 잘 작동한다. const StyledContainer = styled.div` @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } `; 그러나 keyframes 안의 값을 바꿔야 할 일이 생겼을 때 잘 작동하지 않는 문제가 생겼다. 위 방식이 정상적인 방법이 아니기 때문이다. styled components에서 keyframes를 사용하려면 아래와 같이 해야 한다. import styled, { keyframes } from 'styled-components'; const moveR.. CSS Module CSS Module을 이용하면 각 모듈에서만 불러온 css 파일이 적용되기 때문에 클래스 이름의 중복 걱정 없이 css 코드를 작성할 수 있다. 결과적으로 보다 간결하게 class 이름을 지을 수 있다. npx create-react-app 명령어로 만든 프로젝트에서 사용할 수 있다. .css 파일이 아닌 .module.css 확장자의 파일을 만들고 아래처럼 styles라는 변수로 불러와서 사용한다. App.js import styles from './App.module.css'; function App() { return ( hello world ); } export default App; App.module.css .first { color: dodgerblue; } .second { color: p.. 이전 1 다음