TIL 230423 aspect-ratio, devide-y-[어쩌구]

🎆 오늘 한 것

• 인강 보면서 tailwind 자잘한 것 익히기

✨ tailwind practice

🎇 className 깔끔하게 작성하기

function cls(...classNames: string[]) {
  return classNames.join(" ");
}

이런 식으로 함수를 작성해서

 <button className={cls("pb-4 font-medium border-b-2",method === "phone" ? " border-black" : "text-gray-400")} type="button"onClick={onPhoneClick}>
  Phone number
</button>

인자로 클래스네임을 넘겨주면

 <button className={`${method === "email" ? " border-black" : "text-gray-400"}`} type="button" onClick={onEmailClick}>
  Email address
</button>

이렇게 지저분하게 템플릿리터럴을 사용할 필요가 없어진다는 장점이 있다.

🎇 aspect-ratio

설정한 비율대로 박스 비율이 줄어드는 css 속성. 이걸 몰라서 패딩으로 조절했는데 있었다... 예상대로 IE에선 지원이 안된다.

<iframe class="w-full aspect-video ..." src="https://www.youtube.com/..."></iframe>

aspect-video 는 16:9 비율로 줄어든다는 명령어다!

🎇 devide-y-[어쩌구]

<div class="grid grid-cols-1 divide-y">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

last child 사용해서 마지막 border 지우는 똥꼬쇼를 하지 않아도 되는 tailwind 속성. width 말고도 style, color 가 있음