겸이네~

tailwind를 사용하던 중 오랜만에 slide animation을 구현할 일이 생겼다. 신규 beta launching 한 사이트 navigation에 text sliding 이다. 우선 거두 절미 tailwind에 custom animation은 tailwind config에서 이런식으로 설정 해주면 된다.. 근데.. 마우스를 올리면 해당 animation을 paused 시키고 싶었다. 찾아보니 css property 중에 animation-play-state 라는 것이 존재 했다. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state animation-play-state - CSS: Cascading Style Sheets |..

-- 기록용 --- tailwind css를 사용하며 input number에 화살표를 없애고 사용하는 것을 default로 설정하고 싶어졌다. 알아보던 중 tailwind Css에서 사용자 정의 Css 규칙을 추가하는 경우 가장 쉬운 방법은 존역 css에 style을 추가하는 것이다. @layer라는 지시문을 이용해서 tailwind의 base, components, utilities 계층에 스타일을 추가할 수 있다. 이런식으로

이번에 회사에서 새롭게 들어가는 커스터피아 웹페이지 프로젝트에서는 기존에 사용했던 css in js인 styled component 를 최대한 배제 하고 utility first인 tailwind css frame work을 사용하기로 결정 되었다. (새로 사용할 stack은 nextjs & reacQuery & tailwindcss & recoil 등등이다) 뭐 순전 내가 제안한 스택들이지만 tailwindf를 사용한 계기는 이렇다. 기존 styled-component는 아주 좋았다. 솔직히 그냥 써도 무방하다. 근데 한가지 단점을 느낀게 간단한 태그 하나 추가해서 box를 잠깐 조정 해줘야 한다거나 할때 마다 css 컴포넌트를 만들어줘야 하는 단점이 있었다. 뭐 그냥 css in html로 tag하나..

필자는 em과 rem이 정확히 어떻게 쓰이는지 모르고 그동안 써왔는데! 오늘 한가지 알게되었다. rem 은 body에 font-size를 종속받아 비율이 결정된다 예를들어 body { font-size: 10px } 이라면 어떤 box의 margin을 1rem으로 주게된다면 margin이 상하좌우 10px씩 들어가고 2rem이라면 20px씩 들어간다. 자 그럼 em은? 해당 박스의 폰트사이즈이다. body에 10px로 설정되어 있더라도 해당 박스의 font-size가 20px이라면 1em은 20px이고 2em은 40px이 되는 것이다. mdn을 한번이라도 살펴봤다면 편했을텐데 ㅠㅠ

https://developer.mozilla.org/ko/docs/Web/CSS/color_value - CSS: Cascading Style Sheets | MDN CSS 자료형은 sRGB 색 공간의 한 색을 표현하며, 추가로 알파 채널 투명도 값도 가질 수 있어 자신이 가리키는 색상과 배경이 어떻게 합성되어야 하는지 지정할 수 있습니다. developer.mozilla.org react연습을 하던중 잘 사용하지 않던 transparent 키워드를 사용했는데 이게 무엇인지 찾아보았다. 기본적으로 transparent라는 말은 투명도이다. color 속성에서 사용되며 기존에 필자는 거의 opacity를 사용했다. 또는 rgba(r,g,b,a)로 사용했는데 color에 transparent라는 키워드를 ..

6번째 챌린지한 결과물이다~ 생각보다 오래 안걸렸다.. 이번에도 기분좋게 내 작품이 올라왔다 ㅎㅎ;; 기분 좋구만 이러면 더 열심히 하게된다.. 이번 작품은 코드가 좀 길어서 깃헙 주소로 대체한다~ github.com/lee-tae-eon/css-master/tree/css-challenge/challenge6 lee-tae-eon/css-master nomad coder css master class. Contribute to lee-tae-eon/css-master development by creating an account on GitHub. github.com 사실 바로바로 코드리뷰하면서 올렸어야 되는데.. 요새 아들이 두드러기랑 감기가 걸려서 병원다니느라 좀 소홀했다 ㅠㅠ 그래서 밤사이 공부하..