🎨[css] 유용한 CSS 모음

이미지 크기 반응형 구현하기

테일윈드를 사용하면서, 이미지크기가 반응형에 맞게 커졌다 작아지는 로직을 구현하려고 한다

📌 중요한 point

• next의 Image 태그는 width 나 layout 속성 중 하나는 필수이고, 하나를 쓰면 나머지는 사용이 불가하다
• 반응형을 사용하려면 width를 고정값으로 주는게 아닌, layout 속성 중 fill을 사용해야한다
• fill을 사용하면 이미지에 position:absolute 가 자동 적용된다
• 그래서 부모에 position: "relative", position: "fixed", 또는 position: "absolute" 를 지정해야 한다
• 이미지 깨지는 걸 방지하기 위해 objectfit: cover를 적용해준다
• 정사각형 을 유지해주는 css 는
  aspect-square 이다

<div className="relative aspect-square w-1/4">
  <Image src="/images/0.jpg" fill objectFit="cover" alt="체험이미지" />
</div>

Image 태그 objectFit

Next.js 13에서 objectFit prop이 제거되었습니다.
그래서 직접적으로 속성을 주지 못합니다
대신 스타일 관련 속성을 CSS로 처리하도록 유도하기 위한 변경 사항입니다.

<Image
  src={activity.activity.bannerImageUrl}
  fill
  className="rounded-xl"
  alt="체험이미지"
  //  objectFit="cover" 삭제
  style={{ objectFit: "cover" }}
/>;

자식이 부모크기를 전부 안쓰는 경우

이미지를 보면 오른쪽 div가 부모크기를 전부 안쓰고 있다
이때는 간단히
flex-1 속성을 주면
자식 요소가 부모 컨테이너의 남은 공간을 채우도록 설정한다

모달 중앙에 띄우기

모달에서 중앙에 띄우려면
부모에
fixed : 뷰포트 기준 고정
inset-0 : 위, 아래, 왼쪽, 오른쪽 모두 0으로 설정해 화면 전체를 덮는 요소 생성
을 줘야한다