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
190
|
---
title: CSS 참고서
slug: Web/CSS/Reference
tags:
- CSS
- Guide
- Overview
- Reference
- 'l10n:priority'
translation_of: Web/CSS/Reference
---
<div>{{CSSRef}}</div>
<p><strong>CSS 참고서</strong>를 이용해 <a href="#키워드_색인">알파벳 순서로 정리한</a> 모든 표준 <a href="/ko/docs/Web/CSS">CSS</a> 속성, <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>, <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>, <a href="/ko/docs/Web/CSS/CSS_Types">CSS 자료형</a>과 <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 찾아보세요. 또한 <a href="#선택자">유형별로 정리한 CSS 선택자</a>와 <a href="#개념">주요 CSS 개념</a>도 찾아볼 수 있습니다. 추가로 간단한 <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM</a> 참조도 들어 있습니다.</p>
<h2 id="기본_규칙_구문">기본 규칙 구문</h2>
<h3 id="스타일_규칙_구문">스타일 규칙 구문</h3>
<pre class="syntaxbox notranslate"><var>style-rule</var> <strong>::=</strong>
<var>selectors-list</var> <strong>{</strong>
<var>properties-list</var>
<strong>}</strong>
</pre>
<p>... where :</p>
<pre class="syntaxbox notranslate"><var>selectors-list</var> <strong>::=</strong>
<var>selector</var>[<strong>:</strong><var>pseudo-class</var>] [<strong>::</strong><var>pseudo-element</var>]
[<strong>,</strong> <var>selectors-list</var>]
<var>properties-list</var> <strong>::=</strong>
[<var>property</var> <strong>:</strong> <var>value</var>] [<strong>;</strong> <var>properties-list</var>]
</pre>
<p>아래 <a href="#선택자">선택자</a>, <a href="#의사_클래스">의사 클래스</a>, <a href="#의사_요소">의사 요소</a> 목록을 참고하세요. 각 <em><code>value</code></em>의 구문은 지정한 <em><code>property</code></em>가 정의하는 자료형에 따라 다릅니다.</p>
<h4 id="스타일_규칙_예제">스타일 규칙 예제</h4>
<pre class="brush: css notranslate">strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
</pre>
<p>CSS 선택자 구문을 설명하는 입문자 단계의 소개 부분은 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS/%EC%84%A0%ED%83%9D%EC%9E%90">이 자습서</a>에서 찾아볼 수 있습니다. 규칙 정의에서 <a href="/ko/docs/Web/CSS/syntax">구문</a> 오류가 하나라도 발생하면 규칙 전체가 유효하지 않다는 점을 명심하세요. 유효하지 않은 규칙은 브라우저가 무시합니다. CSS 규칙 정의는 모두 (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">텍스트에 기반</a>하지만, DOM-CSS / CSSOM (규칙 관리 시스템)은 <a href="https://www.w3.org/TR/cssom/#introduction">객체에 기반</a>합니다.</p>
<h3 id="규칙_구문">@규칙 구문</h3>
<p>@규칙 체계는 매우 다양하므로 필요한 구체적인 구문을 찾으려면 <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 봐주세요.</p>
<h2 id="키워드_색인">키워드 색인</h2>
<div class="blockIndicator note">
<p><strong>참고:</strong> 이 색인에 있는 속성 이름에는 CSS 표준 이름과 다른 <a href="/ko/docs/Web/CSS/CSS_Properties_Reference">JavaScript 이름</a>이 들어가지 않습니다.</p>
</div>
<div>{{CSS_Ref}}</div>
<h2 id="선택자">선택자</h2>
<p>다음은 <a href="/ko/docs/Web/CSS/CSS_Selectors">선택자</a> 목록입니다. 선택자를 사용하면 DOM 요소의 다양한 기능에 기반한 조건을 통해 스타일을 입힐 수 있습니다.</p>
<h3 id="기본_선택자">기본 선택자</h3>
<p><strong>기본 선택자</strong>는 선택자의 기초를 이루며, 조합을 통해 더 복잡한 선택자를 생성합니다.</p>
<ul>
<li><a href="/ko/docs/Web/CSS/Universal_selectors">전체 선택자</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li>
<li><a href="/ko/docs/Web/CSS/Type_selectors">태그 선택자</a> <em><code>elementname</code></em></li>
<li><a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a> <code>.<em>classname</em></code></li>
<li><a href="/ko/docs/Web/CSS/ID_selectors">ID 선택자</a> <code>#<em>idname</em></code></li>
<li><a href="/ko/docs/Web/CSS/Attribute_selectors">속성 선택자</a> <code>[<em>attr</em>=<em>value</em>]</code></li>
</ul>
<h3 id="그룹_선택자">그룹 선택자</h3>
<dl>
<dt><a href="/ko/docs/Web/CSS/Selector_list">선택자 목록</a> <code><em>A</em>, <em>B</em></code></dt>
<dd>A와 B 요소를 모두 선택합니다. 일치하는 여러가지 요소를 선택할 때 사용합니다.</dd>
</dl>
<h3 id="결합자">결합자</h3>
<p>결합자는 "<em><code>A</code></em>는 <em><code>B</code></em>의 자식", "<em><code>A</code></em>는 <em><code>B</code></em>와 인접 요소"처럼, 두 개 이상의 선택자끼리 관계를 형성합니다.</p>
<dl>
<dt><a href="/ko/docs/Web/CSS/%EC%9D%B8%EC%A0%91_%ED%98%95%EC%A0%9C_%EC%84%A0%ED%83%9D%EC%9E%90">인접 형제 결합자</a> <code><em>A</em> + <em>B</em></code></dt>
<dd>요소 <em><code>A</code></em>와 <em><code>B</code></em>가 같은 부모를 가지며 <em><code>B</code></em>가 <em><code>A</code></em>를 바로 뒤따라야 하도록 지정합니다.</dd>
<dt><a href="/ko/docs/Web/CSS/General_sibling_combinator">일반 형제 결합자</a> <code><em>A</em> ~ <em>B</em></code></dt>
<dd>요소 <em><code>A</code></em>와 <em><code>B</code></em>가 같은 부모를 가지며 <em><code>B</code></em>가 <em><code>A</code></em>를 뒤따라야 하도록 지정합니다. 그러나 <em><code>B</code></em>가 <em><code>A</code></em>의 바로 옆에 위치해야 할 필요는 없습니다.</dd>
<dt><a href="/ko/docs/Web/CSS/Child_combinator">자식 결합자</a> <code><em>A</em> > <em>B</em></code></dt>
<dd>요소 <em><code>B</code></em>가 <em><code>A</code></em>의 바로 밑에 위치해야 하도록 지정합니다.</dd>
<dt><a href="/ko/docs/Web/CSS/Descendant_combinator">자손 결합자</a> <code><em>A</em> <em>B</em></code></dt>
<dd>요소 <em><code>B</code></em>가 <em><code>A</code></em>의 밑에 위치해야 하도록 지정합니다. 그러나 <em><code>B</code></em>가 <em><code>A</code></em>의 바로 아래에 있을 필요는 없습니다.</dd>
<dt><a href="/ko/docs/Web/CSS/Column_combinator">열 결합자</a> <code><em>A</em> || <em>B</em></code> {{experimental_inline}}</dt>
<dd>요소 <em><code>B</code></em>가 표의 열 <em><code>A</code></em> 안에 위치해야 하도록 지정합니다. 여러 열에 걸친 요소는, 각각의 열 모두에 대해 안쪽에 위치한 것으로 간주합니다.</dd>
</dl>
<h3 id="의사_클래스요소">의사 클래스/요소</h3>
<dl>
<dt><a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a> <code>:</code></dt>
<dd>요소의 특정 상태를 선택합니다.</dd>
<dt><a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a> <code>::</code></dt>
<dd>HTML이 포함하지 않은 객체를 나타냅니다.</dd>
</dl>
<div class="blockIndicator note">
<p><strong>같이 보기:</strong> <a href="https://www.w3.org/TR/selectors/#overview">Selectors Level 4 명세의 선택자 목록.</a></p>
</div>
<h2 id="개념">개념</h2>
<h3 id="구문과_의미">구문과 의미</h3>
<ul>
<li><a href="/ko/docs/Web/CSS/Syntax">CSS 구문</a></li>
<li><a href="/ko/docs/Web/CSS/At-rule">@-규칙</a></li>
<li><a href="/ko/docs/Web/CSS/Cascade">종속</a></li>
<li><a href="/ko/docs/Web/CSS/Comments">주석</a></li>
<li><a href="/ko/docs/Glossary/Descriptor_(CSS)">서술자</a></li>
<li><a href="/ko/docs/Web/CSS/inheritance">상속</a></li>
<li><a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a></li>
<li><a href="/ko/docs/Web/CSS/Specificity">명시도</a></li>
<li><a href="/ko/docs/Web/CSS/Value_definition_syntax">값 정의 구문</a></li>
</ul>
<h3 id="값">값</h3>
<ul>
<li><a href="/ko/docs/Web/CSS/actual_value">실제값</a></li>
<li><a href="/ko/docs/Web/CSS/computed_value">계산값</a></li>
<li><a href="/ko/docs/Web/CSS/initial_value">초깃값</a></li>
<li><a href="/ko/docs/Web/CSS/resolved_value">결정값</a></li>
<li><a href="/ko/docs/Web/CSS/specified_value">지정값</a></li>
<li><a href="/ko/docs/Web/CSS/used_value">사용값</a></li>
</ul>
<h3 id="레이아웃">레이아웃</h3>
<ul>
<li><a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a></li>
<li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델</a></li>
<li><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a></li>
<li><a href="/ko/docs/Web/CSS/Layout_mode">레이아웃 모드</a></li>
<li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄</a></li>
<li><a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a></li>
<li><a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">쌓임 맥락</a></li>
<li><a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 맥락</a></li>
</ul>
<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
<h3 id="주요_객체_유형">주요 객체 유형</h3>
<ul>
<li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li>
<li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li>
<li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> <span style="white-space: nowrap;">(selector & style)</span></li>
<li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li>
<li>{{DOMxRef("HTMLElement.style")}}</li>
<li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (just style)</li>
<li>{{DOMxRef("Element.className")}}</li>
<li>{{DOMxRef("Element.classList")}}</li>
</ul>
<h3 id="중요_메서드">중요 메서드</h3>
<ul>
<li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li>
<li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li>
</ul>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS 확장</a> (<code>-moz-</code> 접두사 사용)</li>
<li><a href="/ko/docs/Web/CSS/WebKit_Extensions">WebKit CSS 확장</a> (대다수 <code>-webkit-</code> 접두사 사용)</li>
<li><a href="/ko/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS 확장</a> (<code>-ms-</code> 접두사 사용)</li>
</ul>
<h2 id="외부_링크">외부 링크</h2>
<ul>
<li><a href="https://www.w3.org/TR/CSS/#indices">CSS 색인 (w3.org)</a></li>
</ul>
|
