visibility

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

visibility CSS 속성은 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다. visibility<table>의 행이나 열을 숨길 수도 있습니다.

시도해보기

문서를 숨기고, 레이아웃에서도 제외하려면, visibility를 사용하는 대신 display 속성을 none으로 설정하세요.

구문

css
/* 키워드 값 */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* 전역 값 */
visibility: inherit;
visibility: initial;
visibility: unset;

visible

요소가 보임.

hidden

요소가 숨겨짐(그려지지 않음). 레이아웃에는 숨겨지지 않았을 때와 동일한 영향을 줍니다. visibilityvisible로 설정한 자손은 화면에 보입니다. 숨겨진 요소는 포커스(탭 인덱스로 탐색 등)를 받을 수 없습니다.

collapse

The collapse keyword has different effects for different elements:

  • <table>의 행, 열, 행 그룹과 열 그룹에 적용하면 displaynone으로 설정한 것과 동일하게 요소를 숨기고 차지하던 공간도 제거합니다. 그러나 다른 행(열)의 크기는 collapse를 적용한 행(열)이 보이는 것 처럼 취급해 계산합니다. 따라서 표의 너비나 높이의 재계산 없이 빠르게 행이나 열을 제거할 수 있습니다.
  • 플렉스 아이템에 적용하면 요소를 숨기고 차지하던 공간도 제거합니다.
  • XUL 요소에 적용하면 다른 스타일과 관계 없이 크기의 계산값으로 항상 0을 사용합니다. 그러나 margin은 바뀌지 않습니다.
  • 다른 요소에서는 hidden과 동일합니다.

형식 구문

visibility = 
visible |
hidden |
collapse

보간

가시성은 보여짐보이지 않음 사이에서 보간할 수 있습니다. 따라서 시작이나 종료 값이 visible이 아니면 보간할 수 없습니다. 가시성 값은 이산값을 사용하며 0hidden, 0 초과 1 이하의 모든 값은 visible에 맵핑됩니다. 범위 밖의 값(cubic-bezier() 함수의 y값이 [0, 1]을 벗어날 때만 트랜지션의 시작과 종료 시 발생)은 01 중 더 가까운 값으로 취급합니다.

예제

기본 예제

HTML

html
<p class="visible">첫 번째 문단은 보입니다.</p>
<p class="not-visible">두 번째 문단은 보이지 않습니다.</p>
<p class="visible">
  세 번째 문단은 보입니다. 두 번째 문단이 여전히 공간을 차지하고 있어요.
</p>

CSS

css
.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}

표 예제

HTML

html
<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

CSS

css
.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

접근성 고려사항

visibility 값을 hidden으로 설정한 요소는 접근성 트리에서 제외됩니다. 즉 해당 요소와, 그 모든 자손 요소는 스크린 리더가 읽지 않습니다.

참고

  • 일부 현대 브라우저에서는 visibility: collapse를 지원하지 않거나 잘못 지원합니다. 따라서 표의 행과 열이 아닌 요소에 사용했을 때 visibility: hidden과 똑같이 취급하지 않을 수도 있습니다.
  • visibility: collapse를 적용한 칸에 중첩해서 다른 표가 존재하면 바깥 표의 레이아웃이 바뀔 수도 있습니다. 이를 방지하려면 중첩된 표에 visibility: visible을 명시해야 합니다.

명세

Specification
CSS Display Module Level 3
# visibility

브라우저 호환성

BCD tables only load in the browser