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

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

구문

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

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

visible
요소가 보임.
hidden
요소가 숨겨짐(그려지지 않음). 레이아웃에는 숨겨지지 않았을 때와 동일한 영향을 줍니다. visibilityvisible로 설정한 자손은 화면에 보입니다. 숨겨진 요소는 포커스(탭 인덱스로 탐색 등)를 받을 수 없습니다.
collapse
  • <table>의 행, 열, 행 그룹과 열 그룹에 적용하면 displaynone으로 설정한 것과 동일하게 요소를 숨기고 차지하던 공간도 제거합니다. 그러나 다른 행(열)의 크기는 collapse를 적용한 행(열)이 보이는 것 처럼 취급해 계산합니다. 따라서 표의 너비나 높이의 재계산 없이 빠르게 행이나 열을 제거할 수 있습니다.
  • 플렉스 아이템에 적용하면 요소를 숨기고 차지하던 공간도 제거합니다.
  • XUL 요소에 적용하면 다른 스타일과 관계 없이 크기의 계산값으로 항상 0을 사용합니다. 그러나 margin은 바뀌지 않습니다.
  • 다른 요소에서는 hidden과 동일합니다.

형식 구문

visible | hidden | collapse

보간

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

예제

기본 예제

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을 명시해야 합니다.

명세

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'visibility' in that specification.
Candidate Recommendation Defines the collapse value as it applies to flex items.
CSS Basic Box Model
The definition of 'visibility' in that specification.
Working Draft No changes.
CSS Transitions
The definition of 'visibility' in that specification.
Working Draft Defines visibility as animatable.
CSS Level 2 (Revision 1)
The definition of 'visibility' in that specification.
Recommendation Initial definition.

초기값visible
적용대상all elements
상속yes
Mediavisual
Computed valueas specified
Animation typea visibility
Canonical orderthe unique non-ambiguous order defined by the formal grammar

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
visibilityChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4
Notes
Full support 4
Notes
Notes Internet Explorer doesn't support visibility: initial.
Notes Up to Internet Explorer 7, descendants of hidden elements will still be invisible even if they have visibility set to visible.
Opera Full support 4Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 6Safari iOS Full support 1Samsung Internet Android Full support Yes
collapseChrome Full support 62
Notes
Full support 62
Notes
Notes Chrome treats visibility: collapse like hidden, leaving a white gap.
Notes Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
IE Full support YesOpera Full support Yes
Notes
Full support Yes
Notes
Notes In Opera, visibility: collapse works on table elements, but doesn't hide a <tfoot> if it is adjacent to a visible <tbody>.
Safari Full support Yes
Notes
Full support Yes
Notes
Notes Safari treats visibility: collapse like hidden, leaving a white gap.
Notes Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
WebView Android No support NoChrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Chrome treats visibility: collapse like hidden, leaving a white gap.
Notes Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Edge Mobile Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
Opera Android Full support Yes
Notes
Full support Yes
Notes
Notes In Opera, visibility: collapse works on table elements, but doesn't hide a <tfoot> if it is adjacent to a visible <tbody>.
Safari iOS Full support Yes
Notes
Full support Yes
Notes
Notes Safari treats visibility: collapse like hidden, leaving a white gap.
Notes Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, alattalatta
최종 변경자: mdnwebdocs-bot,