본문 바로가기

CSS2

[React] Css in js / Styled.component #1. Css-in-js / Styled.component 이거 왜 씀? 처음에 난 이거 왜 쓰는지 정말 몰랐다. 동적으로 스타일을 변경할때 쓰인다고 익히 들었지만 그것도 modules.css로 가능한것이었으니까 예로 import classes from '경로'; hello world 이런식으로도 충분하게 가능한 부분이어서 별 필요성을 못느끼던 찰나 컴포넌트에서 props로 전달하고 그 props의 값을 이용해서 css in js의 스타일을 변경 할 수 있다는 것을 발견.. 이는 굳이 상태 훅이나 따로 만들 필요없이 컴포넌트 내에서 css in js도 같은 props를 이용해서 css가 동적 할당이 가능하라는 뜻이다 (직관적이라는 뜻.) 이는 불필요한 로직이 필요가 없어지며, 또 내가 직접 클래스을 인에.. 2024. 2. 3.
[TailWind] React에 테일윈드 설치하기 #1 설치하기 기본적으로 CRA가 무조건 우선순위! create-react-app '내가 설정할 app 명을 터미널에 설치한 후에 아래 설치 명령어를 입력하자. //yarn yarn add - tailwindcss postCss autoprefixer //npm npm -tailwindcss postcss autoprefixer 여기서 postCSS 와 autoprefixer는 뭔데 왜 설치하는가 싶었는데 이유는 아래와 같았다. 'PostCSS' 는 Css를 변환해 주는 도구로 브라우저 호환성을 개선해주며, tailWind는 postCss 플러그인으로 구현되어 있으며, 'autiprefixer' 는 구형 브라우저에서 지원하지 않는 Css 문법을 반영이 가능하도록 --webkit-- 등을 자동으로 추가해 .. 2024. 2. 3.