반응형 Tailwind CSS 애니메이션 사용법, 커스터마이징 "CSS로 해결 가능하다 생각되는 것은 웬만하면 CSS로 처리하는 것이 좋다" Tailwind CSS에선 애니메이션 중 가장 일반적이고 자주 쓰이는 것들 몇개가 내장되어 있다. 또한 내장된 애니메이션 속성을 변경할 수도 있고, 애니메이션을 추가로 만들 수도 있다. 먼저 내장된 애니메이션을 살펴보고 다음 방법들을 알아보자. Spin Animation 로딩 화면에 자주 쓰이는 기본적인 회전(spin) 애니메이션이 내장되어 있다. Code animation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } Ping Animation 알림 배지에 유용하게 쓰일.. 2022. 4. 8. Tailwind CSS 사용법, 장점과 단점 개인적으로 tailwindcss에 대해 말하는 사람들이 늘기 시작했고 호기심이 생겼다. 그동안 미루고 미뤘던 개인 프로젝트에 적용 해보았는데 대만족을 했다. CSS를 사용하면서 느꼈던 문제들, 불편한 점들..아래와 같이 고민을 하고 있고 공감이 된다면, 많은 사람들이 tailwindcss를 통해 해결하길 바란다. 기존 CSS의 문제점 명시도(Specificity) MDN에서 설명하는 명시도란 다음과 같다. 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다. CSS 선택자(selector)를 통해 명시도를 증가 시키고 우선순위를 결정한다. 여러 스타일들이 쌓이고, 새로운 스타일을 덮어쓰.. 2022. 1. 18. 이전 1 다음 반응형
