React/Next.JS peer for typing effect (타이핑효과를 줄때)

Styleing based on sibling state(peer-{modifier})

When you need to style an element based on the state of sibling element, mark the sibling with the 'peer' class,

and use 'peer-*' modifiers like 'peer-invalid' to style the target element:

 

 

 

   <div className="relative">
        <input
            id="email"
            className="
                block
                rounded-md
                px-6
                pt-6
                pb-1
                w-full
                text-md
                text-white
                bg-neutral-700
                appearance-none
                focus:outline-none
                focus:outline-none
                focus:ring-0
                peer

            "
            // Styling based on sibling state(peer-{modifier})
            placeholder=" "              
         />
         <label 
         className ="
            absolute
            text-md //to match the text
            text-zinc-400 
            duration-150 //duration for transform
            transform
            -translate-y-3 //put it before class name
            				hover over-> I can see how that looks
            scale-75
            top-4
            z-10 //Z index
            origin-[0] //squre brackets
            left-6
            peer-placeholder-shown:scale-100
         	//it;s going to trigger on this spear placeholder shown. it's goot cuz I can modify this label element by interacting with this input element(위의코드)
            //그래서 여기에다가 피어 더 쓸거임
             peer-placeholder-shown:translate-y-0
           	 peer-focus:sacale-75
             peer-focus:-translate-y-3
         "

         htmlFor="email">

         </label>
         </div>

peer-placeholder-shown

peer는 주어진 형제요소를 선택함

예를들어 입력필드가 포커스를 받았을때 라벨을 위로 이동시키는것과 같은것!

 

즉 'peer-placeholder-shown' 은 입력필드의 플레이스 홀더가 표시되는 상태의 가상클래스선택지임

따라서 플레이스홀더가 보여지는경우와 보여지지 않는 경우 서로 다른 스타일 적용할수있는거임!!

 

translate-y , scale -> 라벨을 위로 이동시키고 축소하는 애니메이션 효과