Tailwind CSS: Display 속성의 모든 것

1. Display 속성 소개

CSS에서 'display' 속성은 요소가 페이지에 표시되는 방법을 결정합니다.

 

2. 기본 Display 클래스

Tailwind CSS에서 제공하는 기본 'display' 클래스는 다음과 같습니다.

• block: 요소를 블록 레벨로 설정합니다.

• inline-block: 요소를 인라인 블록 레벨로 설정합니다.

• inline: 요소를 인라인 레벨로 설정합니다.

• flex: 요소를 플렉스 컨테이너로 설정합니다.

• inline-flex: 요소를 인라인 플렉스 컨테이너로 설정합니다.

• grid: 요소를 그리드 컨테이너로 설정합니다.

• inline-grid: 요소를 인라인 그리드 컨테이너로 설정합니다.

• table, table-row, table-cell: 요소를 테이블 관련 레이아웃으로 설정합니다.

• hidden: 요소를 숨깁니다.

 

3. 유용한 Display 유틸리티 클래스

Flex 레이아웃

플렉스박스는 복잡한 레이아웃을 간편하게 만들 수 있는 강력한 도구입니다. (가장 많이 사용하는 CSS 중 하나입니다.)

• flex: 요소를 플렉스 컨테이너로 만듭니다.

• flex-1: 플렉스 아이템의 비율을 1씩 설정합니다.

<div class="flex ...">
  <div class="flex-1">01</div>
  <div class="contents">
    <div class="flex-1">02</div>
    <div class="flex-1">03</div>
  </div>
  <div class="flex-1">04</div>
</div>

 

Grid 레이아웃

그리드 레이아웃은 복잡한 2차원 레이아웃을 쉽게 정의할 수 있게 해줍니다.

• grid: 요소를 그리드 컨테이너로 만듭니다.

• grid-cols-3: 3개의 열을 생성합니다.

• gap-4: 그리드 아이템 사이에 1rem의 간격을 설정합니다.

<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>
<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>

 

4. 응답형 Display 클래스

Tailwind CSS는 반응형 디자인을 지원하기 위해 다양한 반응형 유틸리티 클래스를 제공합니다. 예를 들어, 다음과 같이 화면 크기에 따라 'display' 속성을 변경할 수 있습니다.

 

<div class="hidden md:block lg:flex">
  <!-- 화면이 작은 경우 숨김, 중간 크기에서는 블록, 큰 화면에서는 플렉스 -->
</div>

 

• hidden: 기본적으로 숨김.

• md:block: 중간 크기 화면에서는 블록.

• lg:flex: 큰 화면에서는 플렉스.

 

Tailwind CSS의 'display' 속성을 활용하면 복잡한 레이아웃도 간단하게 구현할 수 있습니다. 반응형도 쉽게 구현할 수 있습니다~