width : px
px 단위로 width 값을 정하면 너비 값은 항상 고정됨
width : auto
width 속성의 기본값. 따라서 width 속성을 명시하지 않으면 기본으로 auto.
auto의 계산 알고리즘은 부모 엘리먼트로부터 주어진 가용 너비에서 margin 크기를 뺀 너비를 전체 width로 사용한다. (즉, 100% - margin 양 옆 값 = auto)
width : % (상대값)
너비가 가용 너비에 비례하여 조절되게 하려면 %를 사용한다.
단, 적용하려는 엘리먼트에 margin이 적용된 경우, width를 계산할 때 그 값이 포함되는 점을 주의해야 한다. (ex. 부모 엘리먼트의 가용 너비가 400px인데, 자식 엘리먼트에 margin이 20px로 적용되어 있다면 width: 100%일 때 전체 너비는 420px로 계산됨)
위 속성들은 부모로부터 주어진 가용 너비가 얼마인가에 따라 조절되는데, 아래 속성들은 엘리먼트가 담고 있는 '콘텐츠'에 의해 width가 조절된다.
width : min-content
엘리먼트의 속성을 최소로 줄이고 싶을 때 사용한다. 최소 너비는 엘리먼트가 담고 있는 콘텐츠에 따라 달라진다. 만약 텍스트 컨텐츠라면, 최대한 줄바꿈을 해서 가장 긴 단어의 길이가 최소 너비가 된다.
width : max-content
min-content와 정반대로 컨텐츠의 너비를 최대한 늘이고 싶을 때 사용. 만약 텍스트 컨텐츠라면, 줄바꿈을 하지 않은 문장의 길이가 최대 너비로 사용됨.
width : fit-content
max-content + auto
가용 너비가 부족하지 않다면, max-content처럼 담고 있는 컨텐츠의 최대 너비를 width의 속성값으로 사용. 만약 가용 너비가 부족하다면 auto처럼 가용 너비에서 여백(margin)을 제외한 너비를 엘리먼트의 width 속성값으로 사용한다.
