목록next14 (1)

D.JOUNG

NEXT14 Image 부모 컨테이너 사이즈에 맞게 반응형으로 작동시키기 (가로세로 중앙정렬)

Next(React)에서는 HTML img 태그 대신 Image라는 자체 태그를 따로 제공하고 있다. Image 태그는 서버에서 이미지를 미리 받아와 화면에 더 빠르고 최적화된 방식으로 이미지를 표시할 수 있게 해준다.  보통 컨테이너(div) 크기에 맞게 반응형으로 이미지를 조절하고 싶을 때는 이미지를 div 백그라운드 속성으로 지정하거나 div 태그를 중복해서 작성한 다음 안쪽 div에 absolute 속성을 먹여 적용한다.  하지만 Image 태그를 사용하면 위와 같은 복잡한 방식 필요 없이 간단하게 부모 크기에 이미지를 맞출 수 있다. 일반적으로 구글링을 검색했을 때 나오는 방법은 다음과 같다.  layout 속성에 fill 값을 주어 이미지를 컨테이너에 꽉 채우고, objectFit 속성에 co..
웹/React 2024. 5. 30. 16:21
이전 Prev 1 Next 다음