개발 노트

1. react 프로젝트 만들기npm create vite@latest . -- --template react. 대신 원하는 프로젝트 명 을 가진 directory 생성가능latest 대신 원하는 버전 지정react 대신 vue나 기타 template 지정 2. tailwind 설치  공식문서>> https://tailwindcss.com/docs/installation/using-vitenpm i tailwindcss @tailwindcss/vite  3. vite.config.js 설정import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'import react from '@vitejs/plugin-react'// ..

https://inpa.tistory.com/entry/%F0%9F%8C%9F-css-where-is-has-not 🌟 CSS 선택자를 모던하게 :where() / :is() / :has() / :not():where() 가상 선택자 :where 의사 클래스 선택자는 css 코딩할때 선택자의 중복을 줄이는 데 도움이 되는 녀석이다. 예를들어 다음과 같이 여러 엘리먼트 안에 있는 anchor 태그에 hover 효과를 주기위inpa.tistory.com

보통 & 기호는 현재 선택한 요소를 나타냅니다. &::는 이러한 기능을 확장하여 부모 요소에 스타일을 적용하거나 조작할 수 있게 합니다. .button { background-color: blue; &:hover { background-color: red; } } 위의 코드에서 &:hover는 .button 요소에 대한 hover 상태를 나타냅니다. 이때 &는 .button을 나타냅니다. .button { background-color: blue; &.active { background-color: green; } } 위의 코드에서 .button.active는 .button의 자식으로 .active 클래스가 있는 경우에 적용됩니다. 이때 &는 .button을 나타내며, &.active는 .button.a..

간격은 기준을 잡고 기준에서 * 또는 + 해서 사용 ex) gap: 8px A에서는 gap B에서는 gap*2 C에서는 gap+4

SCSS에서 $변수명= 주고싶은 내용 을 작성하면 원하는 원하는 곳에서 속성: $변수명; 으로 사용가능 // new_main_body $backgroundColor: #f1f5fa; $gap: 20px; .new_content_container { background-color: $backgroundColor; padding: $gap; }

antd의 table css를 바꾸기 위해 기본 선택자를 사용하여 변경하면 원활히 변경되지 않는다. antd의 css 변경을 위해서 antd에서 각 태그에 지정한 class이름을 참조하여 변경해야한다. 예) table -> .ant-table