목록CSS (43)

Enjoy Programming

[animation] custom animation - animation-play-state

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 |..
CSS/TailwindCss 2022. 11. 7. 21:55
[@layer] 기록

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

이번에 회사에서 새롭게 들어가는 커스터피아 웹페이지 프로젝트에서는 기존에 사용했던 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하나..
CSS/TailwindCss 2022. 4. 24. 12:51
em과 rem

필자는 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을 한번이라도 살펴봤다면 편했을텐데 ㅠㅠ
CSS 2021. 10. 24. 20:58
transparent keyword

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라는 키워드를 ..
CSS 2021. 6. 10. 15:33
CSS MASTER challenge 6

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 사실 바로바로 코드리뷰하면서 올렸어야 되는데.. 요새 아들이 두드러기랑 감기가 걸려서 병원다니느라 좀 소홀했다 ㅠㅠ 그래서 밤사이 공부하..
CSS 2021. 4. 30. 01:42
이전 Prev 1 2 3 4 ··· 8 Next 다음