[260310] TIL

Today I Learned (2026-03-10)

이미지 처리 방식

• 이미지 최적화를 위해 Next.js Image 사용을 선호한다.

export function ScienceHeroSection() {
  return (
    <div className="relative h-fit w-full">
      <Image
        src="/images/science/science-hero-background.png"
        alt="science hero"
        fill
        className="object-cover"
      />
      <div className="relative z-1">
        <div className="h-100 w-50 bg-pink-200">테스트</div>
        <div className="h-70 w-50 bg-pink-200">테스트</div>
      </div>
    </div>
  )
}

• 대안으로 CSS background-image를 사용할 수도 있다.

<div className="h-100 bg-[url('/images/hero.png')] bg-cover bg-center">
  내용
</div>