scss
scss keyframe 적용법
일반적인 방법으로는 scss에 @keyframe을 적용할 수 없었다. @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; animation: #{$str}; } @include keyframes(fade) { 0% { opacity: 1; } 100% { opacity: 0; } } 위와같이 mixin과 include를 활용해서 넣어주어야 한다. 위 예시는 fade를 적용시켜본 경우이다. 그 이후, class-name { @i..
16_리액트_컴포넌트스타일링
컴포넌트를 스타일링 하는 가장 기본적인 방법은 아래처럼 css를 import하여 사용하는 것이다. import './App.css'; Sass(Syntactically awesome stylesheets) 이전에 배웠던 Sass와 Scss를 이용하여 간단한 프로젝트를 만들 것이다. Sass보다 Scss가 훨씬 편리하기에 Scss를 사용해보도록 하겠다. 먼저 아래와 같은 파일구조를 만든다 //Button.js import React from 'react'; import './Button.scss'; function Button({children}) { return ( {children} ); } export default Button; //App.js import React from 'react'; imp..