reference book

CSS 레퍼런스 북

CSS 레퍼 런스

번호 속성 설명 보기 중요 비고
01 <accent-color> 일부 요소에서 생성된 사용자 인터페이스 컨트롤의 강조 색상을 설정 합니다 클릭 star star star star star
02 <align-content> flexbox 의 교차 축 또는 grid 의 블록 축을 align-content따라 콘텐츠 항목 사이 및 주변의 공간 분포를 설정합니다 . __
03 <align-items> 모든 직계 자식의 값 align-self을 그룹으로 설정합니다. Flexbox에서는 Cross Axis 항목의 정렬을 제어합니다 . 그리드 레이아웃에서는 그리드 영역 내에서 블록 축의 항목 정렬을 제어합니다 . __ grade grade grade grade grade delete
04 <align-self> 그리드 또는 플렉스 항목의 값을 재정의합니다. 그리드에서는 그리드 영역 내부에 항목을 정렬합니다 . Flexbox에서는 항목을 교차 축 에 정렬합니다 __
05 <all> CSS 사용자 정의 속성 을 제외한 요소의 모든 속성을 재설정합니다 . 속성을 초기 값이나 상속된 값으로 설정하거나 다른 캐스케이드 레이어나 스 타일시트 원본에 지정된 값으로 설정할 수 있습니다 __
06 <animation> 스타일 사이에 애니메이션을 적용합니다. __
07 <animation-delay> 애니메이션을 수행하기 시작하기 전에 요소에 애니메이션을 적용할 때까지 기다려야 하는 시간을 지정합니다. 애니메이션은 나중에 시작하거나 처음부터 즉시 시작하거나 애니메이션의 즉시 및 중간에 시작할 수 있습니다 __
07 <animation-direction> 애니메이션이 앞으로, 뒤로 또는 시퀀스를 앞뒤로 재생하는 사이에 앞뒤로 번갈아 재생해야 하는지 여부를 설정합니다 __
08 <animation-duration> 애니메이션이 한 주기를 완료하는 데 걸리는 시간을 설정합니다 __
09 <animation-fill-mode> CSS 애니메이션이 실행 전후에 대상에 스타일을 적용하는 방법을 설정합니다 __
10 <animation-iteration-count> 애니메이션 시퀀스가 ​​중지되기 전에 재생되어야 하는 횟수를 설정합니다 __
11 <animation-name> 요소에 적용할 애니메이션을 설명하는 하나 이상의 at-규칙 이름을 지정합니다 __
12 <animation-play-state> 애니메이션이 실행 중인지 일시 중지되었는지 설정합니다 __
13 <animation-timeline> 요소에 적용할 스크롤 애니메이션을 설명하는 하나 이상의 at-규칙 이름을 지정합니다 __
14 <animation-timing-function> 애니메이션 움직임 속도 설정,각 주기의 지속 시간 동안 애니메이션이 진행되는 방식을 설정합니다 __
15 <appearance> 운영 체제의 테마를 기반으로 하는 UI 컨트롤의 기본 모양을 제어하는 ​​데 사용됩니다 . __
15 <aspect-ratio> 자동 크기 및 기타 레이아웃 기능 계산에 사용되는 상자의 기본 종횡비를 설정 합니다 __
16 <backdrop-filter> 요소 뒤 영역에 흐림 또는 색상 이동과 같은 그래픽 효과를 적용할 수 있습니다 . 요소 뒤 의 모든 것에 적용되기 때문에 효과를 보려면 요소나 배경을 최소한 부분적으로 투명하게 만들어야 합니다 __
17 <backface-visibility> 사용자를 향할 때 요소의 뒷면을 볼 수 있는지 여부를 설정합니다 __
18 <background> 백그라운드 속성을 일괄적으로 설정,색상, 이미지, 원점 및 크기 또는 반복 방법과 같은 모든 배경 스타일 속성을 한 번에 설정합니다 __
19 <background-attachment> 배경이미지고정 여부 설정,배경 이미지의 위치가 뷰포트 내에서 고정되는지 또는 포함하는 블록과 함께 스크롤되는지 여부를 설정합니다 __
20 <background-blend-mode> 배경을 혼합했을 때 그래픽 효과 설정, 요소의 배경 이미지가 서로 그리고 요소의 배경색과 어떻게 혼합되어야 하는지를 설정합니다 __
21 <background-clip> 배그라운드 이미지의 위치기준점 설정요소의 배경이 테두리 상자, 패딩 상자 또는 콘텐츠 상자 아래로 확장되는지 여부를 설정합니다 __
22 <background-color> 백그라운드 배경색 설정, 요소의 배경색을 설정합니다 __
23 <background-image> 백그라운드 이미지 속성을 설정, 요소에 하나 이상의 배경 이미지를 설정합니다 __
24 <background-origin> 백그라운드 이미지의 위치기준점을 설정합니다 __
25 <background-position> 백그라운드 이미지의 위치영역을 설정합니다 __
26 <background-position-x> 백그라운드 이미지의 X축 위치영역을 설정합니다 __
27 <background-position-y> 백그라운드 이미지의 Y축 위치영역을 설정합니다 __
28 <background-repeat> 백그라운드 이미지 반복 설정합니다 __
29 <background-size> 백그라운드 이미지 사이지 설정합니다 __
30 <block-size> __
31 <bdi> __
32 <border> 테두리 속성을 일괄적으로 설정합니다 __
33 <border-block> __
34 <border-block-color> __
35 <border-block-end> __
36 <border-block-end-color> __
37 <border-block-end-style> __
38 <border-block-end-width> __
39 <border-block-start> __
40 <border-block-start-color> __
41 <border-block-start-style> __
42 <border-block-start-width> __
43 <border-block-style> __
44 <border-block-width> __
45 <border-bottom> 아래쪽 속성을 일괄적으로 설정합니다 __
46 <border-bottom-color> 테두리 아래쪽 색속성을 일괄적으로 설정합니다 __
47 <border-bottom-left-radius> __
48 <border-bottom-right-radius> 아래 왼쪽 모서리 굴곡을 설정합니다 __
49 <border-bottom-style> 테두리 아래 스타일 속성을 설정합니다 __
50 <border-bottom-width> 테두리 아래 두께 속성을 설정합니다 __
51 <border-collapse> __
52 <border-color> __
53 <border-end-end-radius> __
54 <border-end-start-radius> __
55 <border-image> __
56 <border-image-outset> __
57 <border-image-repeat> __
58 <border-image-slice> __
59 <border-image-source> __
60 <border-image-width> __
61 <border-inline> __
62 <border-inline-color> __
63 <border-inline-end> __
64 <border-inline-end-color> __
65 <border-inline-end-style> __
66 <border-inline-end-width> __
67 <border-inline-start> __
68 <border-inline-start-color> __
69 <border-inline-start-style> __
70 <border-inline-start-width> __
71 <border-inline-style> __
72 <basefont> __
73 <border-inline-width> __
74 <border-left> __
75 <border-left-color> __
76 <border-left-style> __
77 <border-left-width> __
78 <border-radius> __
79 <border-right> __
80 <border-right-color> __
90 <border-right-style> __
91 <border-right-width> __
92 <border-spacing> __
93 <border-start-end-radius> __
94 <border-start-start-radius> __
95 <border-style> __
96 <border-top> __
97 <border-top-color> __
98 <border-top-left-radius> __
99 <border-top-right-radius> __
100 <border-top-style> __
101 <border-top-width> __
102 <border-width> __
103 <bottom> __
104 <box-decoration-break> __
105 <box-shadow> __
106 <box-sizing> __
107 <break-after> __
108 <break-before> __
109 <break-inside> __
110 <caption-side> __
111 <caret-color> __
112 <clear> __
113 <clip> __
114 <clip-path> __
115 <color> __
116 <color-scheme> __
117 <column-count> __
118 <column-fill> __
119 <column-gap (grid-column-gap)> __
120 <column-rule> __
121 <column-rule-color> __
122 <column-rule-style> __
123 <column-rule-width> __
124 <column-span> __
125 <column-width> __
126 <columns> __
127 <contain> __
128 <content> __
129 <content-visibility> __
130 <counter-increment> __
131 <counter-reset> __
132 <counter-set> __
133 <cursor> __
134 <direction> __
135 <display> __
136 <empty-cells> __
137 <filter> __
138 <flex> __
139 <flex-basis> __
140 <flex-direction> __
141 <flex-flow> __
142 <flex-grow> __
143 <flex-shrink> __
144 <flex-wrap> __
145 <float> __
146 <font> __
147 <font-family> __
148 <font-feature-settings> __
149 <font-kerning> __
150 <font-language-override> __
151 <font-optical-sizing> __
152 <font-size> __
153 <font-size-adjust> __
154 <font-stretch> __
155 <font-style> __
156 <font-synthesis> __
157 <font-variant> __
158 <font-variant-alternates> __
159 <font-variant-caps> __
160 <font-variant-east-asian> __
161 <font-variant-ligatures> __
162 <font-variant-numeric> __
163 <font-variant-position> __
164 <font-variation-settings> __
165 <font-weight> __
166 <forced-color-adjust;> __
167 <gap (grid-gap)> __
168 <grid> __
169 <grid-area> __
170 <grid-auto-columns> __
171 <grid-auto-flow> __
172 <grid-auto-rows> __
173 <grid-column> __
174 <grid-column-end> __
175 <grid-column-start> __
176 <grid-row> __
177 <grid-row-end> __
178 <grid-row-start> __
179 <grid-template> __
180 <grid-template-areas> __
181 <grid-template-columns> __
182 <grid-template-rows> __
183 <hanging-punctuation> __
184 <height> __
185 <hyphenate-character> __
186 <hyphens> __
187 <image-orientation> __
188 <image-rendering> __
189 <image-resolution> __
190 <ime-mode> __
191 <initial-letter> __
192 <initial-letter-align> __
193 <inline-size> __
194 <inset> __
195 <inset-block> __
196 <inset-block-end> __
197 <inset-block-start> __
198 <inset-inline> __
199 <inset-inline-end> __
200 <inset-inline-start> __
201 <isolation> __
202 <justify-content> __
203 <justify-items> __
204 <justify-self> __
205 <left> __
206 <letter-spacing> __
207 <line-break> __
208 <line-height> __
209 <line-height-step> __
210 <list-style> __
211 <list-style-image> __
212 <list-style-position> __
213 <list-style-type> __
214 <margin> __
215 <margin-block> __
216 <margin-block-end> __
217 <margin-block-start> __
218 <margin-bottom> __
219 <margin-inline> __
220 <margin-inline-end> __
221 <margin-inline-start> __
222 <margin-left> __
223 <margin-right> __
224 <margin-top> __
225 <margin-trim> __
226 <mask> __
227 <mask-border> __
228 <mask-border-mode> __
229 <mask-border-outset> __
230 <mask-border-repeat> __
231 <mask-border-slice> __
232 <mask-border-source> __
233 <mask-border-width> __
234 <mask-clip> __
235 <mask-composite> __
236 <mask-image> __
237 <mask-mode> __
238 <mask-origin> __
239 <mask-position> __
240 <mask-repeat> __
241 <mask-size> __
242 <mask-type> __
243 <max-block-size> __
244 <max-height> __
245 <max-inline-size> __
246 <max-width> __
247 <min-block-size> __
248 <min-height> __
249 <min-inline-size> __
250 <min-width> __
251 <mix-blend-mode> __
252 <object-fit> __
253 <object-position> __
254 <offset> __
255 <offset-anchor> __
256 <offset-distance> __
257 <offset-path> __
258 <offset-position> __
259 <offset-rotate> __
260 <opacity> __
261 <order> __
262 <orphans> __
263 <outline> __
264 <outline-color> __
265 <outline-offset> __
266 <outline-style> __
267 <outline-width> __
268 <overflow> __
269 <overflow-anchor> __
270 <overflow-block> __
271 <overflow-clip-margin> __
272 <overflow-inline> __
273 <overflow-wrap> __
274 <overflow-x> __
275 <overflow-y> __
276 <overscroll-behavior> __
277 <overscroll-behavior-block> __
278 <overscroll-behavior-inline > __
279 <overscroll-behavior-x> __
280 <overscroll-behavior-y> __
281 <padding> __
282 <padding-block-end> __
283 <padding-block-start> __
284 <padding-bottom> __
285 <padding-inline-end > __
286 <padding-inline-start > __
287 <padding-left> __
288 <padding-right> __
289 <padding-top> __
290 <page-break-after> __
291 <page-break-before > __
292 <page-break-inside > __
293 <perspective> __
294 <perspective-origin> __
295 <place-conten> __
296 <place-items > __
297 <place-self > __
298 <pointer-events> __
299 <position> __
300 <print-color-adjust > __
301 <quotes> __
302 <resize> __
303 <right > __
304 <rotate > __
305 <row-gap > __
306 <ruby-align> __
307 <ruby-position > __
308 <scale> __
309 <scroll-behavior> __
310 <scroll-margin> __
311 <scroll-margin-block> __
312 <scroll-margin-block-end> __
313 <scroll-margin-block-start> __
314 <scroll-margin-bottom> __
315 <scroll-margin-inline> __
316 <scroll-margin-inline-end> __
317 <scroll-margin-inline-start> __
318 <scroll-margin-left> __
319 <scroll-margin-right> __
320 <scroll-margin-top> __
321 <scroll-padding> __
322 <scroll-padding-block> __
323 <scroll-padding-block-end> __
324 <scroll-padding-block-start> __
325 <scroll-padding-bottom> __
326 <scroll-padding-inline> __
327 <scroll-padding-inline-end> __
328 <scroll-padding-inline-start> __
329 <scroll-padding-left> __
330 <scroll-padding-right> __
331 <scroll-padding-top> __
332 <scroll-snap-align> __
333 <Deprecatedscroll-snap-coordinate> __
334 <Deprecatedscroll-snap-destination> __
335 <Deprecatedscroll-snap-points-x> __
336 <Deprecatedscroll-snap-points-y> __
337 <scroll-snap-stop> __
338 <scroll-snap-type> __
339 <scrollbar-color> __
340 <scrollbar-width> __
341 <shape-image-threshold> __
342 <shape-margin> __
343 <shape-outside> __
344 <tab-size> __
345 <table-layout> __
346 <text-align> __
347 <text-align-last> __
348 <text-combine-upright> __
349 <text-decoration> __
350 <text-decoration-color> __
351 <text-decoration-line> __
352 <Experimentaltext-decoration-skip> __
353 <text-decoration-skip-ink> __
354 <text-decoration-style> __
355 <text-emphasis> __
356 <text-emphasis-color> __
357 <text-emphasis-position> __
358 <text-emphasis-style> __
359 <text-indent> __
360 <text-justify> __
361 <text-orientation> __
362 <text-overflow> __
363 <text-rendering> __
364 <text-shadow> __
365 <Experimentaltext-size-adjust> __
366 <text-transform> __
367 <text-underline-position> __
368 <top> __
369 <touch-action> __
370 <transform> __
371 <transform-box> __
372 <transform-origin> __
373 <transform-style> __
374 <transition> __
375 <transition-delay> __
376 <transition-duration> __
377 <transition-property> __
378 <transition-timing-function> __
379 <translate> __
380 <unicode-bidi> __
381 <user-select> __
382 <vertical-align> __
383 <visibility> __
384 <white-space> __
385 <widows> __
386 <width> __
387 <will-change> __
388 <word-break> __
389 <word-spacing> __
390 <writing-mode> __
391 <z-index> __
선택자 종류 예시 설명 중요 비고
기본선택자
태그 선택자 div div태그를 star star star star star
클래스 선택자 div div태그를 star star star star star
아이디 선택자 div div태그를 star star star star star
그룹 선택자 div div태그를 star star star star star
전체 선택자 div div태그를 star star star star star
계층선택자
하위 선택자 div div태그를 star star star star star
자식 선택자 div div태그를 star star star star star
형제 선택자 div div태그를 star star star star star
인접 선택자 div div태그를 star star star star star
속성 선택자
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
가상요소
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
가상클래스
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
링크 가상선택자
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
폼 선택자
div div태그를 star star star star star
div div태그를 star star star star star
div div태그를 star star star star star
번호 속성 설명 보기 중요 비고
01 <accent-color> 일부 요소에서 생성된 사용자 인터페이스 컨트롤의 강조 색상을 설정 합니다 클릭 star star star star star