Tailwind2 [NEXT.js 14] 3. CSS 사용 2가지 방법 (css module 생생 / global.css : tailwind css) CSS 사용 방법 1. 첫번째 방법 : css module 사용 2. 두번째 방법 : global.css 사용 3. 파일의 위치 4. suspense & streamed Response를 이용한 세분화 로딩상태 관리상세 1. 첫번째 방법 : css module 사용: 일반적인 표준 css 이지만, css 파일에 특정한 이름을 지정함으로 특정 컴포넌트로 스코핑.=> module.css를 import 하면 그 파일들로부터 객체를 불러올 수 있다 import classes from './main-header.module.css';main-header.js (컴포넌트)에 적용할 css 파일을 경로 depth가 동일할 수 있게 생성해주고, import 해준다. 'classes' 라고 명명한 객체를.. 2024. 6. 14. [Front_Figma] 피그마 접근하기(1) 필요성 최근, 각종 플러그인을 사용해 피그마의 요소를 html, tailwind css, React 등으로 추출이 가능하다는 사실을 알게 됐습니다. 평상시 tailwind css로의 Front단 개발을 해왔던 저로서는, 반가운 소식이었습니다. 디자이너들이 다수 사용한다고는 들었으나 여전히 생소한 Figma를 사용 & 학습해보고자 글을 작성합니다. 접근 1. 피그마(Figma)란? (1) 정의 2. 피그마(Figma) 기능 3. 피그마 단축키 방법 1. 피그마(Figma)란? (1) 정의 피그마 (Figma)는 macOS 및 윈도우용 데스크톱 애플리케이션들에 의해 활성화되는 추가 오프라인 기능들을 갖춘 인터페이스 디자인을 위한 협업 웹 애플리케이션이다. 피그마의 기능 집합은 사용자 인터페이스(UI)와 사용.. 2023. 8. 28. 이전 1 다음
