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
|
---
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><p></code>와 <code><strong> 태그</code>를 원하는 style로 임으로 바꾸어 보라. 다음 장에는 <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="/en-US/docs/CSS/Getting_Started/Selectors">설렉터</a>를 사용하는 법에 대해 알아보자.</p>
|
