가시성

가시성 (Visibility)

요소를 화면에서 보이지 않게 하되 문서 내 위치는 그대로 유지할지, 완전히 보이게 할지를 정해주는 유틸리티예요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

visible visibility: visible;

invisible visibility: hidden;

collapse visibility: collapse;

예시 (Examples)

요소 숨기기 (Making elements invisible)

invisible 유틸리티를 사용하면 요소를 숨기되, 문서에서의 자리를 그대로 유지해서 다른 요소의 레이아웃에는 영향을 주게 만들 수 있어요.

<div class="grid grid-cols-3 gap-4">
  <div>01</div>
  <div class="invisible ...">02</div>
  <div>03</div>
</div>

요소를 문서에서 완전히 제거하려면 대신 display 속성을 사용하세요.

요소 접기 (Collapsing elements)

collapse 유틸리티를 사용하면 테이블의 행, 행 그룹, 열, 열 그룹을 display: none으로 설정한 것처럼 숨길 수 있어요. 다른 행과 열의 크기에는 영향을 주지 않아요.

<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>

이렇게 하면 테이블 레이아웃에 영향을 주지 않으면서 행과 열을 동적으로 토글할 수 있어요.

요소 보이게 하기 (Making elements visible)

visible 유틸리티를 사용하면 요소를 보이게 만들 수 있어요.

<div class="grid grid-cols-3 gap-4">
  <div>01</div>
  <div class="visible ...">02</div>
  <div>03</div>
</div>

주로 다른 화면 크기에서 invisible 유틸리티를 되돌릴 때 유용해요.

반응형 디자인 (Responsive design)

visibility 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<div class="visible md:invisible ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

가시성