스타일링 라이브러리

styled-component 1-1, 2

CSS in JS → CSS의 문제점을 해소
해결책 → 스타일을 style 태그로 분리
사용법(Template literals) → styled.{element}``
styled(스타일드 컴포넌트) → 상속

styled-component 2-1, 2

& → 가상 엘리먼트/ 가상 선택자
Global Stype → 전역 스타일
attrs → props addition
keyframes/ ThemeProvider → Animation/ Theme

emotion 1

react에 특화 → @emotion/ react
css props → jsx를 대체함
styled components → styled-component + @
composition → css 안에서 css 사용

emotion 2

기능 → Fallbacks, &, Global, keyframes
styled-components → 서로 점점 유사해짐
trend → emotion이 우세한 듯
사이즈/ 속도 → emotions이 우세한 듯

sass 1

전처리기 → CSS의 확장
Sass/ Scss → 보다 CSS와 유사한 SCSS
사용 → variables/ modules/ mixin/ extend

sass 2

syntax → 언어처럼 자체 syntax가 있음
Interpolation → #{ } 값을 주입(마치 ${})
values/ functions → 프로그래밍 언어스러움