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
|
---
title: revert
slug: Web/CSS/revert
tags:
- CSS
- CSS 속성
- Cascade
- Style
- 'all:revert'
- revert
- revert style 속성
- revert 속성
- 스타일
translation_of: Web/CSS/revert
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>revert</code></strong> 는 현재 엘리먼트에 선언 된 캐스캐이딩된 속성으로부터 <strong>{{Glossary("style origin")}}</strong> 으로 되돌립니다.</span> 부모 속성 또는 user agent에 따라 default로 선언 된 속성으로 되돌리는 것입니다. 이 속성은 css 단축속성{{cssxref("all")}}을 포함한 어떤 프로퍼티에도 적용할 수 있습니다.</p>
<ul>
<li>만약 그 사이트만의 css 속성이 지정되어있다면 <code>revert</code> 속성은 유저가 지정한 커스텀 스타일로 롤백합니다. 만약 하나만 존재한다면 user agent의 default 스타일로 돌아가는 것입니다.</li>
<li>만약 사용자의 커스텀 스타일을 사용하거나 사용자에 의해서 스타일이 적용되어 있다면, <code>revert</code> 는 user agent의 default 스타일로 되돌립니다.</li>
<li>만약 user agent default 스타일만 지정되어있다면, {{cssxref("unset")}}과 마찬가지의 의미입니다.</li>
</ul>
<p><code>revert</code> 키워드는 많은 경우에서 <code><a href="/en-US/docs/Web/CSS/unset">unset</a></code> 과 같은 성질을 가집니다. 한가지 차이점은 user agent에 의한 스타일이냐 유저가 지정한 스타일이냐의 차이입니다.</p>
<p>Revert 는 자식 요소까지 변경하지는 않습니다. (하지만 자식 요소에 특별히 rule이 지정되어 있지 않다면 적용됩니다.). 그래서 만약에 모든 섹션에 <code>color: green</code> 속성을 지정하고 <code>all: revert</code> 를 사용하면 모든 섹션의 컬러값은 black으로 돌아갈 것입니다. 하지만 만약, 당신이 section 내의 모든 p에 red를 지정했다면 그것들은 red로 유지될 것입니다.</p>
<div class="blockIndicator note">
<p>Revert는 단순히 값입니다. 그러므로 <code>revert</code> 또한 다른 <a href="/en-US/docs/Web/CSS/Specificity">specificity</a>값으로 덮어 쓸 수 있습니다.</p>
</div>
<div class="note">
<p><code>revert</code> 는 {{cssxref("initial")}} 키워드와는 다른데, <a href="/en-US/docs/Web/CSS/initial_value">initial value</a> 는 프로퍼티 단위의 css 특성화입니다. user-agent의 스타일 시트도 default value로 되돌립니다..</p>
<p>예를 들어, {{cssxref("display")}} 속성에 대한 <a href="/en-US/docs/Web/CSS/initial_value">initial value</a> 는 <code>inline</code> 입니다. 반면에 {{HTMLElement("div")}} 에 대한 {{cssxref("display")}} user agent 속성은 <code>block</code> 이고, {{HTMLElement("table")}} 에 대한 속성은 <code>table</code> 입니다.</p>
</div>
<h2 id="예시">예시</h2>
<h3 id="Revert_vs_unset">Revert vs unset</h3>
<p>비록 <code>revert</code> 와 <code>unset</code> 은 비슷하지만 몇몇 엘리먼트와 몇몇 속성에서는 다릅니다.</p>
<p>그래서 아래 예시를 보면, 우리는 <code>font-weight</code> 를 커스텀으로 글로벌 스타일로 지정하였습니다. 그러나 revert와 unset을 시도해보면 다른 결과를 볼 수 있습니다. Unset text를 default로 설정된 normal로 유지합니다. Revert는 user-agent 상에 font-weight인 bold로 돌아갈 것입니다.</p>
<pre class="brush: css notranslate">h3 {
font-weight: normal;
color: blue;
}</pre>
<pre class="brush: html notranslate"><h3 style="font-weight: unset; color: unset;">This will still have font-weight: normal, but color: black</h3>
<p>Just some text</p>
<h3 style="font-weight: revert; color: revert;">This should have its original font-weight (bold) and color: black</h3>
<p>Just some text</p></pre>
<p>{{EmbedLiveSample('Revert_vs_unset')}}</p>
<h3 id="Revert_all">Revert all</h3>
<p>모든 요소를 revert 하는 것은 당신이 많은 캐스캐이딩에 따른 수정이 있었을 때 default로 돌아가기에 매우 유용합니다. 그래서 font-weight를 리버트 하고 color를 리버트하는 것을 각각 하기보다는 한꺼번에 돌릴 수 있습니다.</p>
<pre class="brush: css notranslate">h3 {
font-weight: normal;
color: blue;
border-bottom: 1px solid grey;
}</pre>
<pre class="brush: html notranslate"><h3>This will have custom styles</h3>
<p>Just some text</p>
<h3 style="all: revert">This should be reverted to browser/user defaults</h3>
<p>Just some text</p></pre>
<p>{{EmbedLiveSample('Revert_all')}}</p>
<h3 id="부모요소에서의_Revert">부모요소에서의 Revert </h3>
<p>효율적으로 revert 하는 것은 당신이 선택한 속성에 대해서만 해당 속성을 제거하는 것입니다. 우리는 paragraph에 한해서는 red 속성을 지정하고 section에는 darkgreen 을 따로 각각 지정할 수 있습니다.</p>
<pre class="brush: css notranslate">section { color: darkgreen }
p { color: red }
section.with-revert { color: revert }
</pre>
<pre class="brush: html notranslate"><section>
<h3>따로 지정되지 않은 h3는 다크 그린</h3>
<p>paragraph의 텍스트는 빨강</p>
섹션 안의 요소니까 다크 그린.
</section>
<section class="with-revert">
<h3>revert로 따로 지정되어있지 않았던 h3는 검정</h3>
<p>특성화되어있는 paragraph는 그대로 빨강</p>
섹션 안의 요소가 revert 되면서 검정
</section></pre>
<p>section 요소가 돌아갔음에도 paragraph는 여전히 빨강인 것에 주목하세요. </p>
<p>{{EmbedLiveSample('Revert_on_a_parent')}}</p>
<h2 id="특성">특성</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">특성</th>
<th scope="col">상태</th>
<th scope="col">비고</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Cascade', '#default', 'revert')}}</td>
<td>{{Spec2('CSS4 Cascade')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<div>
<div>
<p>{{Compat("css.types.global_keywords.revert")}}</p>
</div>
</div>
<h2 id="요약">요약</h2>
<ul>
<li>initial value를 지정할 때는 {{cssxref("initial")}} 를 사용하세요 .</li>
<li>초기 속성을 없애거나, 부모 요소에 대한 상속 된 속성을 지정할 때는 {{cssxref("unset")}} 를 사용하세요.</li>
<li>부모 속성을 지정할 때는 {{cssxref("inherit")}} 를 사용하세요.</li>
<li>{{cssxref("all")}} 속성은 unset, initial, revert, inherit 속성을 한꺼번에 지정할 것입니다.</li>
</ul>
|
