Tailwind CSS Box-Sizing: 완벽 가이드

웹 개발에서 레이아웃의 일관성을 유지하는 것은 매우 중요합니다. Tailwind CSS의 box-sizing 유틸리티는 요소의 크기 계산 방식을 제어하여 이러한 일관성을 쉽게 유지할 수 있도록 도와줍니다.

Box-Sizing이란?

box-sizing 속성은 CSS에서 요소의 너비와 높이를 계산하는 방법을 지정합니다. 기본적으로, CSS는 요소의 width와 height 속성을 포함한 컨텐츠의 크기에 패딩과 테두리 크기를 추가하여 요소의 전체 크기를 계산합니다. 하지만 box-sizing 속성을 사용하면 이 계산 방식을 변경할 수 있습니다.

Tailwind CSS의 Box-Sizing 유틸리티

Tailwind CSS는 box-sizing 속성을 제어하기 위한 두 가지 유틸리티 클래스를 제공합니다:

• box-border: box-sizing: border-box;

• box-content: box-sizing: content-box;

box-border

box-border 클래스는 요소의 전체 너비와 높이에 패딩과 테두리가 포함되도록 합니다. 즉, 요소의 width와 height는 패딩과 테두리를 포함한 크기가 됩니다.

<div class="box-border w-64 h-32 p-4 border-4">
  이 박스는 패딩과 테두리를 포함한 크기입니다.
</div>

box-content

box-content 클래스는 요소의 전체 너비와 높이에 패딩과 테두리가 포함되지 않도록 합니다. 즉, 요소의 width와 height는 순수한 콘텐츠의 크기입니다.

<div class="box-content w-64 h-32 p-4 border-4">
  이 박스는 패딩과 테두리를 포함하지 않은 크기입니다.
</div>

예시 1: 카드 레이아웃

<div class="box-border p-4 border-4 shadow-lg w-64">
  <h2 class="text-xl font-bold">박스 제목</h2>
  <p>박스 내용입니다. 패딩과 테두리가 포함된 크기입니다.</p>
</div>

예시 2: 반응형 그리드

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div class="box-content p-4 border-4">
    <p>콘텐츠 박스 1</p>
  </div>
  <div class="box-border p-4 border-4">
    <p>콘텐츠 박스 2</p>
  </div>
</div>