[ 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/
'CSS' 카테고리의 다른 글
| [ CSS ] SCSS - variables, nesting, mixins, extends (0) | 2023.04.15 |
|---|---|
| [ CSS ] Grid 행과 열 개수 설정 - auto-fill, auto-fit / minmax 활용 (0) | 2023.04.07 |
| [ CSS ] fr, Fraction, minmax() (0) | 2023.04.06 |
| [ CSS ] Grid 간단하게 설정하기 (0) | 2023.04.06 |
| [ CSS ] Grid border 만들기 (0) | 2023.04.06 |