728x90
반응형
https://nextjs.org/learn/dashboard-app/optimizing-fonts-images
You'll notice the class hidden to remove the image from the DOM on mobile screens,
and md:block to show the image on desktop screens.
-> Image component에서
사이즈에 따른 반응형 뷰를 className을 통해 적용
md 사이즈 기준을 통한 예: md:hidden / md:block
* md:block에 따른 desktop 사이즈 이미지
* md:hidden에 따른 mobile 사이즈 이미지
예제 커밋
https://github.com/Junanjunan/nextjs-dashboard/commit/07efea8643b617d00243968089780981241a02a4
Image: [add] Image example based on responsive view · Junanjunan/nextjs-dashboard@07efea8
Junanjunan committed Jun 28, 2024
github.com
728x90
반응형