visibility

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

visible

요소가 보임.

hidden

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

collapse

The collapse keyword has different effects for different elements:

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

visibility = 
  visible   |
  hidden    |
  collapse  

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

HTML

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

CSS

.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}

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

.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

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

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