시계

가시성 유틸리티를 사용하여 표시를 수정하지 않고 요소의 가시성을 제어합니다.

visibility가시성 유틸리티를 사용하여 요소를 설정합니다 . 이러한 유틸리티 클래스는 display값을 전혀 수정하지 않으며 레이아웃에 영향을 주지 않습니다 .invisible. 요소는 여전히 페이지에서 공간을 차지합니다.

클래스가 있는 요소는 시각적으로 그리고 보조 기술/스크린 리더 사용자 모두.invisible 에게 숨겨집니다 .

필요에 따라 신청 .visible하거나.invisible

<div class="visible">...</div>
<div class="invisible">...</div>

// Class
.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}

사스

가시성 유틸리티는 의 유틸리티 API에 선언되어 있습니다 scss/_utilities.scss. 유틸리티 API를 사용하는 방법을 알아보세요.

    "visibility": (
      property: visibility,
      class: null,
      values: (
        visible: visible,
        invisible: hidden,
      )
    )