드리프트의 세상 사는 이야기
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
Tailwind CSS 강좌 2편 - 반응형 Sidebar Navbar 만들기

Tailwind CSS 강좌 2편 - 반응형 Sidebar Navbar 만들기

안녕하세요? 얼마전부터 Tailwind CSS 강좌를 이어 가고 있는데요. 처음에는 어려웠지만 계속 도전해 보니까 예전에 배웠는 HTML + CSS 지식이 다시금 살아나서 좋았습니다. Tailwind CSS 의 장점은 본인의 상상이 그대로 UI로 이어진다는데 있는거 같습니다. 앞으로 Tailwind CSS를 이용한 나만의 UI 라이브러리를 구축해 볼까 합니다. 그래서 지난번에 만들었던 Top Navbar 글의 후속편인데요. https://cpro95.tistory.com/531 Tailwind css 반응형 메뉴 navbar 만들기 안녕하세요? 오늘은 지금까지 쭉 관심있게 지켜본 Tailwind CSS 에 대해 공부해 볼까 합니다. Tailwind CSS 가 최근 가장 핫한 CSS 유틸인데요. React..

  • format_list_bulleted 코딩/React
  • · 2021. 10. 13.
  • 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

티스토리툴바