9/5 - Flex Item의 너비와 높이

Next.js의 Image 컴포넌트

Next.js 13 이전의 사용법 일부 정리

 

Next.js Image 컴포넌트 완벽 가이드 (mycodings.fly.dev)

Next.js Image 컴포넌트 완벽 가이드

Next.js에서는 효율적인 이미지 로딩을 위해 Image 컴포넌트를 제공한다.

윗 글에선 해당 컴포넌트에 대해 다루었으며, 간단하게 정리하면 다음과 같다.

사용처	내용
가져오기	import Image from 'next/image'
필수 속성	src=경로 width={number | undefined} height={number | undefined} width와 heigth는 fill이 true일때는 필수가 아니다.
레이아웃	layout= "intrinsic" // 기본 값. width, height에 따라 차지하는 크기를 계산. "fixed" // 정확한 width, height로 표시. "fill" // 상위 엘리먼트에 따라 크기가 지정됨. 상위 position : relative 필요. "responsive" // 부모 컨테이너에 맞게 width 설정. 부모 display : block 필요.

그 외의 속성은 나중에 필요할 때 정리하겠다.

* Next.js 13에선 사용법이 바뀌었다.

`next/image` changed in version 13 | Next.js (nextjs.org)

`next/image` changed in version 13

뭔가 콘솔에서 오류를 뱉길래 찾아보았더니 Next.js 13버전에선 Image 컴포넌트의 사용법이 바뀌어있었다.

위와 다르게 레이아웃의 사용법이 다음과 같이 변경되었다.

변경 전	변경 후
layout= "intrinsic" | "fixed" | "fill" | "responsive" object = "cover" | "contain" layout 속성 폐기됨.	fill 속성이 필요한 경우에는 fill = {true} 속성을 사용함. 또한 이전에 layout="fill"과 함께 사용하던 object = "cover" | "contain" 등은 style={{objectFit: "cover" | "contain"}} 으로 변경되었다. ( 기존의 CSS 속성을 사용함 ) 또한 fill에서는 sizes 속성을 권장한다.

 

Flex Item의 너비, 높이에 관해서

Flexbox - Web 개발 학습하기 | MDN (mozilla.org)

Flexbox - Web 개발 학습하기 | MDN

이번 내용은 반응형을 구상하다 나온 고민이다.

 

헤더의 경우 컨테이너의 max-width : 1200px; flex:1 속성을 주었을 때,

내가 원한대로 vw가 1200px로 줄어들때, max-width이므로 고정 값 1200px를 가지는 것이 아닌, vw에 맞게 자동으로 조절되었다.

 

그리고, 이번엔 다른 경우의 Flex Item에 같은 속성을 주었다.

같은 상황, 속성이니까 결과가 특별히 다르지 않을 것 이라고 생각했는데, 결과는 다음과 같았다.

의도하지 않음

의도한 결과

해당 문제의 경우, width : 100%을 준 것으로 원하는 동작을 구현할 수는 있었다.

 

왜 결과가 달랐는지 확인해보니 다음과 같은 이유가 있었다.

• 헤더의 경우는 flex-direction이 기본 값인 row였다.
• 위의 경우는 flex-direction이 column이었다.

헤더의 경우도 flex : 1의 속성을 주지 않았을 때는 자식 요소에만 맞추어 크기가 지정되었었다.

flex : 1의 경우에 해당 아이템의 크기를 늘리고 줄이는 것을 허용하는 flex-grow, flex-shrink 속성이 활성화되어있다.

그렇기 때문에 max-width의 크기 만큼 넓어질 수 있었던 것 같다.

 

위의 경우도 flex : 1을 주었을 때 flex-direction인 column 방향으로는 지정한 height만큼 길어졌지만, 가로로는 여전히 자식 요소만큼만 넓어져있었다.

flex-direction 방향에 맞는 방향은 flex-grow로 넓어 질 수 있지만, 

사실 원래 flexbox는 자식 요소의 크기만큼 지정되는게 작동 원리이기 때문에 오류나 버그는 아니다.

그렇기 때문에 width : 100% 요소를 통해 강제로 width-max 값으로 확장시킬 수는 있었다.

 

시도를 통해 내가 의도한 방향으로 작동시킬 순 있었지만,

하지만 이 방법은 Flex Box를 사용하는 목적에 부합하는 지는 고민이 되었다.

Flex Box는 flex-grow 등으로 원래는 비율을 조정하여 유연하게 사용하는 속성일탠데 ...

 

무튼, 지금은 요소들을 세로로 가운데 정렬하고 싶어서 flex를 쓰고 있다.

원래 Flex Box가 세로로 가운데 정렬을 위해서만 존재하는 속성은 아니기 때문에, 한 목적을 위해서만 사용하려니 flex : 1 이나 width : 100% 같은 속성들이 더 붙게 되는 것 같다.

다른 곳에서는 어떤식으로 CSS를 작성했는지 참고해봐야 겠다.