---
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">&lt;h3 style="font-weight: unset; color: unset;"&gt;This will still have font-weight: normal, but color: black&lt;/h3&gt;
&lt;p&gt;Just some text&lt;/p&gt;
&lt;h3 style="font-weight: revert; color: revert;"&gt;This should have its original font-weight (bold) and color: black&lt;/h3&gt;
&lt;p&gt;Just some text&lt;/p&gt;</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">&lt;h3&gt;This will have custom styles&lt;/h3&gt;
&lt;p&gt;Just some text&lt;/p&gt;
&lt;h3 style="all: revert"&gt;This should be reverted to browser/user defaults&lt;/h3&gt;
&lt;p&gt;Just some text&lt;/p&gt;</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">&lt;section&gt;
  &lt;h3&gt;따로 지정되지 않은 h3는 다크 그린&lt;/h3&gt;
  &lt;p&gt;paragraph의 텍스트는 빨강&lt;/p&gt;
  섹션 안의 요소니까 다크 그린.
&lt;/section&gt;
&lt;section class="with-revert"&gt;
  &lt;h3&gt;revert로 따로 지정되어있지 않았던 h3는 검정&lt;/h3&gt;
  &lt;p&gt;특성화되어있는 paragraph는 그대로 빨강&lt;/p&gt;
  섹션 안의 요소가 revert 되면서 검정
&lt;/section&gt;</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>
<div class="hidden"><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 참조하시고 pull request를 해보세요.</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>