visibility

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

visible

요소가 보임.

hidden

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

collapse

The collapse keyword has different effects for different elements:

• <table> (en-US)의 행, 열, 행 그룹과 열 그룹에 적용하면 display (en-US)를 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을 명시해야 합니다.