본문 바로가기
반응형

Development/CSS | SCSS | SASS13

TailwindCSS SVG Icon 사이트 모음 찾기에 지쳐서, 정리를 해놔야지 겠다 싶었는데 이제서야 한다;; https://www.mingcute.com/ MingCute Icon _ Carefully Designed Icon Library www.mingcute.com https://remixicon.com/ Remix Icon - Open source icon library remixicon.com https://basicons.xyz/ Basicons Basic icons for product design & development basicons.xyz https://pixelarticons.com/ Pixelarticons 480 open-source line pixel-art style icons, in one color and made .. 2024. 1. 11.
[Tailwindcss] 클래스 그룹화 tailwindcss 를 사용하다 보면 현란한 유틸리티 클래스들에 눈이 쾡 해지는 경험을 하게 됬다. 생산성이 너무 좋은데 추후에 가독성이 떨어짐이 있었는데 보니 css 를 그룹화 할 수 있게 되었다. Before Blog Name JKUN.NET 이렇게 위와 같이 있으면 읽기가 빡씨다.. 그런데 이것을 그룹화 시키면 보다 더 구조화하고 가독성을 향상시키며 간단하게 사용할 수 있다. CSS @layer utilities { .table-basic { @apply min-w-full text-xs divide-y divide-gray-200 dark:divide-gray-700 } .table-basic thead { @apply bg-gray-50 dark:bg-slate-800 dark:text-gra.. 2023. 10. 18.
CSS 스크롤바 (Custom) 스크롤바에도 CSS 속성을 부여할 수가 있다. 현재 디버깅용으로 데이터 확인하기 위해 엘리먼트만들었는데.. 디버깅용이라 해도 이뻤으면 좋게엤다~ CSS 코드 /* Debugging Element */ [data-storage] { opacity:0; position:fixed; right:-9999999px; top:-9999999px; z-index:9999999 } [data-storage][debug] { opacity:.8; right:10px !important; top:10px !important; width:200px; height:200px; overflow:auto; background-color:rgab(15,82,144,.54) !important; color:#fff !importa.. 2021. 6. 8.
css pinch zoom 찾다보니 까먹을까 포스팅 https://googlechrome.github.io/samples/touch-action/ 2018. 8. 28.
반응형