레이아웃
visibility
엘리먼트의 가시성을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
visible | visibility: visible; |
invisible | visibility: hidden; |
collapse | visibility: collapse; |
예제
엘리먼트를 보이지 않게 만들기
invisible 유틸리티를 사용하면 엘리먼트를 숨기면서도 문서 내에서 자리를 유지할 수 있습니다. 이는 다른 엘리먼트의 레이아웃에 영향을 미칩니다.
01
02
03
<div class="grid grid-cols-3 gap-4"> <div>01</div> <div class="invisible ...">02</div> <div>03</div></div>엘리먼트를 문서에서 완전히 제거하려면 display 속성을 대신 사용하세요.
요소 접기
collapse 유틸리티를 사용하면 테이블 행, 행 그룹, 컬럼, 컬럼 그룹을 display: none으로 설정한 것처럼 숨길 수 있습니다. 하지만 다른 행과 컬럼의 크기에 영향을 주지 않습니다:
모든 행 표시
| 청구서 # | 고객 | 금액 |
|---|---|---|
| #100 | Pendant Publishing | $2,000.00 |
| #101 | Kruger Industrial Smoothing | $545.00 |
| #102 | J. Peterman | $10,000.25 |
`collapse`를 사용하여 행 숨기기| 청구서 # | 고객 | 금액 |
|---|---|---|
| #100 | Pendant Publishing | $2,000.00 |
| #101 | Kruger Industrial Smoothing | $545.00 |
| #102 | J. Peterman | $10,000.25 |
`hidden`을 사용하여 행 숨기기| 청구서 # | 고객 | 금액 |
|---|---|---|
| #100 | Pendant Publishing | $2,000.00 |
| #101 | Kruger Industrial Smoothing | $545.00 |
| #102 | J. Peterman | $10,000.25 |
<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>이를 통해 테이블 레이아웃에 영향을 주지 않고 행과 열을 동적으로 토글할 수 있습니다.
엘리먼트를 보이게 만들기
visible 유틸리티를 사용해 엘리먼트를 보이게 할 수 있습니다:
01
02
03
<div class="grid grid-cols-3 gap-4"> <div>01</div> <div class="visible ...">02</div> <div>03</div></div>이 기능은 주로 다른 화면 크기에서 invisible 유틸리티를 취소할 때 유용합니다.
반응형 디자인
접두사 a visibility 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="visible md:invisible ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
