Visibility

Visibility (가시성)

요소의 표시(display)를 바꾸지 않고 가시성만 제어하는 visibility 유틸리티에 대해 알아봅니다.

출처: 문서

본문

visibility 유틸리티로 요소의 가시성을 제어할 수 있습니다. 이 유틸리티 클래스들은 display 값을 전혀 바꾸지 않으며 레이아웃에도 영향을 주지 않습니다. 즉 .invisible 요소도 페이지에서 여전히 공간을 차지합니다.

참고: .invisible 클래스가 적용된 요소는 시각적으로도, 보조 기술(스크린 리더)을 사용하는 사용자에게도 모두 숨겨집니다.

필요에 따라 .visible 또는 .invisible을 적용하세요.

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

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

CSS

Sass utilities API

visibility 유틸리티는 scss/_utilities.scss의 utilities API에 선언되어 있습니다. utilities API 사용법을 알아보세요.

scss/_utilities.scss

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

더 알아보기 (Learn more)

• Bootstrap 문서