blackbearwow blackbearwow

- react에 tailwindcss적용하기더보기1. 프로젝트 생성2. tailwindcss vite버전 설치npm install tailwindcss @tailwindcss/vite3. vite.config.ts에 플러그인 추가import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})4. css파일(index.css나 App.css) 에 tailwindcss 가져오기@import "tailwindcss";5. cdn이나 빌드된 css파일 html로 첨부하기6. 자동완성기능은 vscode에 Tailwind C..

고민더보기css는 자유도가 너무 높다. 내가 원하는 대로 디자인이 가능한 것이다. 하지만 내가 디자인을 정하고 css코드를 치려고 하면 굉장히 어렵다. 내가 디자인을 정하는 것 부터가 문제이다.어떻게 디자인을 해야 접근성이 좋을지, 글자가 너무 크지도 않고 작지도 않을지, 모바일에서와 pc에서 사용경험이 다를지, 사용자 경험이 직관적일지, 일관성 있는 색상 요소들... 너무나 많은 생각을 해 시작부터 난관에 빠지는 것이다. 게다가 내가 생각한 디자인을 css코드로 만들 수 있는 디자인인지조차 생각해보면서 하면, 디자인을 하려고 시작할 때부터 스트레스를 엄청 받는 것이다. 아무 것도 모를 때 알면 좋은 것들더보기디자인 도구 활용(Figma 등): css코드로 구현할 수 있을지는 생각하지 말고 일단 시각화에..

css 문법Selector 중괄호 안에 Property:Value로 이루어져 있다. CSS selectorsSelector예시예시 설명.class.introclass="intro"인 모든 요소를 선택한다..class1.class2.name1.name2name1과 name2가 둘다 class속성에 있는 모든 요소를 선택한다..class1 .class2.name1 .name2name1을 class로 가진 요소의 자식으로 name2를 class로 가진 모든 요소들을 선택한다.#id#firstnameid="firstname"인 요소를 선택한다.**모든 요소를 선택한다.elementp모든 요소를 선택한다.element.classp.introclass="intro"인 요소를 모두 선택한다.element,elem..

Bootstrap은 강력한 프론트엔드 툴킷이다설치패키지 매니저로 설치하기 (아마도 설치할 일은 없을것이다. 프론트에서 사용하니까)npm install bootstrap@5.3.3CDN(Content Delivery Network)를 이용해 포함하기link태그는 head태그 내부에 넣어준다.script태그는 직전에 넣어준다.COLORtheme colorscolor modev5.3.0부터 data-bs-theme속성으로 다크모드, 라이트모드 등을 사용할 수 있게 되었다. 전체 html 색깔을 적용하고싶다면 table, dropdown에 색깔을 적용하고 싶다면를 하면 된다.text colors.text-muted, .text-primary, .text-success, .text-info, .text-warni..