@layer components { .btn { @apply h-10 w-36 rounded-md bg-[#f8f9fa] text-sm text-gray-800 transition-shadow hover:shadow-md hover:ring-1 hover:ring-gray-200 focus:outline-none active:ring-gray-300; } .link { @apply cursor-pointer hover:underline; } .header-icon { @apply cursor-pointer rounded-full bg-transparent p-2 text-4xl hover:bg-gray-200; } } 이런 형식으로 작성하면 btn이라는 클래스를 적용했을때 btn {} 안에 있는 모든 클..
🐕 easy to start https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually Dark Mode - Tailwind CSS Using Tailwind CSS to style your site in dark mode. tailwindcss.com tailwind 공식 문서를 참고하면서 작성합니다. 로컬스토리지를 활용한 state 작성 및 기본적인 활용을 실습해보겠습니다. 공식문서 쪽의 설명이 더 좋으신 분들은 그 쪽을 참고해주시면 될 것 같습니다. 본 포스트는 타입스크립트 , 리액트를 동시에 사용하는 환경을 초점으로 작성되었습니다. 하지만 실제로 타입을 많이 사용하진 않으니 그대로 js 환경에 적용해도 크게 무리는 없습니다.. 👻dark..
제가 자주 사용하는 속성들을 간단히 정리합니다. Animation transition all transition 효과 duration 100 , 200 , 300 전환 기간 delay 100 150 전환 지연 rotate 0~6 요소 회전 ease-in-out ease-in-out 애니메이션 처리 skew skew-(x or y)-1 요소 기울이기 요소 가운데 정렬 flex display:flex justifycenter justifycontent-center itemscenter alignitem-center 자주 사용하는 디자인 속성 rounded md, lg , xl ,2xl etc border radius border border-(n*2) border border t,r,b,l top, left..
🐕 케이크 먹기 보다 쉽다https://tailwindcss.com/docs/guides/vite Install Tailwind CSS with Vite - Tailwind CSSSetting up Tailwind CSS in a Vite project.tailwindcss.com공식 docs의 설명이 매우 친절해서 따라가기만 하면 됩니다. 따라서 한번 해보시면 매우 편할거에요npm create vite@latest cd 만들어진폴더이름 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p개발종속성으로 설치해줍니다. tailwindcss와 함께 postcss autoprefixer를 추가적으로 설치해줍니다. https://post..
css border 말풍선? css에서는 border속성을 통해서 말풍선을 만들수가 있습니다. border 속성을 적용한 개체에 width,heigth값이 극단적으로 낮은 상태에서 border값만 키워주게되면 이런식으로 테두리가 세모모양이 되는것을 이용해서 구현하는 방식입니다. 그리고 말풍선모양을 만들때 필요하지 않은 border 라인들은 색상을 transparent(투명)하게 설정해주면 되는것이죠 https://projects.verou.me/bubbly/ Bubbly — CSS speech bubbles made easy projects.verou.me 꽉찬 말풍선은 잘 만들어진 사이트들이 있었습니다. 가장 괜찮았던 사이트가 위 bubbly라는 사이트였는데 사이트 디자인이 직관적이어서 금방 사용할 수..
