Tailwind CSS, Visibility 알아보기

1. Tailwind CSS Visibility

• visible: 요소를 표시합니다.

• invisible: 요소를 숨깁니다.

• collapse: 요소를 테이블과 같은 레이아웃에서 숨깁니다.

 

※ React와 같은 라이브러리에서는 class 대신 className을 사용해야 합니다. HTML/CSS에서 class를 사용합니다.

 

visible 사용법

visible 클래스는 요소를 표시하는 데 사용됩니다. 기본적으로 모든 요소는 visible 상태입니다.

(이미지는 공식 문서)

<div className="visible">
  이 콘텐츠는 표시됩니다.
</div>

 

invisible 사용법

invisible 클래스는 요소를 숨기지만, 요소의 공간은 유지됩니다. 이는 레이아웃에 영향을 미치지 않으면서 콘텐츠를 숨기고 싶을 때 유용합니다.

<div className="invisible">
  이 콘텐츠는 숨겨집니다.
</div>

 

collapse

collapse 클래스는 요소를 숨기고, 테이블과 같은 레이아웃에서 요소의 공간도 제거합니다. 주로 테이블 행이나 열을 숨길 때 사용됩니다.

<table>
  <thead>
    <tr>
      <th>Invoice #</th>
      <th>Client</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#100</td>
      <td>Pendant Publishing</td>
      <td>$2,000.00</td>
    </tr>
    <tr class="collapse">
      <td>#101</td>
      <td>Kruger Industrial Smoothing</td>
      <td>$545.00</td>
    </tr>
    <tr>
      <td>#102</td>
      <td>J. Peterman</td>
      <td>$10,000.25</td>
    </tr>
  </tbody>
</table>

 

반응형, 가시성 제어하기

<!-- 모바일에서는 숨기고, 데스크탑에서는 표시 -->
<div className="invisible md:visible">
  데스크탑 전용 콘텐츠
</div>

<!-- 모바일에서는 표시하고, 데스크탑에서는 숨기기 -->
<div className="visible md:invisible">
  모바일 전용 콘텐츠
</div>

 

오늘의 결론, Tailwind CSS를 활용하면 반응형에서도 쉽게 가시성을 제어할 수 있다.