search

YoonJieut / yoonjieutblog

개인 블로그 프로젝트
0 stars 0 forks source link

ImgCard-Add-fill #1

Closed YoonJieut closed 7 months ago

YoonJieut commented 7 months ago

상위 컴포넌트에서 fill 파라미터가 존재할 때, Image태그를 동적으로 사이즈를 결정하는 fill 속성을 사용하도록 수정

YoonJieut commented 7 months ago

issue - 이미지 태그가 동적으로 크기가 할당 되지 않는다.

Cumulative Layout Shift - CLS 누적 레이아웃 이동 항목

  • 초기 로딩 시 이미지가 밀리는 현상

이미지 태그 필수 속성

SEO에서 좋은 점수를 얻기 위해 필요한 항목이 존재

  • Width,
  • Height
  • src
  • alt
YoonJieut commented 7 months ago

참고 url : https://pusha.tistory.com/entry/Nextjs-Image-100-%EC%82%AC%EC%9D%B4%EC%A6%88

YoonJieut commented 7 months ago

<img alt="test" fetchpriority="high" decoding="async" data-nimg="fill" sizes="100vw" ... style="position: absolute; height: 100%; width: 100%; inset: 0px; object-fit: contain; color: transparent;">

상위 부모에 relative를 추가해줘야 함

YoonJieut commented 7 months ago 
// 비율에 맞추는 objectFit
<Image
   src="/images/pf_figma.png"
  alt="test"
  priority={true}
  layout="fill"
  objectFit="contain"
/>

// 억지로 늘리는 fill            
<Image
  src="/images/pf_figma.png"
  alt="test"
  fill
/>
PF0003 commented 7 months ago

하나 배웠어용