joycie416 님의 블로그

1. Transition위 이미지의 tooltip, 즉 까만창이 파란색 버튼을 누르면 보였다 사라졌다 하게 만들고 싶었다. 이를 Tailwindcss로 구현하려면 어떻게 하면 될까? 이때는 `trasition`과 `duration`으로 위 효과를 나타내는 방법을 정리해보려고 한다. 위 컴포넌트 내용은 아래와 같다. `isVisible`에 따라 투명도를 조절하려고 한다.const InfoTag = ({ isVisible }: { isVisible: boolean }) => { return ( 도로명 주소를 입력해 주세요. ex. 서울특별시 중구 중림로 37 (중림동) );}; 그러면 transition은 내용의 가장 상위 컴포넌트에 적용해 하위 ..

프로젝트를 진행할 때 자주 사용하게 되는 색들이 있다. 그것들을 항상 헥사코드를 찾아서 작성하기에는 너무 힘들다. 따라서 tailwind css에서는 기본으로 주어진 색상처럼 사용할 수 있도록 커스터마이징할 수 있는 기능을 지원한다. 먼저 `tailwind.config.ts` 파일에 들어가보자. 그러면 얼추 아래와 같은 세팅이 작성되어 있다. (나는 create-next-app을 통해 Next.js의 App router를 사용하고 tailwind를 사용한다고 설정했으므로 자동으로 content를 작성해주었다.)import type { Config } from "tailwindcss";const config: Config = { darkMode: ["class"], content: [ "./src..

이번 프로젝트의 css는 모두 Tailwindcss를 사용하기로 했다. 처음이라 모든 속성을 홈페이지에서 검색해서 써야하는 번거로움이 있었지만, 적응되니 생각보다 쓸만했다.! 오늘은 아주 기초적인 사용법을 정리해보려고 한다. 1. Arbitrary value 적용하기먼저 기본적으로 height를 적당히 적용하려면 홈페이지에서 height를 검색해서 주어진대로 사용해도 된다.하지만 주어진 값 외엔 제대로 적용되지 않는 불편함이 있다. 이때 해당 페이지를 맨 아래로 내리면 arbitrary value를 사용할 수 있는 방법을 알려준다. 이렇게 크기를 임의로 입력하는 방법은 대체로 다 적용된다. Padding도 margin도 다 가능하다. 즉 `width: 30px; height; 80px;` 짜리 div를 ..