1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
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>
|
