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
|
---
title: all
slug: Web/CSS/all
tags:
- CSS
- CSS Cascade
- CSS Property
- Reference
- 'recipe:css-property'
translation_of: Web/CSS/all
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <code><strong>all</strong></code> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, <a href="/ko/docs/Web/CSS/Using_CSS_custom_properties">CSS 사용자 지정 속성</a>을 제외한 모든 속성을 초기화합니다.</span> 초깃값, 상속값, 아니면 다른 스타일시트 출처의 값으로 설정할 수 있습니다.</p>
<div>{{EmbedInteractiveExample("pages/css/all.html")}}</div>
<h2 id="구문">구문</h2>
<pre class="brush:css no-line-numbers notranslate">/* 전역 값 */
all: initial;
all: inherit;
all: unset;
/* CSS Cascading and Inheritance Level 4 */
all: revert;
</pre>
<p><code>all</code> 속성은 CSS 전역 키워드 값 중 하나를 사용해 지정합니다. 그러나 어느것도 {{cssxref("unicode-bidi")}}와 {{cssxref("direction")}} 속성에는 영향을 주지 않는 점을 주의하세요.</p>
<h3 id="값">값</h3>
<dl>
<dt>{{cssxref("initial")}}</dt>
<dd>요소의 모든 속성을 <a href="/ko/docs/Web/CSS/initial_value">초깃값</a>으로 변경합니다.</dd>
<dt>{{cssxref("inherit")}}</dt>
<dd>요소의 모든 속성을 <a href="/ko/docs/Web/CSS/inheritance">상속값</a>으로 변경합니다.</dd>
<dt>{{cssxref("unset")}}</dt>
<dd>요소의 모든 속성을, 속성이 값을 상속하는 경우 상속값으로, 아니면 초깃값으로 변경합니다.</dd>
<dt>{{cssxref("revert")}}</dt>
<dd>선언이 속한 스타일시트의 출처에 따라 다른 동작을 합니다.
<dl>
<dt><a href="/ko/docs/Web/CSS/Cascade#User-agent_stylesheets">사용자 에이전트 출처</a></dt>
<dd><code>unset</code>과 동일합니다.</dd>
<dt><a href="/ko/docs/Web/CSS/Cascade#User_stylesheets">사용자 출처</a></dt>
<dd><a href="/ko/docs/Web/CSS/Cascade">종속</a>을 사용자 에이전트 단계까지 되돌려서, <a href="/ko/docs/Web/CSS/specified_value">지정값</a>이 마치 저작자와 사용자 단계의 규칙이 없었던 것처럼 계산되도록 합니다.</dd>
<dt><a href="/ko/docs/Web/CSS/Cascade#Author_stylesheets">저작자 출처</a></dt>
<dd><a href="/ko/docs/Web/CSS/Cascade">종속</a>을 사용자 에이전트 단계까지 되돌려서, <a href="/ko/docs/Web/CSS/specified_value">지정값</a>이 마치 저작자 단계의 규칙이 없었던 것처럼 계산되도록 합니다. <code>revert</code>만 고려했을 때, 저작자 출처는 재정의(Override) 및 애니메이션(Animation) 출처를 포함합니다.</dd>
</dl>
</dd>
</dl>
<h2 id="형식_정의">형식 정의</h2>
<p>{{CSSInfo}}</p>
<h2 id="형식_구문">형식 구문</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="예제">예제</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><blockquote id="quote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">body {
font-size: small;
background-color: #F0F0F0;
color: blue;
}
blockquote {
background-color: skyblue;
color: red;
}
</pre>
<h3 id="결과">결과</h3>
<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;">
<h4 id="all_속성_없음"><code>all</code> 속성 없음</h4>
<pre class="brush: html hidden notranslate"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre>
<pre class="brush: css hidden notranslate">body { font-size: small; background-color: #F0F0F0; color:blue; }
blockquote { background-color: skyblue; color: red; }</pre>
{{EmbedLiveSample("ex0", "200", "125")}}
<p>The {{HTMLElement("blockquote")}}가 브라우저 기본 스타일과 함께, 지정한 배경 및 텍스트 색상을 사용합니다. 또한 블록 요소로 동작하여 뒤의 텍스트가 아래에 위치합니다.</p>
</div>
<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;">
<h4 id="allunset"><code>all:unset</code></h4>
<pre class="brush: html hidden notranslate"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre>
<pre class="brush: css hidden notranslate">body { font-size: small; background-color: #F0F0F0; color:blue; }
blockquote { background-color: skyblue; color: red; }
blockquote { all: unset; }</pre>
{{EmbedLiveSample("ex1", "200", "125")}}
<p>{{HTMLElement("blockquote")}}가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, {{cssxref("background-color")}}가 <code>transparent</code>(초깃값)입니다. 그러나 {{cssxref("font-size")}}는 여전히 <code>small</code>(상속값)이고 {{cssxref("color")}}도 <code>blue</code>(상속값)입니다.</p>
</div>
<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;">
<h4 id="allinitial"><code>all:initial</code></h4>
<pre class="brush: html hidden notranslate"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre>
<pre class="brush: css hidden notranslate">body { font-size: small; background-color: #F0F0F0; color:blue; }
blockquote { background-color: skyblue; color: red; }
blockquote { all: initial; }</pre>
{{EmbedLiveSample("ex2", "200", "125")}}
<p>{{HTMLElement("blockquote")}}가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, {{cssxref("background-color")}}가 <code>transparent</code>(초깃값)이고, {{cssxref("font-size")}}는 <code>normal</code>(초깃값), {{cssxref("color")}}는 <code>black</code>(초깃값)입니다.</p>
</div>
<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;">
<h4 id="allinherit"><code>all:inherit</code></h4>
<pre class="brush: html hidden notranslate"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre>
<pre class="brush: css hidden notranslate">body { font-size: small; background-color: #F0F0F0; color:blue; }
blockquote { background-color: skyblue; color: red; }
blockquote { all: inherit; }</pre>
{{EmbedLiveSample("ex3", "200", "125")}}
<p>{{HTMLElement("blockquote")}}가 브라우저 기본 스타일을 사용하지 않습니다. 블록 요소(부모 {{HTMLElement("body")}}에서 상속)이고, {{cssxref("background-color")}}은 <code>#F0F0F0</code>(상속값), {{cssxref("font-size")}}는 <code>small</code>(상속값), {{cssxref("color")}}는 <code>blue</code>(상속값)입니다.</p>
</div>
<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('CSS4 Cascade', '#all-shorthand', 'all') }}</td>
<td>{{ Spec2('CSS4 Cascade') }}</td>
<td>Added the <code>revert</code> value.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}</td>
<td>{{ Spec2('CSS3 Cascade') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.properties.all")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<p>CSS 전역 키워드 값: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}</p>
|
