드리프트의 세상 사는 이야기
close
프로필 배경
프로필 로고

드리프트의 세상 사는 이야기

  • 분류 전체보기
    • 자동차
    • 연예, 스포츠
    • 영화
    • 경제, 금융
    • 테크, 가전
    • 사용기
    • 축구
    • 사회, 환경
    • 건강, 의학
    • 지역, 교통
    • 시사, 정치
    • 게임
    • 코딩
      • React
      • Javascript
      • Typescript
      • GoLang
      • C와 C++
      • 라즈베리파이
  • 홈
  • 자동차
  • 연예
  • 영화
  • 경제
  • 테크
  • 탐방
Remix Framework에 TailwindCSS Dark Mode(다크모드) 적용하기

Remix Framework에 TailwindCSS Dark Mode(다크모드) 적용하기

Remix Framework TailwindCSS Dark Mode, 다크 모드 안녕하세요? Remix Framework에 TailwindCSS를 적용하는 방법을 저번에 배웠는데요. https://cpro95.tistory.com/674 Remix Framework에 TailwindCSS 적용하기 안녕하세요? 오늘은 Remix 프레임워크에 TailwindCSS를 적용시켜 보겠습니다. 먼저, 지난 시간까지 만든 remix-tutorial 폴더에서 다음과 같이 tailwindcss와 concurrently를 설치해 보겠습니다. npm i -D tailwin.. cpro95.tistory.com 오늘은 다크 모드 적용에 대해 알아보겠습니다. TailwindCSS의 다크 모드의 작동원리는 즉, html 태그에 ..

  • format_list_bulleted 코딩/React
  • · 2022. 4. 8.
  • textsms
Remix Framework에 TailwindCSS 적용하기

Remix Framework에 TailwindCSS 적용하기

안녕하세요? 오늘은 Remix 프레임워크에 TailwindCSS를 적용시켜 보겠습니다. 먼저, 지난 시간까지 만든 remix-tutorial 폴더에서 다음과 같이 tailwindcss와 concurrently를 설치해 보겠습니다. npm i -D tailwindcss@latest concurrently 이제 tailwindCSS init을 실행시켜 볼까요? npx tailwindcss init Remix 프레임워크에서는 postcss가 필요 없어 뺐습니다. 이제 tailwind.config.js 파일을 아래와 같이 고쳐볼까요? module.exports = { content: ["./app/**/*.{ts,tsx,js,jsx}"], theme: { extend: {}, }, plugins: [], }; ..

  • format_list_bulleted 코딩/React
  • · 2022. 3. 1.
  • textsms
TailwindCSS 3.0과 Next.JS에서 Dark 모드 적용하기

TailwindCSS 3.0과 Next.JS에서 Dark 모드 적용하기

안녕하세요? 오늘은 TailwindCSS 3.0과 Next.JS에서 다크 모드(Dark Mode) 적용하는 방법에 대해 알아보겠습니다. 먼저, 빈 템플릿을 설치해 볼까요? npx create-next-app tailwind-dark-mode 열심히 설치하고 있네요. 이제 TailwindCSS 최신판을 설치해 봅시다. cd tailwind-dark-mode npm i -D tailwindcss@latest postcss@latest autoprefixer@latest TailwindCSS는 postcss와 autoprefixer 패키지가 필요합니다. 같이 설치해주셔야 합니다. 그다음에 TainwindCSS 초기화 명령을 실행시킵시다. npx tailwindcss init -p TailwindCSS 초기화 ..

  • format_list_bulleted 코딩/React
  • · 2022. 2. 25.
  • textsms
Supabase로 로그인 구현하기 with NextJS 1편

Supabase로 로그인 구현하기 with NextJS 1편

안녕하세요? 최근 NextJS로 여러가지 로그인 구현 웹앱을 만들려고 노력하고 있는데요. 최근에는 NextAuth와 Prisma를 이용해서 카카오 로그인, 네이버 로그인, 구글 로그인 등 다방면으로 구현해 봤습니다. 근데 본격적인 웹앱 개발을 하려면 DB에 대한 서버 문제가 걸리는데요. 이에 대한 해결책으로는 Firebase 를 쓰는 방법이 있습니다. 웹 관련 애플리케이션 제작에 있어 모든 기능을 제공해 주는 Firebase인데요. 구글이 인수해서 키우고 있는 토탈 서비스인데요. 오늘은 Firebase 말고 이에 대항해서 새로 나온 서비스인 Supabase를 이용해서 로그인을 구현해 볼까 합니다. https://supabase.com/ The Open Source Firebase Alternative |..

  • format_list_bulleted 코딩/React
  • · 2022. 1. 5.
  • textsms
Tailwind css 반응형 메뉴 navbar 만들기

Tailwind css 반응형 메뉴 navbar 만들기

안녕하세요? 오늘은 지금까지 쭉 관심있게 지켜본 Tailwind CSS 에 대해 공부해 볼까 합니다. Tailwind CSS 가 최근 가장 핫한 CSS 유틸인데요. React 로 UI 디자인은 보통 Material-UI, Bootstrap, Ant Design 등으로 많이 만드는데요. 최근에는 좀더 가벼운걸 찾는 추세라 Tailwind CSS 가 뜨고 있습니다. Tailwind CSS 는 일반적으로 CSS 헬퍼 유틸(Helper Utilities)이라고 하는데요. 예를 들어 일반적으로 CSS로 마진을 부여할 때는 margin-right : "20px" 이렇게 쓰는데요, Tailwind CSS에서는 좀 더 간편하게 줄여서 다음과 같이 씁니다. mr-10 헬퍼 유틸이라 줄임말이 많습니다. 그래서 처음에는 헷..

  • format_list_bulleted 코딩/React
  • · 2021. 10. 10.
  • textsms
  • navigate_before
  • 1
  • navigate_next
세로형
태그
  • #제네시스
  • #BMW
  • #현대차
  • #넷플릭스
  • #기아
  • #자바스크립트 강좌
  • #삼성전자
  • #현대자동차
  • #전기차
  • #자동차 디자인
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바