visibility

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
초기값visible
적용대상all elements
상속yes
계산 값as specified
Animation typea visibility

브라우저 호환성

BCD tables only load in the browser