[ CSS ] min-content, max-content

[ min-content, max-content ]

css 코드를 작성하다보면 요소 안의 텍스트나 이미지 등의 크기에 따라 요소의 크기를 정하고 싶을 때가 있다.

이때 사용할 수 있는게 min-content와 max-content이다.

 

min-content :콘텐츠가 튀어나가지 않는 선에서 요소가 가질 수 있는 가장 작은 크기로 설정한다.

                      : 수평 방향의 콘텐츠인 텍스트의 경우 글자수가 가장 긴 단어만큼 작아진다.

 

max-content : 사용 가능한 공간이 주어질 때 박스가 가질 수 있는 가장 이상적인 크기로 설정한다.

                       : 컨텐츠가 튀어나가는 일없이 콘텐츠의 축 방향으로 쭉 뻗으면서 가질 수 있는 가장 작은 크기로

                          수평 방향의 컨텐츠인 텍스트인 경우 줄 바꿈 되지 않고 쭉 뻗은 길이이다.

 

 

위에 그림에서 볼 수 있다싶이

min-content의 경우 가장 긴 단어인 where의 크기로 요소의 넓이 값이 정해졌고

max-content의 경우 문장 전체의 크기만큼 요소의 넓이 값이 정해졌다.

 

 

 

 

 

[ 참고문헌 ]

https://blog.logrocket.com/understanding-min-content-max-content-fit-content-css/