반짝이는 효과 - tailwindcss

//const shimmer = 	'
            before:absolute 
            before:inset-0 
            before:-translate-x-full 
            before:animate-[shimmer_2s_infinite] 
            before:bg-gradient-to-r 
            before:from-transparent 
            before:via-white/60 
            before:to-transparent
            ';

<div
      className={`${shimmer} relative overflow-hidden rounded-xl bg-gray-100 p-2 shadow-sm`}
    >
  .......
 </div>

• before:absolute: 이 클래스는 ::before 의사 요소를 절대 위치로 설정합니다. 즉, 부모 요소에 대해 상대적으로 위치가 결정되며, 부모 요소는 relative나 absolute 위치를 가지고 있어야 합니다.
• before:inset-0: 이 클래스는 ::before 요소의 모든 방향 (위, 오른쪽, 아래, 왼쪽)의 위치를 0으로 설정하여 부모 요소의 전체 크기를 차지하게 합니다.
• before:-translate-x-full: 이 클래스는 ::before 요소를 x축으로 왼쪽으로 100% 이동시킵니다. 이는 요소가 초기에 화면에서 보이지 않게 하기 위함입니다.
• before:animate-[shimmer_2s_infinite]: 이 클래스는 사용자가 정의한 shimmer 애니메이션을 2초 동안 무한 반복하도록 설정합니다. shimmer 애니메이션은 일반적으로 좌에서 우로 이동하면서 반짝임 효과를 생성합니다.
• before:bg-gradient-to-r: 이 클래스는 ::before 요소의 배경을 그라디언트로 설정하며, 그라디언트는 왼쪽에서 오른쪽으로 진행됩니다.
• before:from-transparent: 그라디언트의 시작 색상을 투명하게 설정합니다.
• before:via-white/60: 그라디언트 중간을 60% 투명도의 흰색으로 설정합니다.
• before:to-transparent: 그라디언트의 끝 색상을 투명하게 설정합니다.