Tailwind는 유틸리티 우선(Utility-First) css 프레임워크이다Next.js 를 사용하면 install 시 Would you like to use Tailwind CSS? No / Yes tailwind 설치 여부를 물으며 Yes를 선택 시 자동으로 설치 된다. 하지만 그 위에도 설치 할 수 도 있기 때문에 장단점 부터설치, 사용법 까지 정리하고자 한다. 장점bundle 사이즈가 작다.css 사용을 위한 네이밍을 하지 않아도 된다.작성해야 하는 코드의 길이가 확연하게 짧아진다.반응형 스타일링을 적용하기 용이하다.단점html 코드가 장황하고 복잡하다고 느껴집니다.익히려면 시간이 오래 걸린다. 패키지 설치 Installation - Tailwind CSSThe simplest and fast..

현재 개인 블로그를 만들면서 다크모드를 next-themes 라는 라이브러리를 사용해서 적용해보았다.개인 블로그 css를 tailwind로 적용했기 때문에 tailwind 방식으로 진행했다.tailwind.config.js 수정config중 darkMode를 ”class” 로 바꾼다.“class”로 수정해야 수동으로 어두운 모드 전환할 수 있다.기본형은 “media” 로 운영 체제 기본 설정에 의존한다.import type { Config } from "tailwindcss";const config: Config = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", ..

svg 파일에 들어가면 이미지가 svg 태그랑 path 태그로 이루어져 있다.svg 에서 변경 방법svg에 직접 색상을 바꾸고 싶으면 path태그에 style="fill: 색상 값;" 또는 fill="색상 값” 이렇게 넣어주면 된다.  style   fill   css 에서 변경 방법css 로 색상을 바꾸고 싶으면 filter로 값을 주면 된다.아래 링크를 통해 쉽게 원하는 색상에 대한 값을 구 할 수 있다. CSS filter generator to convert from black to target hex colorAdded License 2022-07-15; this is retroactive for whatever help that is. 0-clause Free BSD License Perm..

Emotion으로 다크모드 적용해보았다. theme 색상적용먼저 styles 폴더 하위에 theme 전용 파일인 Theme.ts를 만들고 라이트 / 다크 모드에 대한 색상 값을 지정해줬다.// styles/Theme.tsimport { Theme } from "@emotion/react";interface VariantType { [key: string]: string;}export const colors: VariantType = { white: "#fff",};export const lightTheme: Theme = { mode: { text: "#202020", background: "#F5F7FC", backgroundMain: colors.white, borderCo..

영역에 비해 글자 수가 넘치면 ( "..." ) 로 말줄임표를 사용하는 경우가 있다. javascript로 일정글자 수 이상일 때 slice 함수를 활용 할 수도 있지만 css로도 제어 말줄임표를 줄 수 있다. 아래 코드와 이미지는 글자들이 width값에 맞춰 자동으로 줄바꿈이 이뤄지고 있는 상태이다. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. The generated Lorem Ipsum is therefore always free from repetition, inje..

useState의 상태 값이 css에 적용 해야 될 때가 있다.문제는 tailwind에서 “ w-[${width}px] “ 이런 식으로 지정하면 class는 정상적으로 render되었지만, css가 적용되지 않는다.이러한 경우 **style(인라인 스타일)**을 이용해야 한다.한 개 이상의 스타일을 지정해야 할 경우 { } 안에 다 적용하면 된다. style(인라인 스타일) export default function Item() { const [imageSize, setImageSize] = useState({ width: 100, height: 100 }); const containerStyle = { height: imageSize.height width: imageSize.wi..

tailwind 폰트 적용하는 방법styles 폴더 하위에 fonts폴더에 notoSansKR.css 파일 생성 후  font-face 붙여놓는다// notoSansKR.css@font-face { font-family: 'NotoSansKR'; font-weight: 100; font-style: normal; src: url('/fonts/NotoSansKR-Thin.ttf') format('truetype');}@font-face { font-family: 'NotoSansKR'; font-weight: 200; font-style: normal; src: url('/fonts/NotoSansKR-ExtraLight.ttf') format('truetype');}@font-face {..

emotion은 css-in-js (JavaScript코드에서 CSS를 작성하는 방식) 라이브러리 중 하나로 다음의 특징이있다.자동적으로 vendor-prefix 를 붙여준다.기본적으로 고유한 이름을 생성한다.JavaScript와 CSS사이에 상수와 함수를 쉽게 공유할 수 있다.React 스타일 컴포넌트로 사용할 수 있는 것CSS 로드 우선 순위 이슈를 해결할 수 있다javascript runtime에서 필요한 CSS를 동적으로 만들어 적용한다. 패키지 설치 npm install --save @emotion/react// styled 방식 사용할시npm install --save @emotion/styled// 스타일을 압축하고 끌어 올려 스타일을 최적화하고 // 소스 맵과 레이블을 사용하여 더 나은 개..