---
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">&lt;p class="visible"&gt;첫 번째 문단은 보입니다.&lt;/p&gt;
&lt;p class="not-visible"&gt;두 번째 문단은 보이지 않습니다.&lt;/p&gt;
&lt;p class="visible"&gt;세 번째 문단은 보입니다. 두 번째 문단이 여전히 공간을 차지하고 있어요.&lt;/p&gt;
</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">&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;1.1&lt;/td&gt;
    &lt;td class="collapse"&gt;1.2&lt;/td&gt;
    &lt;td&gt;1.3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="collapse"&gt;
    &lt;td&gt;2.1&lt;/td&gt;
    &lt;td&gt;2.2&lt;/td&gt;
    &lt;td&gt;2.3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;3.1&lt;/td&gt;
    &lt;td&gt;3.2&lt;/td&gt;
    &lt;td&gt;3.3&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</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>