referenece book

CSS 레퍼런스 북

CSS 모든 것, CSS 정리 사이트입니다.

CSS 레퍼런스

번호 속성 설명 중요 보기 비고
01 accent-color accent-color star grade grade grade grade
02 align-content align-content star grade grade grade grade
03 align-items align-items star grade grade grade grade
04 align-self align-self star grade grade grade grade
05 all all star grade grade grade grade
06 animation animation은 애니메이션과 관련된 속성을 일괄적으로 설정합니다. star star star star star
06 animation-delay animation-delay은 애니메이션 지연 시간을 설정합니다. star star star star star
08 animation-direction animation-direction은 애니메이션 움직임 방향을 설정합니다. star star star grade grade
09 animation-duration animation-duration은 애니메이션 움직임 시간을 설정합니다. star star star star star
10 animation-fill-mode animation-fill-mode은 애니메이션이 끝난 후의 상태를 설정합니다. star star grade grade grade
11 animation-iteration-count animation-iteration-count은 애니메이션의 반복 횟수를 설정합니다. star star star star grade
12 animation-name animation-name은 애니메이션 keyframe 이름을 설정합니다. star star star star star
13 animation-play-state animation-play-state은 애니메이션 진행상태를 설정합니다. star star grade grade grade
14 animation-timeline animation-timeline star grade grade grade grade
15 animation-timing-function animation-timing-function은 애니메이션 움직임의 속도를 설정합니다. star star star star star
16 appearance appearance star grade grade grade grade
17 aspect-ratio aspect-ratio star grade grade grade grade
18 backdrop-filter backdrop-filter star grade grade grade grade
19 backface-visibility backface-visibility star grade grade grade grade
20 background background는 백그라운드 속성을 일괄적으로 설정합니다. star star star star star
21 background-attachment background-attachment는 배경 이미지의 고정 여부를 설정합니다. star star star grade grade
22 background-blend-mode background-blend-mode는 배경을 혼합했을 때 그래픽 효과를 설정합니다. star star star grade grade
23 background-clip background-clip는 백그라운드 이미지의 위치 기준점을 설정합니다. star grade grade grade grade
24 background-color background-color는 백그라운드 색을 설정합니다. star star star star star
25 background-image background-image는 백그라운드 이미지 속성을 설정합니다. star star star star star
26 background-origin background-origin는 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다. grade grade grade grade grade
27 background-position background-position는 백그라운드 이미지의 위치 영역을 설정합니다. star star star star star
28 background-position-x background-position-x는 백그라운드 이미지의 x축 위치 영역을 설정합니다. star grade grade grade grade
29 background-position-y background-position-y는 백그라운드 이미지의 y축 위치 영역을 설정합니다. star grade grade grade grade
30 background-repeat background-repeat는 백그라운드 이미지 반복 여부를 설정합니다. star star star star star
31 background-size background-size는 백그라운드 이미지 사이즈를 설정합니다. star star star star star
32 block-size block-size star grade grade grade grade
33 border border는 테두리 속성을 일괄적으로 설정합니다. star star star star star
34 border-block border-block star grade grade grade grade
35 border-block-color border-block-color star grade grade grade grade
36 border-block-end border-block-end star grade grade grade grade
37 border-block-end-color border-block-end-color star grade grade grade grade
38 border-block-end-style border-block-end-style star grade grade grade grade
39 border-block-end-width border-block-end-width star grade grade grade grade
40 border-block-start border-block-start star grade grade grade grade
41 border-block-start-color border-block-start-color star grade grade grade grade
42 border-block-start-style border-block-start-style star grade grade grade grade
43 border-block-start-width border-block-start-width star grade grade grade grade
44 border-block-style border-block-style star grade grade grade grade
45 border-block-width border-block-width star grade grade grade grade
46 border-bottom border-bottom는 아래쪽 속성을 일괄적으로 설정합니다. star star star star grade
47 border-bottom-color border-bottom-color는 테두리 아래쪽 색 속성을 설정합니다. star star star grade grade
48 border-bottom-left-radius border-bottom-left-radius는 아래 왼쪽 모서리 굴곡을 설정합니다. star star grade grade grade
49 border-bottom-right-radius border-bottom-right-radius는 아래 오른쪽 모서리 굴곡을 설정합니다. star star grade grade grade
50 border-bottom-style border-bottom-style는 테두리 아래쪽 스타일 속성을 설정합니다. star star grade grade grade
51 border-bottom-width border-bottom-width는 테두리 아래쪽 두께 속성을 설정합니다. star star grade grade grade
52 border-collapse border-collapse는 표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정합니다. star star star grade grade
53 border-color border-color는 테두리의 색상을 설정합니다. star star star star star
54 border-end-end-radius border-end-end-radius star grade grade grade grade
55 border-end-start-radius border-end-start-radius star grade grade grade grade
56 border-image border-image star grade grade grade grade
57 border-image-outset border-image-outset star grade grade grade grade
58 border-image-repeat border-image-repeat star grade grade grade grade
59 border-image-slice border-image-slice star grade grade grade grade
60 border-image-source border-image-source star grade grade grade grade
61 border-image-width border-image-width star grade grade grade grade
62 border-inline border-inline star grade grade grade grade
63 border-inline-color border-inline-color star grade grade grade grade
64 border-inline-end border-inline-end star grade grade grade grade
65 border-inline-end-color border-inline-end-color star grade grade grade grade
66 border-inline-end-style border-inline-end-style star grade grade grade grade
67 border-inline-end-width border-inline-end-width star grade grade grade grade
68 border-inline-start border-inline-start star grade grade grade grade
69 border-inline-start-color border-inline-start-color star grade grade grade grade
70 border-inline-start-style border-inline-start-style star grade grade grade grade
71 border-inline-start-width border-inline-start-width star grade grade grade grade
72 border-inline-style border-inline-style star grade grade grade grade
73 border-inline-width border-inline-width star grade grade grade grade
74 border-left border-left star grade grade grade grade
75 border-left-color border-left-color star grade grade grade grade
76 border-left-style border-left-style star grade grade grade grade
77 border-left-width border-left-width star grade grade grade grade
78 border-radius border-radius star grade grade grade grade
79 border-right border-right star grade grade grade grade
80 border-right-color border-right-color star grade grade grade grade
81 border-right-style border-right-style star grade grade grade grade
82 border-right-width border-right-width star grade grade grade grade
83 border-spacing border-spacing star grade grade grade grade
84 border-start-end-radius border-start-end-radius star grade grade grade grade
85 border-start-start-radius border-start-start-radius star grade grade grade grade
86 border-style border-style star grade grade grade grade
87 border-top border-top star grade grade grade grade
88 border-top-color border-top-color star grade grade grade grade
89 border-top-left-radius border-top-left-radius star grade grade grade grade
90 border-top-right-radius border-top-right-radius star grade grade grade grade
91 border-top-style border-top-style star grade grade grade grade
92 border-top-width border-top-width star grade grade grade grade
93 border-width border-width star grade grade grade grade
94 bottom bottom는 태그 위치를 하단 기준으로 어느 높이에 위치시킬건지 지정합니다. star star star star star
95 box-decoration-break box-decoration-break star grade grade grade grade
96 box-shadow box-shadow star grade grade grade grade
97 box-sizing box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다 star star star star grade
98 break-after break-after star grade grade grade grade
99 break-before break-before star grade grade grade grade
100 break-inside break-inside star grade grade grade grade
101 caption-side caption-side star grade grade grade grade
102 caret-color caret-color star grade grade grade grade
103 clear clear star grade grade grade grade
104 clip clip star grade grade grade grade delete
105 clip-path clip-path star grade grade grade grade
106 color color star grade grade grade grade
107 color-scheme color-scheme star grade grade grade grade
108 column-count column-count star grade grade grade grade
109 column-fill column-fill star grade grade grade grade
110 column-gap (grid-column-gap) column-gap (grid-column-gap) star grade grade grade grade
111 column-rule column-rule star grade grade grade grade
112 column-rule-color column-rule-color star grade grade grade grade
113 column-rule-style column-rule-style star grade grade grade grade
114 column-rule-width column-rule-width star grade grade grade grade
115 column-span column-span star grade grade grade grade
116 column-width column-width star grade grade grade grade
117 columns columns star grade grade grade grade
118 contain contain star grade grade grade grade
119 content content는 선택한 요소의 내용 앞이나 뒤에 콘텐트를 붙입니다 star star star star star
120 content-visibility content-visibility star grade grade grade grade
121 counter-increment counter-increment star grade grade grade grade
122 counter-reset counter-reset star grade grade grade grade
123 counter-set counter-set star grade grade grade grade
124 cursor cursor star grade grade grade grade
125 direction direction star grade grade grade grade
126 display display는 요소를 어떻게 보여줄지를 결정합니다. 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다. star star star star star
127 empty-cells empty-cells star grade grade grade grade
128 filter filter star grade grade grade grade
129 flex flex는 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정합니다. star star star star star
130 flex-basis flex-basis star grade grade grade grade
131 flex-direction flex-direction는 렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다. star star star star star
132 flex-flow flex-flow star grade grade grade grade
133 flex-grow flex-grow star grade grade grade grade
134 flex-shrink flex-shrink star grade grade grade grade
135 flex-wrap flex-wrap는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정합니다. star star star star star
136 float float는 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. star star star star star
137 font font star grade grade grade grade
138 font-family font-family는 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을 지정할 수 있게 해줍니다. star star star star star
139 font-feature-settings font-feature-settings star grade grade grade grade
140 font-kerning font-kerning star grade grade grade grade
141 font-language-override font-language-override star grade grade grade grade
142 font-optical-sizing font-optical-sizing star grade grade grade grade
143 font-size font-size는 폰트의 크기를 지정합니다. star star star star star
144 font-size-adjust font-size-adjust star grade grade grade grade
145 font-stretch font-stretch star grade grade grade grade
146 font-style font-style는 브라우저의 기본 글꼴 속성을 바꿀 수 있습니다. star star star star star
147 font-synthesis font-synthesis star grade grade grade grade
148 font-variant font-variant star grade grade grade grade
149 font-variant-alternates font-variant-alternates star grade grade grade grade
150 font-variant-caps font-variant-caps star grade grade grade grade
151 font-variant-east-asian font-variant-east-asian star grade grade grade grade
152 font-variant-ligatures font-variant-ligatures star grade grade grade grade
153 font-variant-numeric font-variant-numeric star grade grade grade grade
154 font-variant-position font-variant-position star grade grade grade grade
155 font-variation-settings font-variation-settings star grade grade grade grade
156 font-weight font-weight는 폰트의 가중치(weight)나 굵기(boldness)를 설정합니다. star star star star star
157 forced-color-adjust forced-color-adjust star grade grade grade grade
158 gap (grid-gap) gap (grid-gap) star grade grade grade grade
159 grid grid star grade grade grade grade
160 grid-area grid-area star grade grade grade grade
161 grid-auto-columns grid-auto-columns star grade grade grade grade
162 grid-auto-flow grid-auto-flow star grade grade grade grade
163 grid-auto-rows grid-auto-rows star grade grade grade grade
164 grid-column grid-column star grade grade grade grade
165 grid-column-end grid-column-end star grade grade grade grade
166 grid-column-start grid-column-start star grade grade grade grade
167 grid-row grid-row star grade grade grade grade
168 grid-row-end grid-row-end star grade grade grade grade
169 grid-row-start grid-row-start star grade grade grade grade
170 grid-template grid-template star grade grade grade grade
171 grid-template-areas grid-template-areas star grade grade grade grade
172 grid-template-columns grid-template-columns star grade grade grade grade
173 grid-template-rows grid-template-rows star grade grade grade grade
174 hanging-punctuation hanging-punctuation star grade grade grade grade
175 height height star grade grade grade grade
176 hyphenate-character hyphenate-character star grade grade grade grade
177 hyphens hyphens star grade grade grade grade
178 image-orientation image-orientation star grade grade grade grade
179 image-rendering image-rendering star grade grade grade grade
180 image-resolution image-resolution star grade grade grade grade
181 ime-mode ime-mode star grade grade grade grade delete
182 initial-letter initial-letter star grade grade grade grade
183 initial-letter-align initial-letter-align star grade grade grade grade
184 inline-size inline-size star grade grade grade grade
185 inset inset star grade grade grade grade
186 inset-block inset-block star grade grade grade grade
187 inset-block-end inset-block-end star grade grade grade grade
188 inset-block-start inset-block-start star grade grade grade grade
189 inset-inline inset-inline star grade grade grade grade
190 inset-inline-end inset-inline-end star grade grade grade grade
191 inset-inline-start inset-inline-start star grade grade grade grade
192 isolation isolation star grade grade grade grade
193 justify-content justify-content star grade grade grade grade
194 justify-items justify-items star grade grade grade grade
195 justify-self justify-self star grade grade grade grade
196 left left star grade grade grade grade
197 letter-spacing letter-spacing star grade grade grade grade
198 line-break line-break star grade grade grade grade
199 line-height line-height star grade grade grade grade
200 line-height-step line-height-step star grade grade grade grade
201 list-style list-style star grade grade grade grade
201 list-style-image list-style-image star grade grade grade grade
203 list-style-position list-style-position star grade grade grade grade
204 list-style-type list-style-type star grade grade grade grade
205 margin margin star grade grade grade grade
206 margin-block margin-block star grade grade grade grade
207 margin-block-end margin-block-end star grade grade grade grade
208 margin-block-start margin-block-start star grade grade grade grade
209 margin-bottom margin-bottom star grade grade grade grade
210 margin-inline margin-inline star grade grade grade grade
211 margin-inline-end margin-inline-end star grade grade grade grade
212 margin-inline-start margin-inline-start star grade grade grade grade
213 margin-left margin-left star grade grade grade grade
214 margin-right margin-right star grade grade grade grade
215 margin-top margin-top star grade grade grade grade
216 margin-trim margin-trim star grade grade grade grade
217 mask mask star grade grade grade grade
218 mask-border mask-border star grade grade grade grade
219 mask-border-mode mask-border-mode star grade grade grade grade
220 mask-border-outset mask-border-outset star grade grade grade grade
221 mask-border-repeat mask-border-repeat star grade grade grade grade
222 mask-border-slice mask-border-slice star grade grade grade grade
223 mask-border-source mask-border-source star grade grade grade grade
224 mask-border-width mask-border-width star grade grade grade grade
225 mask-clip mask-clip star grade grade grade grade
226 mask-composite mask-composite star grade grade grade grade
227 mask-image mask-image star grade grade grade grade
228 mask-mode mask-mode star grade grade grade grade
229 mask-origin mask-origin star grade grade grade grade
230 mask-position mask-position star grade grade grade grade
231 mask-repeat mask-repeat star grade grade grade grade
232 mask-size mask-size star grade grade grade grade
233 mask-type mask-type star grade grade grade grade
234 max-block-size max-block-size star grade grade grade grade
235 max-height max-height star grade grade grade grade
236 max-inline-size max-inline-size star grade grade grade grade
237 max-width max-width star grade grade grade grade
238 min-block-size min-block-size star grade grade grade grade
239 min-height min-height star grade grade grade grade
240 min-inline-size min-inline-size star grade grade grade grade
241 min-width min-width star grade grade grade grade
242 mix-blend-mode mix-blend-mode star grade grade grade grade
243 object-fit object-fit star grade grade grade grade
244 object-position object-position star grade grade grade grade
245 offset offset star grade grade grade grade
246 offset-anchor offset-anchor star grade grade grade grade
247 offset-distance offset-distance star grade grade grade grade
248 offset-path offset-path star grade grade grade grade
249 offset-position offset-position star grade grade grade grade
250 offset-rotate offset-rotate star grade grade grade grade
251 opacity opacity star grade grade grade grade
252 order order star grade grade grade grade
253 orphans orphans star grade grade grade grade
254 outline outline star grade grade grade grade
255 outline-color outline-color star grade grade grade grade
256 outline-offset outline-offset star grade grade grade grade
257 outline-style outline-style star grade grade grade grade
258 outline-width outline-width star grade grade grade grade
259 overflow overflow star grade grade grade grade
260 overflow-anchor overflow-anchor star grade grade grade grade
261 overflow-block overflow-block star grade grade grade grade
262 overflow-clip-margin overflow-clip-margin star grade grade grade grade
263 overflow-inline overflow-inline star grade grade grade grade
264 overflow-wrap overflow-wrap star grade grade grade grade
265 overflow-x overflow-x star grade grade grade grade
266 overflow-y overflow-y star grade grade grade grade
267 overscroll-behavio overscroll-behavio star grade grade grade grade
268 overscroll-behavior-block overscroll-behavior-block star grade grade grade grade
269 overscroll-behavior-inline overscroll-behavior-inline star grade grade grade grade
270 overscroll-behavior-x overscroll-behavior-x star grade grade grade grade
271 overscroll-behavior-y overscroll-behavior-y star grade grade grade grade
272 padding padding star grade grade grade grade
273 padding-block-end padding-block-end star grade grade grade grade
274 padding-block-start padding-block-start star grade grade grade grade
275 padding-bottom padding-bottom star grade grade grade grade
276 padding-inline-end padding-inline-end star grade grade grade grade
277 padding-inline-start padding-inline-start star grade grade grade grade
278 padding-inline-start padding-inline-start star grade grade grade grade
279 padding-right padding-right star grade grade grade grade
280 padding-top padding-top star grade grade grade grade
281 page-break-after page-break-after star grade grade grade grade
282 page-break-before page-break-before star grade grade grade grade
283 page-break-inside page-break-inside star grade grade grade grade
284 perspective perspective star grade grade grade grade
285 perspective-origin perspective-origin star grade grade grade grade
286 place-content place-content star grade grade grade grade
287 place-items place-items star grade grade grade grade
288 place-self place-self star grade grade grade grade
289 pointer-events pointer-events star grade grade grade grade
290 position position star grade grade grade grade
291 print-color-adjust print-color-adjust star grade grade grade grade
292 quotes quotes star grade grade grade grade
293 resize resize star grade grade grade grade
294 right right star grade grade grade grade
295 rotate rotate star grade grade grade grade
296 row-gap (grid-row-gap) row-gap (grid-row-gap) star grade grade grade grade
297 ruby-align ruby-align star grade grade grade grade
298 ruby-position ruby-position star grade grade grade grade
299 scale scale star grade grade grade grade
300 scroll-behavior scroll-behavior star grade grade grade grade
301 scroll-margin scroll-margin star grade grade grade grade
302 scroll-margin-block scroll-margin-block star grade grade grade grade
303 scroll-margin-block-end scroll-margin-block-end star grade grade grade grade
304 scroll-margin-block-start scroll-margin-block-start star grade grade grade grade
305 scroll-margin-bottom scroll-margin-bottom star grade grade grade grade
306 scroll-margin-inline scroll-margin-inline star grade grade grade grade
307 scroll-margin-inline-end scroll-margin-inline-end star grade grade grade grade
308 scroll-margin-inline-start scroll-margin-inline-start star grade grade grade grade
309 scroll-margin-left scroll-margin-left star grade grade grade grade
310 scroll-margin-right scroll-margin-right star grade grade grade grade
311 scroll-margin-top scroll-margin-top star grade grade grade grade
312 scroll-padding scroll-padding star grade grade grade grade
313 scroll-padding-block scroll-padding-block star grade grade grade grade
314 scroll-padding-block-end scroll-padding-block-end star grade grade grade grade
315 scroll-padding-block-start scroll-padding-block-start star grade grade grade grade
316 scroll-padding-bottom scroll-padding-bottom star grade grade grade grade
317 scroll-padding-inline scroll-padding-inline star grade grade grade grade
318 scroll-padding-inline-end scroll-padding-inline-end star grade grade grade grade
319 scroll-padding-inline-start scroll-padding-inline-start star grade grade grade grade
320 scroll-padding-left scroll-padding-left star grade grade grade grade
321 scroll-padding-right scroll-padding-right star grade grade grade grade
322 scroll-padding-top scroll-padding-top star grade grade grade grade
323 scroll-snap-align scroll-snap-align star grade grade grade grade
324 scroll-snap-coordinate scroll-snap-coordinate star grade grade grade grade delete
325 scroll-snap-destination scroll-snap-destination star grade grade grade grade delete
326 scroll-snap-points-x scroll-snap-points-x star grade grade grade grade delete
327 scroll-snap-points-y scroll-snap-points-y star grade grade grade grade delete
328 scroll-snap-stop scroll-snap-stop star grade grade grade grade
329 scroll-snap-type scroll-snap-type star grade grade grade grade
330 scrollbar-color scrollbar-color star grade grade grade grade
331 scrollbar-width scrollbar-width star grade grade grade grade
332 shape-image-threshold shape-image-threshold star grade grade grade grade
333 shape-margin shape-margin star grade grade grade grade
334 shape-outside shape-outside star grade grade grade grade
335 tab-size tab-size star grade grade grade grade
336 table-layout table-layout star grade grade grade grade
337 text-align text-align star grade grade grade grade
338 text-align-last text-align-last star grade grade grade grade
339 text-combine-upright text-combine-upright star grade grade grade grade
340 text-decoration text-decoration star grade grade grade grade
341 text-decoration-color text-decoration-color star grade grade grade grade
342 text-decoration-line text-decoration-line star grade grade grade grade
343 decoration-skip decoration-skip star grade grade grade grade
344 text-decoration-skip-ink text-decoration-skip-ink star grade grade grade grade
345 text-decoration-style text-decoration-style star grade grade grade grade
346 text-emphasis text-emphasis star grade grade grade grade
347 text-emphasis-color text-emphasis-color star grade grade grade grade
348 text-emphasis-position text-emphasis-position star grade grade grade grade
349 text-emphasis-style text-emphasis-style star grade grade grade grade
350 text-indent text-indent star grade grade grade grade
351 text-justify text-justify star grade grade grade grade
352 text-orientation text-orientation star grade grade grade grade
353 text-overflow text-overflow star grade grade grade grade
354 text-rendering text-rendering star grade grade grade grade
355 text-shadow text-shadow star grade grade grade grade
356 text-size-adjust text-size-adjust star grade grade grade grade
357 text-transform text-transform star grade grade grade grade
358 text-underline-position text-underline-position star grade grade grade grade
359 top top star grade grade grade grade
360 touch-action touch-action star grade grade grade grade
361 transform transform star grade grade grade grade
362 transform-box transform-box star grade grade grade grade
363 transform-origin transform-origin star grade grade grade grade
364 transform-style transform-style star grade grade grade grade
365 transition transition star grade grade grade grade
366 transition-delay transition-delay star grade grade grade grade
367 transition-duration transition-duration star grade grade grade grade
368 transition-property transition-property star grade grade grade grade
369 transition-timing-function transition-timing-function star grade grade grade grade
370 translate translate star grade grade grade grade
371 unicode-bidi unicode-bidi star grade grade grade grade
372 user-select user-select star grade grade grade grade
373 vertical-align vertical-align star grade grade grade grade
374 visibility visibility star grade grade grade grade
375 white-space white-space star grade grade grade grade
376 widows widows star grade grade grade grade
377 width width star grade grade grade grade
378 will-change will-change star grade grade grade grade
379 word-break word-break star grade grade grade grade
380 word-spacing word-spacing star grade grade grade grade
381 writing-mode writing-mode star grade grade grade grade
382 z-index z-index star grade grade grade grade
선택자 종류 예시 설명 중요 비고
기본 선택자 태그 선택자 div {color: #fff;} div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. star star star star star
클래스 선택자 .class {color: #fff;} .class를 선택하여 글씨 색을 하얀색으로 변경합니다. star star star star star
아이디 선택자 #id {color: #fff;} 아이디(#id)를 선택하여 글씨 색을 하얀색으로 변경합니다. star star star star star
그룹 선택자 h1,h2,h3,h4,h5,h6 {font-weight: normal;} 여러개의 태그를 선택하여 폰트 두께를 기본값으로 설정합니다. star star star star star
전체 선택자 * {margin: 0;} 전체 태그를 선택하여 바깥쪽 여백을 0으로 설정합니다. star star star star star
계층 선택자 하위 선택자 .class div {color: #fff;} .class 아래에 있는 모든 div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. star star star star star
자식 선택자 .class > div {color: #fff;} .class의 자식인 div만 선택하여 글씨 색을 하얀색으로 변경합니다. star star star grade grade
형제 선택자 .class ~ div {color: #fff;} .class와 같은 계층에 있는 div를 선택하여 글씨 색을 하얀색으로 변경합니다. star star star grade grade
인접 선택자 .class + div {color: #fff;} .class의 바로 다음에 나오는 div를 선택하여 글씨 색을 하얀색으로 변경합니다. star star star grade grade
속성 선택자 [name] div[class] 클래스를 갖는 div를 선택 star star star grade grade
[name="value"] div[class="asd"] 클래스를 하나만 가지면서 클래스 이름이 asd인 div를 선택 star star star grade grade
[name~="value"] div[class~="asd"] 클래스 이름이 asd인 클래스를 갖는 div를 선택 star star grade grade grade
[name|="value"] div[class|="asd"] 클래스 이름이 asd거나 이름이 "asd-"로 시작되는 div를 선택 star star grade grade grade
[name^="value"] div[class^="asd"] 클래스 이름이 "asd"로 시작되는 div를 선택 star star grade grade grade
[name$="value"] div[class$="asd"] 클래스 이름이 "asd"로 끝나는 div를 선택 star star grade grade grade
[name*="value"] div[class*="asd"] 클래스 이름이 "asd"를 포함하는 div를 선택 star star grade grade grade
가상요소 ::first-line p::first-line {color: #fff} p 태그를 첫 번째 라인을 선택하여 글씨 색을 흰색으로 변경합니다. star star star grade grade
::first-letter p::first-letter {color: #fff} p 태그의 첫 번째 문자를 선택하여 글씨 색을 흰색으로 변경합니다. star star star grade grade
::before p::before {content: '시작'} p 태그의 시작 지점에 가상 요소를 생성 및 선택하여 content '시작'을 추가합니다. star star star grade grade
::after p::after {content: '마지막'} p 태그의 마지막 지점에 가상 요소를 생성 및 선택하여 content '마지막'을 추가합니다. star star star grade grade
::selection p::selection {color: #fff} p 태그 안에서 드레그 한 영역의 글씨 색깔을 흰색으로 변경합니다. star star star grade grade
가상클래스 :first-child li:first-child {color: #fff} li의 첫번째 자식만 선택하여 글씨 색깔을 흰색으로 변경합니다. star star star grade grade
:last-child li:last-child {color: #fff} li의 마지막 자식만 선택하여 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
:first-of-type p:first-of-type {color: #fff} p 태그 중 첫번째 p만 선택하여 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
:last-of-type p:last-of-type {color: #fff} p 태그 중 마지막 p만 선택하여 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
:nth-child() p:nth-child(2) {color: #fff} p 태그의 앞에서 두번째 자식만 선택하여 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
:nth-last-child() p:nth-child(2) {color: #fff} p 태그의 뒤에서 두번째 자식만 선택하여 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
:nth-of-type() p:nth-of-type(3) {color: #fff} p 태그 중 앞에서 세번째 p만 선택하여 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
:nth-last-of-type() p:nth-last-of-type(3) {color: #fff} p 태그 중 뒤에서 세번째 p만 선택하여 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
only-child p:only-child {color: #fff} p 태그가 유일한 자식이면 선택하여 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
only-of-type() p:only-of-type(3) {color: #fff} p 태그가 유일한 p 태그면 선택하여 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
:not() li:not(:nth-child(2)) {color: #fff} li 태그의 자식 중 앞에서 두번째 자식만 빼고 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
:root :root {color: #fff} 문서상 최상위 요소(html)을 선택하여 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
:empty :empty {color: #fff} 텍스트 및 공백을 포함하여 내용이 없는 태그를 선택하여 색깔을 흰색으로 변경합니다. star star grade grade grade
링크 가상 선택자 :link a:link {color: #fff} 방문하지 않은 링크를 선택하여 글씨 색깔을 흰색으로 변경합니다. star star star grade grade
:visited a:visited {color: #fff} 방문했던 링크를 선택하여 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
:hover a:hover {color: #fff} 마우스를 a태그 위에 올린 상태일때 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
:active a:active {color: #fff} a태그를 마우스로 클릭한 상태일 떄 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
폼 선택자 :checked input:checked {color: #fff} input박스가 체크 되었을 때 글씨 색깔을 흰색으로 변경합니다. star star star grade grade
:focus input:focus {color: #fff} input 박스에 초점(커서 생성)이 맞춰졌을 때 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
:enabled input:enable {color: #fff} input 박스가 사용 가능 할 때 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
input:disabled {color: #fff} input:disabled {color: #fff} input 박스가 사용 불가능 할 때 글씨 색깔을 흰색으로 변경합니다. star star grade grade grade
번호 속성 설명 중요 보기 비고
01 accent-color accent-color star grade grade grade grade