div 또는 블록을 CSS의 콘텐츠 너비로 설정

HTML에서는 block 요소를 사용하여 페이지 전체를 차지합니다. 이들은 일반적으로 텍스트 흐름 내에서 발견되는 inline 요소와 속성이 다릅니다.

박스 모델에 대해 알아보기

inline 및 block 요소는 모두 CSS의 중요한 구성 요소입니다. To learn about the box model in CSS, click here .

새div 또는 기타block 요소를 만들 때 페이지의 전체 너비를 차지하지만div 또는 기타block DOM 요소가 콘텐츠의 너비만 되기를 원하면 어떻게 합니까? 그리고 더 이상? div와 같은 HTMLblock 요소가 콘텐츠보다 더 많은 공간을 차지하지 않도록 하려면 fit-content 키워드를 사용할 수 있습니다.

예를 들어, 배경이 있는 더미 텍스트가 포함된 div가 있습니다. 내용은 짧지만 div는 전체 페이지를 차지합니다.



이제 이 div가 콘텐츠와 동일한 너비만 차지하도록 하려면 fit-content를 추가할 수 있습니다.

div {
    width: fit-content;
}

이제 div는 훨씬 더 작아지고 포함된 콘텐츠만큼만 커집니다.

결론 및 지원

fit-content에 대한 지원은 상당히 광범위하지만 Internet Explorer에서는 작동하지 않습니다. 마찬가지로 일부 브라우저는 width 에 대해서만 지원하고 다른 속성에 대해서는 지원하지 않습니다. 어쨌든 이 속성을 width 와 함께 사용하면 상당히 자신 있게 사용할 수 있지만 다른 CSS 속성에 적용할 때 몇 가지 주의 사항이 있을 수 있습니다. A full list of support can be found on caniuse.com .

If you want to learn more about CSS, click here .