blob: 53ffb2439a4173fb0e6e4e093ecfd322dc07c587 (
plain)
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
---
title: CSS 객체 모델 (CSSOM)
slug: Web/API/CSS_Object_Model
tags:
- API
- CSSOM
- Overview
- Reference
translation_of: Web/API/CSS_Object_Model
---
<p>{{DefaultAPISidebar('CSSOM')}}</p>
<p><strong>CSS Object Model</strong>은 JavaScript에서 CSS를 조작할 수 있는 API 집합입니다. HTML 대신 CSS가 대상인 DOM이라고 생각할 수 있으며, 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법입니다.</p>
<h2 id="참고서">참고서</h2>
<div class="index">
<ul>
<li>{{DOMxRef("AnimationEvent")}}</li>
<li>{{DOMxRef("CaretPosition")}}</li>
<li>{{DOMxRef("CSS")}}</li>
<li>{{DOMxRef("CSSCharsetRule")}}</li>
<li>{{DOMxRef("CSSConditionRule")}}</li>
<li>{{DOMxRef("CSSCounterStyleRule")}}</li>
<li>{{DOMxRef("CSSFontFaceRule")}}</li>
<li>{{DOMxRef("CSSFontFeatureValuesMap")}}</li>
<li>{{DOMxRef("CSSFontFeatureValuesRule")}}</li>
<li>{{DOMxRef("CSSGroupingRule")}}</li>
<li>{{DOMxRef("CSSImportRule")}}</li>
<li>{{DOMxRef("CSSKeyframeRule")}}</li>
<li>{{DOMxRef("CSSKeyframesRule")}}</li>
<li>{{DOMxRef("CSSMarginRule")}}</li>
<li>{{DOMxRef("CSSMediaRule")}}</li>
<li>{{DOMxRef("CSSNamespaceRule")}}</li>
<li>{{DOMxRef("CSSPageRule")}}</li>
<li>{{DOMxRef("CSSRule")}}</li>
<li>{{DOMxRef("CSSRuleList")}}</li>
<li>{{DOMxRef("CSSStyleDeclaration")}}</li>
<li>{{DOMxRef("CSSStyleSheet")}}</li>
<li>{{DOMxRef("CSSStyleRule")}}</li>
<li>{{DOMxRef("CSSSupportsRule")}}</li>
<li>{{DOMxRef("CSSVariablesMap")}}</li>
<li>{{DOMxRef("CSSViewportRule")}}</li>
<li>{{DOMxRef("ElementCSSInlineStyle")}}</li>
<li>{{DOMxRef("FontFace")}}</li>
<li>{{DOMxRef("FontFaceSet")}}</li>
<li>{{DOMxRef("FontFaceSetLoadEvent")}}</li>
<li>{{DOMxRef("GeometryUtils")}}</li>
<li>{{DOMxRef("GetStyleUtils")}}</li>
<li>{{DOMxRef("LinkStyle")}}</li>
<li>{{DOMxRef("MediaList")}}</li>
<li>{{DOMxRef("MediaQueryList")}}</li>
<li>{{DOMxRef("MediaQueryListEvent")}}</li>
<li>{{DOMxRef("MediaQueryListListener")}}</li>
<li>{{DOMxRef("Screen")}}</li>
<li>{{DOMxRef("StyleSheet")}}</li>
<li>{{DOMxRef("StyleSheetList")}}</li>
<li>{{DOMxRef("TransitionEvent")}}</li>
</ul>
</div>
<p>여러 다른 인터페이스도 CSSOM-related 규격에 의해 확장됩니다 : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p>
<h3 id="CSS_Typed_Object_Model" name="CSS_Typed_Object_Model">CSS 자료형 객체 모델 {{experimental_inline}}</h3>
<p>{{SeeCompatTable}}</p>
<div class="index">
<ul>
<li>{{DOMxRef("CSSImageValue")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSKeywordValue")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSMathInvert")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSMathMax")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSMathMin")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSMathNegate")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSMathProduct")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSMathSum")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSMathValue")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSMatrixComponent")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSNumericArray")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSNumericValue")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSPerspective")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSPositionValue")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSRotate")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSScale")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSSkew")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSSkewX")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSSkewY")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSStyleValue")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSTransformComponent")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSTransformValue")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSTranslate")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSUnitValue")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSUnparsedValue")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("CSSVariableReferenceValue")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("StylePropertyMap")}} {{Experimental_Inline}}</li>
<li>{{DOMxRef("StylePropertyMapReadOnly")}} {{Experimental_Inline}}</li>
</ul>
</div>
<h2 id="자습서">자습서</h2>
<ul>
<li><a href="/ko/docs/WebAPI/Managing_screen_orientation">화면 방향 관리</a></li>
</ul>
<h2 id="명세서">명세서</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName("CSS Typed OM")}}</td>
<td>{{Spec2("CSS Typed OM")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("CSS Painting API")}}</td>
<td>{{Spec2("CSS Painting API")}}</td>
<td>Extended the {{DOMxRef("CSS")}} interface with the {{DOMxRef("CSS.paintWorklet","paintWorklet")}} static property.</td>
</tr>
<tr>
<td>{{SpecName("CSSOM View")}}</td>
<td>{{Spec2("CSSOM View")}}</td>
<td>Defined the {{DOMxRef("Screen")}} and {{DOMxRef("MediaQueryList")}} interfaces and the {{DOMxRef("MediaQueryListEvent")}} event and {{DOMxRef("MediaQueryListListener")}} event listener.</td>
</tr>
<tr>
<td>{{SpecName("CSSOM")}}</td>
<td>{{Spec2("CSSOM")}}</td>
<td>Extended the {{DOMxRef("CSS")}} interface and provides the base for the modern CSSOM specification.</td>
</tr>
<tr>
<td>{{SpecName("Screen Orientation")}}</td>
<td>{{Spec2("Screen Orientation")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("CSS3 Fonts")}}</td>
<td>{{Spec2("CSS3 Fonts")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("CSS3 Animations")}}</td>
<td>{{Spec2("CSS3 Animations")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("CSS3 Transitions")}}</td>
<td>{{Spec2("CSS3 Transitions")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("CSS3 Variables")}}</td>
<td>{{Spec2("CSS3 Variables")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("CSS3 Conditional")}}</td>
<td>{{Spec2("CSS3 Conditional")}}</td>
<td>Defined the {{DOMxRef("CSS")}} interface.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Device")}}</td>
<td>{{Spec2("CSS3 Device")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("CSS3 Counter Styles")}}</td>
<td>{{Spec2("CSS3 Counter Styles")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("DOM2 Style")}}</td>
<td>{{Spec2("DOM2 Style")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/API/Document_Object_Model">문서 객체 모델 (DOM)</a></li>
<li><a href="/ko/docs/Web/Houdini/">CSS Houdini</a></li>
</ul>
|
