NEXT.JS의 이미지 최적화 그리고 배경이미지 (4)

이번장은 앞서 이미지 최적화를 다룬 1장 2장 3장에 이어지는 내용입니다.

이번에 다룰 내용은 배경이미지 적용방법 두 가지입니다.

 

이 프로젝트는 기본적으로 tailwindcss 프레임워크를 활용하고 있습니다.

1. tailwindcss 프레임워크만을 활용한 배경이미지 적용

이 코드에서는 div 요소에 tailwind 클래스를 직접 적용하여 배경이미지를 적용하였습니다.

// area 확인을 위한 border 및 높이너비 고정
<div className="h-80 w-80 border-4 border-yellow-300 bg-[url('/images/955535072f0c-10.png')]">
</div>

bg-[url('/images/955535072f0c-10.png')] : tailwind 클래스 코드, bg-[URL]로 작성하여 이미지를 가져와 배치합니다.

 

이 밖에 background에 영향을 주는 클래스는 아래 링크에서 추가로 확인할 수 있습니다.

Background Size - Tailwind CSS

Background Size - Tailwind CSS

 

2. 컴포넌트에 작성한 배경이미지 적용

  <div className="relative h-80 w-80 border-4 border-yellow-300 ">
    <Image
      fill={true}
      src={'/images/955535072f0c-10.png'}
      //className="object-cover object-bottom" //적용가능
      alt="Images"
      quality={90}
    />
  </div>

 

위 소스를 이해하기 위해서 2장에서 다루었던 내용 다시한번 짚고 넘어가겠습니다.

The parent element must assign position: "relative", position: "fixed", or position: "absolute" style.

부모 요소는 position: "relative", position: "fixed", 또는 position: "absolute" 스타일을 지정해야 합니다.

확인이 되었다면...

 

소스를 보고 위와 같이 작성하였을 때 tailwindcss 프레임워크만을 사용하였을 때와의 차이를 알 수 있어야 합니다. 더도 말고 지금까지 언급하였던 'next/image'의 이미지 최적화 장점을 모두 활용할 수 있습니다.

 

위 두 가지 방법에서 이미지 최적화 측면의 차이를 확인할 수 있습니다.

다음 장에서는 이전에 다룬 1장부터 4장까지의 최적화 성능 지표를 비교하고 분석해보겠습니다.