NextJS 에서 next/image를 사용하여 컴포넌트내에 배경을 입히려고 할시span
태그가 우선순위 조정이 안되서 내부 태그들이 선택이 되지 않는 문제가 있다.
13버전으로 업데이트 된 후 기존 문제되던 span 태그가 제거 되었다
const Special = () => {
return (
<section className={styles.container}>
<div className={styles.inner}>
<div className={styles.descriptionBox}>
<Header />
<Line />
<DescriptionWithButton />
</div>
<GridBox />
<Commnet />
<AuctionButton />
</div>
<Image
className={styles.background}
src={'/contents/blur_special_background.jpg'}
alt={'special background image'}
layout="fill"
objectFit="cover"
objectPosition="center"
priority
/>
</section>
);
};
export default Special;
위 코드에서 container
는 Next/image 의 layout props 때문에 relative
를 주어야 하고 내부 컴포넌트인 inner
에 relative
를 주면 우선순위가 해결된다.