CSS- set width equal to content : 컨텐츠 길이에 맞추어 div 너비 조정하기

[CSS] 요소의 너비를 컨텐츠 너비에 맞추는 방법

예를 들어 div 태그로 둘러싸인 코드가 있다면 보통 width를 사용하여 너비(폭)를 지정해줄 수 있습니다(예: width: 30%;). 하지만 경우에 따라 div(꼭 div가 아니더라도 상관 없음)로 둘러싸인 컨텐츠의 길이에 맞게 너비를 지정하고 싶은 경우가 발생할 수 있습니다. 예를 들어, 다음과 같은 HTML의 경우:

<div class="category-list">기본</div>

“기본”이라는 글자를 블록 처리해주고 싶으면 다음과 같이 display:inline-block;을 지정해주면 해결됩니다.

display:inline-block;

또는, 다음과 같은 코드로도 가능하네요.

clear:both;
float:left;

jsfiddle에서 실제 작동을 확인해볼 수 있습니다. 이 내용을 다양한 상황에서 응용할 수 있습니다. 예를 들어, 워드프레스 카테고리 이름이 <div>…</div>로 되어 있어 그냥 background 색상을 적용하면 라인 전체가 적용되고, width: 50px;처럼 사용하면 크기가 고정되어 글자 길이가 너무 길거나 짧아질 때 제대로 대응할 수 없습니다. 이런 경우 위의 방법을 사용하면 글자 길이에 맞추어 서식을 적용할 수 있습니다.

CSS- set width equal to content : 컨텐츠 길이에 맞추어 div 너비 조정하기

별것은 아니지만 알고 있으면 유용할 듯합니다.

참고:

떠나시기 전에 아무 댓글(Comments)이라도 남겨두세요.
기부를 통해 이 블로그의 운영을 후원하실 수 있습니다.