Search for a command to run...
Articles tagged with #css
Tailwind CSS(이하 테일윈드)를 사용하여 작업한 프로젝트를 보수하고 있다. 14개월 전 나는 그저 테일윈드에서 제공하는 유틸리티 클래스를 열심히 나열하였다. 클래스명을 생각할 필요가 없어서 간편하다는 테일윈드의 장점을 그대로 반영하였으나, 문제는 유지보수였다. 스타일을 변경할 때마다 나열된 클래스를 한땀 한땀 수정해야하고 반복적으로 사용된 스타일이라면 작업 시간이 배로 늘어난다. 이러한 테일윈드 코드를 상수화하거나 커스텀 CSS로 리...
#fff, #000000과 같은 코드를 HEX라 하고, 0, 0, 0, 255, 255, 255와 같은 코드를 RGB라 한다. CSS에서 색상을 지정할 때 보통 HEX를 많이 사용하지만, 색상에 투명도를 설정할 때는 rgba(0, 0, 0, 0.5)와 같이 RGB를 사용한다. 🧶 HEX에 투명도를 더하는 방법은? CSS에 rgba(#3e4bff, 0.5)와 같이 작성하면 스타일이 적용되지 않을 것이다. 번거롭게 인터넷에서 해당 hex의 rg...
Apple 공식사이트 클론코딩을 하면서 트랜지션과 관련된 문제를 겪게 되었다. 🧶 문제 처음에 구현한 트랜지션은 다음과 같다. // LocalNav.jsx ... return ( <nav className={ toggleLocalbar ? 'max-h-52 bg-zinc-900 ease-in-out duration-500 transition-all ...' : 'max-h-12 bg-trans...
Apple 공식사이트 클론 코딩을 하면서 텍스트에 그라데이션과 애니메이션 구현하는 방법에 대해 공부하였다. HTML 작성하기 <body> <span> shoot, view, edit,<br />and share in ProRes<br />or Dolby Vision HDR </span> </body> 그라디언트 적용하기 background-clip: text; -webkit-background-clip: text; color...
