diff options
Diffstat (limited to 'files/ko/web/css/visibility')
| -rw-r--r-- | files/ko/web/css/visibility/index.html | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/files/ko/web/css/visibility/index.html b/files/ko/web/css/visibility/index.html new file mode 100644 index 0000000000..67f982daea --- /dev/null +++ b/files/ko/web/css/visibility/index.html @@ -0,0 +1,176 @@ +--- +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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> |