Next.js <Image> & tailwind 반응형 이미지 제공하는 방법

Next.js-Responsive-Image.js

import Image from 'next/image'

<div>
  <div className="md:hidden">
    <Image src="Banner-767x500.webp" height={500} width={767} />
      </div>
<div className="hidden md:inline-flex lg:hidden">
  <Image src="Banner-1023x500.webp" height={500} width={1023} />
    </div>
<div className="hidden lg:inline-flex xl:hidden">
  <Image src="Banner-1400x500.webp" height={500} width={1400} />
    </div>
<div className="hidden xl:inline-flex">
  <Image height={500} width={2000} src="Banner-2000x500.webp" />
    </div>
</div>