backgroundimage

next.js grid, map 안의 background image 최적화 및 글자 위에 보이기 | pages router

[참고] Optimizing: Images | Next.js Optimize your images with the built-in `next/image` component. nextjs.org 1. next/Image 태그를 import 한다 2. fill 과 objectFit, sizes를 아래코드와 같이 설정한다. 3. Image태그의 부모요소에 position: "relative"를 설정한다. (크기가 지정되어있지 않을 경우 width, height도 설정) ++ background-image 위에 글자 보이게 하는법 4. Image태그의 부모요소 (여기서는 Item)의 background-color를 투명하게 만든다. 5. 글자를 div 태그로 감싸고 absolute를 준다. 6. 중앙정렬 한다...