---
title: 종속과 상속
slug: Web/CSS/시작하기/종속과_상속
translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
---
<p>{{ CSSTutorialTOC() }}</p>

<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/14)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>

<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/How_CSS_works", "CSS 동작 원리")}}<span class="seoSummary"><a href="/en-US/docs/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서의 4번쨰 섹션; stylesheets가 종속적으로 동작하는 것과 element가 부모로 부터 style을 상속 받는 것에 대해 서술해 본다. 단순하게 document의 많은 Style중 어떤 Style을 사용할 것인지 한단계 상속만으로 하나의 Style을 stylesheet에 추가 할 수 있다.</span></p>

<h2 class="clearLeft" id="정보_종속과_상속">정보: 종속과 상속</h2>

<p>element의 최종 style은 다양한 상호작용을 통해 여러 장소에서 선언된 것을 사용할 수 있다. 이런 다양한 상호작용을 통해 CSS는 강력해 질 수 있으며, 반대로 디버그 하기에는 복잡하고 어려워 진다.</p>

<p>종속의 세가지 주요 원천은 아래와 같다.</p>

<ul>
 <li>마크업 언어를 위한 브라우저의 기본 style들</li>
 <li>document를 읽는 사용자가 정의하는 styles</li>
 <li>만든이에 의해 Style은 Document와 연결된다. 다음 3곳에서 그 내용을 명시할 수 있다.These can be specified in three places:
  <ul>
   <li>외부 파일: 이 안내서에서 주로 취급하는 Style에 대한 정의하는 법.</li>
   <li>Document의 시작 부분에 정의하는 법: 선언한 Style은 선언된 Document의 페이지에서만 사용된다.</li>
   <li>Document body의 특정 element에: 유지 보수가 가장 불편한 방법이며, 주로 테스트 용도로 쓴다.</li>
  </ul>
 </li>
</ul>

<p>사용자 Style은 브라우저의 기본 Style을 변경 할수 있다. document 만든이의 style 에서 더 수정 변경 될 수도 있다. 이 안내서에서는, 예제 Document에서 만든 자신만의 stylesheets를 만들 수 있다.</p>

<div class="tuto_example">
<div class="tuto_type">예제</div>

<p>이 문서를 브라우저로 보면, 일부 style은 브라우저의 기본 값을 사용한다.</p>

<p>일부는 브라우저 셋팅에서 수정한 style이 저장된 파일에서 가져온다. 파이어 폭스 브라우저에서 "설정" 메뉴나, 브라우저 폴더에 있는 userContent.css 직접 수정하여 변경 가능하다.</p>

<p>일부 style은 wiki server에 의해 Stylesheet에 정의된 값을 사용한다.</p>
</div>

<p>예제 Document를 브라우저에서 열면, {{ HTMLElement("strong") }} elements로 지정된 문자는 다른 문자들 보다 두껍다. 이 Style은 기본 Style로 설정된 값에서 나온다.</p>

<p>{{ HTMLElement("strong") }} elements의 색상은 red이다. 이 값은 예제 stylesheet에서 값을 가져 온다.</p>

<p>{{ HTMLElement("strong") }} elements는 {{ HTMLElement("p") }} element의 자식 style이므로 대부분의 {{ HTMLElement("p") }} element의 style을 상속한다. 같은 방식으로, {{ HTMLElement("p") }} element는 {{ HTMLElement("body") }} element의 대부분의 style을 상속한다.</p>

<p>종속적인 면에서 style은, 제작자(author)의 stylesheets가 사용자(reader) stylesheet보다도 브라우저의 기본 값보다도 우선 순위가 높다.</p>

<p>상속적인 면에서는, 자식 노드의 자체 Style이 부모의 Style보다 우선 순위가 높다.</p>

<p>우선 순위만 적용되는 것은 아니다. 페이지 아래부분에 좀더 자세히 설명 하도록 하자.</p>

<div class="tuto_details">
<div class="tuto_type">좀더 자세히</div>

<p>CSS는 <code>!important 키워드를 써서 </code>사용자(reader)가 document 제작자(author)의 style을 덮어 쓰는 방법도 제공힌다.</p>

<p>이는 Document 제작자에게 사용자가 항상 제작자가 만든 내용을 그대로 본다는 것을 보장 하지 않는 다는 것을 의미한다.</p>

<p>종속과 상속에 대해 자세히 알고 싶다면, CSS의 상세 사양서 중 <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">속성 값 할당, 종속 및 상속</a> 부분을 보라.</p>
</div>

<h2 id="액션_상속_사용하기">액션: 상속 사용하기</h2>

<ol>
 <li>CSS 예제 파일을 편집해 보자.</li>
 <li>아래 라인을 추가 하라. 이미 문서 내에 존재하는 다른 내용이 있더라도 문서의 어디에 추가하든 상관 없다. 그러나, 맨 위에 추가 할수록 Document에 있는{{ HTMLElement("p") }} element가 {{ HTMLElement("strong") }} element의 부모가 되므로 지역적으로 영향을 미친다.
  <pre class="brush:css">p {color: blue; text-decoration: underline;}
</pre>
 </li>
 <li>이제 브라우저를 갱신하여 적용된 사항을 보라. 첫글자를 포함한 모든 문자들에 밑출이 그어져 있다. {{ HTMLElement("strong") }} elements는 부모{{ HTMLElement("p") }} element의 밑줄 속성을 상속 받았다.<br>

  <p>그러나 {{ HTMLElement("strong") }} elements는 여전히 붉은색이다. 붉은색 속성은 자체 속성이므로 부모인 {{ HTMLElement("p") }} element의 파란색 속성보다 우선한다.</p>
 </li>
</ol>

<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
</table>

<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;">
 <caption>Before</caption>
 <tbody>
  <tr>
   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
  </tr>
 </tbody>
</table>

<table style="border: 2px outset #3366bb; padding: 1em;">
 <caption>After</caption>
 <tbody>
  <tr>
   <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
  </tr>
 </tbody>
</table>

<div class="tuto_example">
<div class="tuto_type">도전</div>
Stylesheet를 변경하여 아래와 같이 붉은 글자만 밑줄 속성을 가지도록 수정 해 보라.

<table style="border: 2px outset #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
  </tr>
 </tbody>
</table>

<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">Possible solution</div>

<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p>

<pre class="brush: css">p {color: blue; }
strong {color: orange; text-decoration: underline;}
</pre>

<p> </p>
<a class="hideAnswer" href="#challenge">Hide solution</a></div>
<a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인</a></div>

<h2 id="다음에는">다음에는?</h2>

<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Selectors", "설렉터")}}예제 Stylesheet의 <code>&lt;p&gt;</code>와 <code>&lt;strong&gt; 태그</code>를 원하는 style로 임으로 바꾸어 보라. 다음 장에는 <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="/en-US/docs/CSS/Getting_Started/Selectors">설렉터</a>를 사용하는 법에 대해 알아보자.</p>