![]()
TailwindCSS에서 SCSS로 바꾸는 도중 문제가 발생했다.!! 근데 해결하고 보니 어처구니 없는 기초적인 실수라서 다시는 같은 실수를 하지 않기 위해 부끄럽지만 기록해보려 한다. 🚨 문제 발생 토글 버튼을 직접 구현하는 과정에서 css가 적용되지 않는 문제가 발생했다. 원래대로라면 체크박스 형식의 input 선택 유무에 따라 .btnInputBody 와 .btnInputBall의 속성이 바뀌어야 한다. 하지만 속성이 바뀌지 않았다..ㅜㅜ tailwindCSS로는 무난하게 구현했었는데 왜 문제가 발생했을까? import styles from "./input.module.scss" ; .btnInput { input{ display:none } input:checked { .btnInputBody{ ..
![]()
개요 Tailwind를 사용하던 중 아래와 같이 여러개의 카드 컴포넌트에 각각 다른 flex-basis를 줘야하는 일이 생겼다. 결론 : 객체 만들어 활용하기 나는 많은 속성을 주는 것이 아니였기 때문에 className 전체를 객체화 시켜서 활용하였다. const flexRow: IFlexRow = { 0: "h-auto w-auto", 0.2: "h-auto w-auto basis-1/5 ", 0.5: "h-auto w-auto basis-1/2 ", 0.8: "h-auto w-auto basis-4/5 ", }; 후에 props로 객체의 key 값을 받아 객체를 할당하였다. export default function Card({ title, children, basis }: ICard) { retu..
리액트에서 스타일을 입히는데 현재 가장 많이 쓰이는 기술은 styled components 이다. 우선 사용을 위해 설치를 해준다. npm i styled-components 스타일 컴포넌트 사용 전 우리가 흔히 사용하는 방법이다. function App() { return ( ); } 태그에 일일이 스타일 속성값을 넣어주거나 클래스명을 따로 부여하고 css파일에서 작업해야 한다. 같은 스타일을 입힌다고 했을 때 스타일 컴포넌트 사용하게 되면 아래와 같아진다. import styled from "styled-components"; const BoxOne = styled.div` background-color: tomato; width: 100px; height: 100px; `; function App(..
