diff options
Diffstat (limited to 'files/ko/web/css/cascade')
| -rw-r--r-- | files/ko/web/css/cascade/index.html | 229 |
1 files changed, 229 insertions, 0 deletions
diff --git a/files/ko/web/css/cascade/index.html b/files/ko/web/css/cascade/index.html new file mode 100644 index 0000000000..e7d073cddb --- /dev/null +++ b/files/ko/web/css/cascade/index.html @@ -0,0 +1,229 @@ +--- +title: 종속 +slug: Web/CSS/Cascade +tags: + - CSS + - Guide + - Introduction + - Layout + - Reference +translation_of: Web/CSS/Cascade +--- +<div>{{CSSRef}}</div> + +<p><strong>종속(Cascade)</strong>이란 서로 다른 원점에서 가져온 속성 여럿을 조합해 최종 결과를 도출하는 알고리즘입니다. Cascading Style Sheets라는 이름에서도 알 수 있듯 종속은 CSS의 중심입니다. 이 글은 종속이 무엇인지, 선언한 {{Glossary("CSS")}} <a href="/ko/docs/Web/API/CSSStyleDeclaration">정의</a>가 어떤 순서로 종속되는지, 그리고 여러분, 즉 웹 개발자에게 어떤 영향을 주는지 설명합니다.</p> + +<h2 id="Which_CSS_entities_participate_in_the_cascade">Which CSS entities participate in the cascade</h2> + +<p>Only CSS declarations, that is property/value pairs, participate in the cascade. This means that <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a> containing entities other than declarations, such as a {{ cssxref("@font-face")}} rule containing <em>descriptors</em>, don't participate in the cascade. In these cases, only the at-rule as a whole participates in the cascade: here, the <code>@font-face</code> identified by its <code><a href="/en-US/docs/Web/CSS/@font-face/font-family">font-family</a></code> descriptor. If several <code>@font-face</code> rules with the same descriptor are defined, only the most appropriate <code>@font-face</code>, as a whole, is considered.</p> + +<p>While the declarations contained in most at-rules — such as those in {{cssxref("@media")}}, {{cssxref("@document")}}, or {{cssxref("@supports")}} — participate in the cascade, declarations contained in {{cssxref("@keyframes")}} don't. As with <code>@font-face</code>, only the at-rule as a whole is selected via the cascade algorithm.</p> + +<p>Finally, note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.</p> + +<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2> + +<p>The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the <strong>{{anch("User-agent stylesheets")}}</strong>, the <strong>{{anch("Author stylesheets")}}</strong>, and the <strong>{{anch("User stylesheets")}}</strong>.</p> + +<p>Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.</p> + +<h3 id="User-agent_stylesheets">User-agent stylesheets</h3> + +<p>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.</p> + +<p>Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.</p> + +<h3 id="Author_stylesheets">Author stylesheets</h3> + +<p><strong>Author stylesheets</strong> are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.</p> + +<h3 id="User_stylesheets">User stylesheets</h3> + +<p>The user (or reader) of the web site can choose to override styles in many browsers using a custom <strong>user stylesheet</strong> designed to tailor the experience to the user's wishes.</p> + +<h3 id="Override_stylesheets" name="Override_stylesheets">Override stylesheets {{Obsolete_Inline}}</h3> + +<p>This feature was never implemented outside of Gecko, where it was only ever used for the non-standard <a href="/en-US/docs/Mozilla/Tech/XBL">XBL stylesheets</a>.</p> + +<h2 id="Cascading_order">Cascading order</h2> + +<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p> + +<ol> + <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li> + <li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: + <table class="standard-table"> + <thead> + <tr> + <th scope="col"> </th> + <th scope="col">Origin</th> + <th scope="col">Importance</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>CSS Transitions</td> + <td><em>see below</em></td> + </tr> + <tr> + <td>2</td> + <td>user agent</td> + <td>normal</td> + </tr> + <tr> + <td>3</td> + <td>user</td> + <td>normal</td> + </tr> + <tr> + <td> </td> + <td>override {{Obsolete_Inline}}</td> + <td>normal</td> + </tr> + <tr> + <td>4</td> + <td>author</td> + <td>normal</td> + </tr> + <tr> + <td>5</td> + <td>CSS Animations</td> + <td><em>see below</em></td> + </tr> + <tr> + <td> </td> + <td>override {{Obsolete_Inline}}</td> + <td><code>!important</code></td> + </tr> + <tr> + <td>6</td> + <td>author</td> + <td><code>!important</code></td> + </tr> + <tr> + <td>7</td> + <td>user</td> + <td><code>!important</code></td> + </tr> + <tr> + <td>8</td> + <td>user agent</td> + <td><code>!important</code></td> + </tr> + </tbody> + </table> + </li> + <li>In case of equality, the <a href="/en-US/docs/Web/CSSSpecificity" title="/en-US/docs/Web/CSSSpecificity">specificity</a> of a value is considered to choose one or the other.</li> +</ol> + +<h2 id="Resetting_styles">Resetting styles</h2> + +<p>After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property {{cssxref("all")}} lets you quickly set (almost) everything in CSS back to a known state.</p> + +<p><code>all</code> lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.</p> + +<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2> + +<p><a href="/en-US/docs/Web/CSSUsing_CSS_animations" title="/en-US/docs/Web/CSSUsing_CSS_animations">CSS animations</a>, using {{ cssxref("@keyframes")}} at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single {{cssxref("@keyframes")}}, and never mixes multiple ones together.</p> + +<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p> + +<p>Also note that values within <code>@keyframes</code> at-rules overwrite all normal values but are overwritten by <code>!important</code> values.</p> + +<h2 id="Example">Example</h2> + +<p>Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:</p> + +<p><strong>User-agent CSS:</strong></p> + +<pre class="brush:css;">li { margin-left: 10px }</pre> + +<p><strong class="brush:css;">Author CSS 1:</strong></p> + +<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre> + +<p><strong class="brush:css;">Author CSS 2:</strong></p> + +<pre class="brush:css;">@media screen { + li { margin-left: 3px } +} + +@media print { + li { margin-left: 1px } +} +</pre> + +<p><strong class="brush:css;">User CSS:</strong></p> + +<pre class="brush:css;">.specific { margin-left: 1em }</pre> + +<p><strong>HTML:</strong></p> + +<pre class="brush:html;"><ul> + <li class="specific">1<sup>st</sup></li> + <li>2<sup>nd</sup></li> +</ul> +</pre> + +<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code>, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p> + +<p>So three declarations are in competition:</p> + +<pre class="brush:css;">margin-left: 0</pre> + +<pre class="brush:css;">margin-left: 3px</pre> + +<pre class="brush:css;">margin-left: 1px</pre> + +<p>The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, it is the last one that is then selected:</p> + +<pre class="brush:css;">margin-left: 3px</pre> + +<p>Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.</p> + +<h2 id="Specifications">Specifications</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")}}</td> + <td>{{Spec2("CSS4 Cascade")}}</td> + <td>Added the {{CSSxRef("revert")}} keyword, which allows rolling a property back a cascade level.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Cascade")}}</td> + <td>{{Spec2("CSS3 Cascade")}}</td> + <td>Removed the override cascade origin, as it was never used in a W3C standard.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Style","css.html#CSS-OverrideAndComputed","override cascade origin")}}</td> + <td>{{Spec2("DOM2 Style")}}</td> + <td>Defined the override cascade origin, but didn't elaborate further.</td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">A very simple introduction to the CSS cascade</a></li> + <li>{{CSS_Key_Concepts}}</li> +</ul> |