--- title: visibility slug: Web/CSS/visibility tags: - CSS - CSS Box Model - CSS Property - Layout - Reference - Web translation_of: Web/CSS/visibility --- <div>{{CSSRef}}</div> <p><span class="seoSummary"><strong><code>visibility</code></strong> CSS 속성은 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다.</span> <code>visibility</code>로 {{htmlelement("table")}}의 행이나 열을 숨길 수도 있습니다.</p> <div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div> <p>문서를 숨기고, <strong>레이아웃에서도 제외</strong>하려면, <code>visibility</code>를 사용하는 대신 {{cssxref("display")}} 속성을 <code>none</code>으로 설정하세요.</p> <h2 id="구문">구문</h2> <pre class="brush: css no-line-numbers">/* 키워드 값 */ visibility: visible; visibility: hidden; visibility: collapse; /* 전역 값 */ visibility: inherit; visibility: initial; visibility: unset; </pre> <h3 id="값">값</h3> <dl> <dt><code>visible</code></dt> <dd>요소가 보임.</dd> <dt><code>hidden</code></dt> <dd>요소가 숨겨짐(그려지지 않음). 레이아웃에는 숨겨지지 않았을 때와 동일한 영향을 줍니다. <code>visibility</code>를 <code>visible</code>로 설정한 자손은 화면에 보입니다. 숨겨진 요소는 포커스(<a href="/ko/docs/Web/HTML/Global_attributes/tabindex">탭 인덱스</a>로 탐색 등)를 받을 수 없습니다.</dd> <dt><code>collapse</code></dt> <dd> <ul> <li>{{HTMLElement("table")}}의 행, 열, 행 그룹과 열 그룹에 적용하면 {{cssxref("display")}}를 <code>none</code>으로 설정한 것과 동일하게 요소를 숨기고 차지하던 공간도 제거합니다. 그러나 다른 행(열)의 크기는 <code>collapse</code>를 적용한 행(열)이 보이는 것 처럼 취급해 계산합니다. 따라서 표의 너비나 높이의 재계산 없이 빠르게 행이나 열을 제거할 수 있습니다.</li> <li>플렉스 아이템에 적용하면 요소를 숨기고 차지하던 공간도 제거합니다.</li> <li><a href="/ko/docs/Mozilla/Tech/XUL">XUL</a> 요소에 적용하면 다른 스타일과 관계 없이 크기의 계산값으로 항상 0을 사용합니다. 그러나 {{cssxref("margin")}}은 바뀌지 않습니다.</li> <li>다른 요소에서는 <code>hidden</code>과 동일합니다.</li> </ul> </dd> </dl> <h3 id="형식_구문">형식 구문</h3> {{csssyntax}} <h2 id="보간">보간</h2> <p>가시성은 <strong>보여짐</strong>과 <strong>보이지 않음</strong> 사이에서 보간할 수 있습니다. 따라서 시작이나 종료 값이 <code>visible</code>이 아니면 보간할 수 없습니다. 가시성 값은 이산값을 사용하며 <code>0</code>은 <code>hidden</code>, <code>0</code> 초과 <code>1</code> 이하의 모든 값은 <code>visible</code>에 맵핑됩니다. 범위 밖의 값(<code>cubic-bezier()</code> 함수의 y값이 [0, 1]을 벗어날 때만 트랜지션의 시작과 종료 시 발생)은 <code>0</code>과 <code>1</code> 중 더 가까운 값으로 취급합니다.</p> <h2 id="예제">예제</h2> <h3 id="기본_예제">기본 예제</h3> <h4 id="HTML">HTML</h4> <pre class="brush: html"><p class="visible">첫 번째 문단은 보입니다.</p> <p class="not-visible">두 번째 문단은 보이지 않습니다.</p> <p class="visible">세 번째 문단은 보입니다. 두 번째 문단이 여전히 공간을 차지하고 있어요.</p> </pre> <h4 id="CSS">CSS</h4> <pre class="brush: css">.visible { visibility: visible; } .not-visible { visibility: hidden; } </pre> <p>{{EmbedLiveSample('기본_예제')}}</p> <h3 id="표_예제">표 예제</h3> <h4 id="HTML_2">HTML</h4> <pre class="brush: 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></pre> <h4 id="CSS_2">CSS</h4> <pre class="brush: css">.collapse { visibility: collapse; } table { border: 1px solid red; } td { border: 1px solid gray; } </pre> <p>{{EmbedLiveSample('표_예제')}}</p> <h2 id="접근성_고려사항">접근성 고려사항</h2> <p><code>visibility</code> 값을 <code>hidden</code>으로 설정한 요소는 <a href="/ko/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">접근성 트리</a>에서 제외됩니다. 즉 해당 요소와, 그 모든 자손 요소는 스크린 리더가 읽지 않습니다.</p> <h2 id="참고">참고</h2> <ul> <li>일부 현대 브라우저에서는 <code>visibility: collapse</code>를 지원하지 않거나 잘못 지원합니다. 따라서 표의 행과 열이 아닌 요소에 사용했을 때 <code>visibility: hidden</code>과 똑같이 취급하지 않을 수도 있습니다.</li> <li><code>visibility: collapse</code>를 적용한 칸에 중첩해서 다른 표가 존재하면 바깥 표의 레이아웃이 바뀔 수도 있습니다. 이를 방지하려면 중첩된 표에 <code>visibility: visible</code>을 명시해야 합니다.</li> </ul> <h2 id="명세">명세</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td> <td>{{Spec2('CSS3 Flexbox')}}</td> <td>Defines the <code>collapse</code> value as it applies to flex items.</td> </tr> <tr> <td>{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}</td> <td>{{Spec2('CSS3 Box')}}</td> <td>No changes.</td> </tr> <tr> <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td> <td>{{Spec2('CSS3 Transitions')}}</td> <td>Defines <code>visibility</code> as animatable.</td> </tr> <tr> <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td> <td>{{Spec2('CSS2.1')}}</td> <td>Initial definition.</td> </tr> </tbody> </table> <p>{{cssinfo}}</p> <h2 id="브라우저_호환성">브라우저 호환성</h2> <p>{{Compat("css.properties.visibility")}}</p>