<aside>
💡 *intrinsic & extrinsic
intrinsic → 고유한, 본질적인 extrinsic → 외부의, 외적인
sizing, 즉 크기 조절에는 위의 두가지 방식이 존재한다.
Intrinsic은 요소의 크기를 내부 (요소의 컨텐츠) 를 기준으로 해서 정하는 방식이며,
Extrinsic은 요소의 크기를 외부 (요소가 속한 맥락 context) 를 기준으로 정해주는 방식이다.
context는 맥락, 상황, 문맥 등 다양하게 해석될 수 있는데, 요소 크기에 영향을 주는 “외부적”인 것들이라고 생각하면 된다.*
</aside>
예를 들어 div 안에 텍스트를 넣었다고 생각해보자.
텍스트와 관계없이 div 크기를 width: 100px; height: 100px; 로 준다면 텍스트 양에 따라 박스 밖으로 넘칠 수도 있을 것이다.
이렇게 요소의 자연스러운 크기 대신 width, height 처럼 외부에서 특정 크기값을 정해준다면 이 크기를 extrinsic 이라고 한다. extrinsic의 단점은 이렇게 컨텐츠의 overflow가 생길수 있다는 점이다. 반면 컨텐츠 크기에 따라 요소의 크기가 결정될 때 이것을 intrinsic 크기라고 한다.
컨텐츠가 박스 밖으로 넘치지 않는 한에서 박스가 가질 수 있는 가장 작은 크기를 말한다.
수평 방향의 컨텐츠에서 min-content는 요소 박스 안의 가장 큰 컨텐츠의 길이를 의미한다.
예를 들어 박스 안에 텍스트가 들어있다면, min-content 는 텍스트 중 가장 긴 길이의 단어를 기준으로 width 를 정한다.
사용가능한 공간이 무한으로 주어질 때, 박스가 가질 수 있는 가장 “이상적인” 크기를 말한다. 보통은 컨텐츠가 넘치는 일 없이 컨텐츠의 축 방향으로 쭉 뻗으면서 가질 수 있는 가장 작은 크기를 말한다.
박스 안에 텍스트가 들어 있다면, 텍스트가 줄바꿈되지 않고 쯕 뻗은 최소 길이가 max-content가 될 것이다.
auto / max-content
<aside> 💡
*auto
요소 width의 기본값은 auto이다.
auto는 부모 요소로부터 받은 너비에서 마진을 제외한 너비를 의미한다. 즉, 사용할 수 있는 너비를 다 쓰는 게 auto이다.*
</aside>