김재욱의 이모저모

예를 들어 어떤 버튼을 클릭할 때마다 노란색, 파란색으로 배경이 변해야 하는 경우가 있다고 하자. 그러면 나는 이때까지는 JS의 도움을 통해서 혹은 react에서 관리하는 state를 css-in-js 코드로 넘겨주어 css에서 해당 state 따라 배경색이 지정되도록 코드를 작성했다 ( 사실 주로 후자의 경우를 선호했다. ) 이번에 처음으로 Tailwind CSS를 활용하면서 좋은 기능을 알 수 있었다. 배경색과 같은 CSS코드 즉 디자인 코드를 동적으로 조절하기 쉬운 방법이 있다는 것을 알 수 있었다! 아래와 같은 코드를 통해 위 상단바의 디자인 코드를 작성할 수 있었다. const TOP_OFFSET = 66; const Navbar = () => { const [backgroundvisible, ..