Dev Blog

스크립트 & 소스코드 공유

실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.

2건의 글

CSS fit-content 속성으로 콘텐츠 크기에 맞는 박스 만들기

CSS의 fit-content 속성을 활용해 박스 크기를 콘텐츠에 맞추는 CodePen 예제다. width나 height에 fit-content를 적용하면 요소가 내용물 크기만큼만 공간을 차지하도록 자동 조절된다. 버튼·배지·레이블 등 유연한 크기의 레이아웃을 만들 때 유용하다.

See the Pen fit-content by H J (@H-J-the-typescripter) on CodePen.

CSS width를 콘텐츠 크기에 맞게 지정하기 (fit-content)

요소의 너비를 콘텐츠 크기에 맞게 자동으로 지정하는 CSS 기법을 보여주는 CodePen 예제다. width: fit-content를 사용하면 블록 요소가 화면 전체가 아닌 내용만큼만 너비를 차지하도록 줄어들며, 인라인 요소나 버튼처럼 자연스러운 크기를 만들 때 유용하다.

See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.



Let's create something great together.

프로젝트 문의 및 견적 요청은 언제든 환영합니다.