reference book

CSS 레퍼런스 북

CSS 레퍼런스

번호 속성 설명 중요 보기 비고
01 accent-color star grade grade grade grade 클릭
02 align-content star grade grade grade grade 클릭
03 align-items star grade grade grade grade 클릭
04 align-self star grade grade grade grade 클릭
05 all star grade grade grade grade 클릭
06 animation 애니메이션과 관련된 속성을 일괄적으로 설정합니다. star star star star star 클릭
07 animation-delay 애니메이션 지연 시간을 설정합니다. star star star star star 클릭
08 animation-direction 애니메이션 움직임 방향을 설정합니다. star star star grade grade 클릭
09 animation-duration 애니메이션 움직임 시간을 설정합니다. star star star star star 클릭
10 animation-fill-mode 애니메이션이 끝난 후의 상태를 설정합니다. star star grade grade grade 클릭
11 animation-iteration-count 애니메이션의 반복 횟루를 설정합니다. star star star star grade 클릭
12 animation-name 애니메이션 keyframe 이름을 설정합니다. star star star star star 클릭
13 animation-play-state 애니메이션 진행상태를 설정합니다. star star grade grade grade 클릭
14 animation-timeline star grade grade grade grade 클릭
15 animation-timing-function 애니메이션 움직임의 속도를 설정합니다. star star star star star 클릭
16 appearance star grade grade grade grade 클릭
17 aspect-ratio star grade grade grade grade 클릭
18 backdrop-filter star grade grade grade grade 클릭
19 backface-visibility star grade grade grade grade 클릭
20 background 백그라운드 속성을 일괄적으로 설정합니다. star star star star star 클릭
21 background-attachment 배경 이미지의 고정 여부를 설정합니다. star star star grade grade 클릭
22 background-blend-mode 배경을 혼합했을 때 그래픽 효과를 설정합니다. star star star grade grade 클릭
23 background-clip 백그라운드 이미지의 위치 기준점을 설정합니다. star grade grade grade grade 클릭
24 background-color 백그라운드 색을 설정합니다. star star star star star 클릭
25 background-image 백그라운드 이미지 속성을 설정합니다. star star star star star 클릭
26 background-origin 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다. grade grade grade grade grade 클릭
27 background-position 백그라운드 이미지의 위치 영역을 설정합니다. star star star star star 클릭
28 background-position-x 백그라운드 이미지의 x축 위치 영역을 설정합니다. star grade grade grade grade 클릭
29 background-position-y 백그라운드 이미지의 y축 위치 영역을 설정합니다. star grade grade grade grade 클릭
30 background-repeat 백그라운드 이미지 반복 여부를 설정합니다. star star star star star 클릭
31 background-size 백그라운드 이미지 사이즈를 설정합니다. star star star star star 클릭
32 block-size star grade grade grade grade 클릭
33 border 테두리 속성을 일괄적으로 설정합니다. star star star star star 클릭
34 border-block star grade grade grade grade 클릭
35 border-block-color star grade grade grade grade 클릭
36 border-block-end star grade grade grade grade 클릭
37 border-block-end-color star grade grade grade grade 클릭
38 border-block-end-style star grade grade grade grade 클릭
39 border-block-end-width star grade grade grade grade 클릭
40 border-block-start star grade grade grade grade 클릭
41 border-block-start-color star grade grade grade grade 클릭
42 border-block-start-style star grade grade grade grade 클릭
43 border-block-start-width star grade grade grade grade 클릭
44 border-block-style star grade grade grade grade 클릭
45 border-block-width star grade grade grade grade 클릭
46 border-bottom 아래쪽 속성을 일괄적으로 설정합니다. star star star star grade 클릭
47 border-bottom-color 테두리 아래쪽 색 속성을 설정합니다. star star star grade grade 클릭
48 border-bottom-left-radius 아래 왼쪽 모서리 굴곡을 설정합니다. star star grade grade grade 클릭
49 border-bottom-right-radius 아래 오른쪽 모서리 굴곡을 설정합니다. star star grade grade grade 클릭
50 border-bottom-style 테투리 아래쪽 스타일 속성을 설정합니다. star star grade grade grade 클릭
51 border-bottom-width 테투리 아래쪽 두께 속성을 설정합니다. star star grade grade grade 클릭
52 border-collapse star grade grade grade grade 클릭
53 border-color star grade grade grade grade 클릭
54 border-end-end-radius star grade grade grade grade 클릭
55 border-end-start-radius star grade grade grade grade 클릭
56 border-image star grade grade grade grade 클릭
57 border-image-outset star grade grade grade grade 클릭
58 border-image-repeat star grade grade grade grade 클릭
59 border-image-slice star grade grade grade grade 클릭
60 border-image-source star grade grade grade grade 클릭
61 border-image-width star grade grade grade grade 클릭
62 border-inline star grade grade grade grade 클릭
63 border-inline-color star grade grade grade grade 클릭
64 border-inline-end star grade grade grade grade 클릭
65 border-inline-end-color star grade grade grade grade 클릭
66 border-inline-end-style star grade grade grade grade 클릭
67 border-inline-end-width star grade grade grade grade 클릭
68 border-inline-start star grade grade grade grade 클릭
69 border-inline-start-color star grade grade grade grade 클릭
70 border-inline-start-style star grade grade grade grade 클릭
71 border-inline-start-width star grade grade grade grade 클릭
72 border-inline-style star grade grade grade grade 클릭
73 border-inline-width star grade grade grade grade 클릭
74 border-left star grade grade grade grade 클릭
75 border-left-color star grade grade grade grade 클릭
76 border-left-style star grade grade grade grade 클릭
77 border-left-width star grade grade grade grade 클릭
78 border-radius star grade grade grade grade 클릭
79 border-right star grade grade grade grade 클릭
80 border-right-color star grade grade grade grade 클릭
81 border-right-style star grade grade grade grade 클릭
82 border-right-width star grade grade grade grade 클릭
83 border-spacing star grade grade grade grade 클릭
84 border-start-end-radius star grade grade grade grade 클릭
85 border-start-start-radius star grade grade grade grade 클릭
86 border-style star grade grade grade grade 클릭
87 border-top star grade grade grade grade 클릭
88 border-top-color star grade grade grade grade 클릭
89 border-top-left-radius star grade grade grade grade 클릭
90 border-top-right-radius star grade grade grade grade 클릭
91 border-top-style star grade grade grade grade 클릭
92 border-top-width star grade grade grade grade 클릭
93 border-width star grade grade grade grade 클릭
94 bottom star grade grade grade grade 클릭
95 box-decoration-break star grade grade grade grade 클릭
96 box-shadow star grade grade grade grade 클릭
97 box-sizing star grade grade grade grade 클릭
98 break-after star grade grade grade grade 클릭
99 break-before star grade grade grade grade 클릭
100 break-inside star grade grade grade grade 클릭
101 caption-side star grade grade grade grade 클릭
102 caret-color star grade grade grade grade 클릭
103 clear star grade grade grade grade 클릭
104 clip star grade grade grade grade 클릭 delete
105 clip-path star grade grade grade grade 클릭
106 color star grade grade grade grade 클릭
107 color-scheme star grade grade grade grade 클릭
108 column-count star grade grade grade grade 클릭
109 column-fill star grade grade grade grade 클릭
110 column-gap (grid-column-gap) star grade grade grade grade 클릭
111 column-rule star grade grade grade grade 클릭
112 column-rule-color star grade grade grade grade 클릭
113 column-rule-style star grade grade grade grade 클릭
114 column-rule-width star grade grade grade grade 클릭
115 column-span star grade grade grade grade 클릭
116 column-width star grade grade grade grade 클릭
117 columns star grade grade grade grade 클릭
118 contain star grade grade grade grade 클릭
119 content star grade grade grade grade 클릭
120 content-visibility star grade grade grade grade 클릭
121 counter-increment star grade grade grade grade 클릭
122 counter-reset star grade grade grade grade 클릭
123 counter-set star grade grade grade grade 클릭
124 cursor star grade grade grade grade 클릭
125 direction star grade grade grade grade 클릭
126 display star grade grade grade grade 클릭
127 empty-cells star grade grade grade grade 클릭
128 filter star grade grade grade grade 클릭
129 flex star grade grade grade grade 클릭
130 flex-basis star grade grade grade grade 클릭
131 flex-direction star grade grade grade grade 클릭
132 flex-flow star grade grade grade grade 클릭
133 flex-grow star grade grade grade grade 클릭
134 flex-shrink star grade grade grade grade 클릭
135 flex-wrap star grade grade grade grade 클릭
136 float star grade grade grade grade 클릭
137 font star grade grade grade grade 클릭
138 font-family star grade grade grade grade 클릭
139 font-feature-settings star grade grade grade grade 클릭
140 font-kerning star grade grade grade grade 클릭
141 font-language-override star grade grade grade grade 클릭
142 font-optical-sizing star grade grade grade grade 클릭
143 font-size star grade grade grade grade 클릭
144 font-size-adjust star grade grade grade grade 클릭
145 font-stretch star grade grade grade grade 클릭
146 font-style star grade grade grade grade 클릭
147 font-synthesis star grade grade grade grade 클릭
148 font-variant star grade grade grade grade 클릭
149 font-variant-alternates star grade grade grade grade 클릭
150 font-variant-caps star grade grade grade grade 클릭
151 font-variant-east-asian star grade grade grade grade 클릭
152 font-variant-ligatures star grade grade grade grade 클릭
153 font-variant-numeric star grade grade grade grade 클릭
154 font-variant-position star grade grade grade grade 클릭
155 font-variation-settings star grade grade grade grade 클릭
156 font-weight star grade grade grade grade 클릭
157 forced-color-adjust star grade grade grade grade 클릭
158 gap (grid-gap) star grade grade grade grade 클릭
159 grid star grade grade grade grade 클릭
160 grid-area star grade grade grade grade 클릭
161 grid-auto-columns star grade grade grade grade 클릭
162 grid-auto-flow star grade grade grade grade 클릭
163 grid-auto-rows star grade grade grade grade 클릭
164 grid-column star grade grade grade grade 클릭
165 grid-column-end star grade grade grade grade 클릭
166 grid-column-start star grade grade grade grade 클릭
167 grid-row star grade grade grade grade 클릭
168 grid-row-end star grade grade grade grade 클릭
169 grid-row-start star grade grade grade grade 클릭
170 grid-template star grade grade grade grade 클릭
171 grid-template-areas star grade grade grade grade 클릭
172 grid-template-columns star grade grade grade grade 클릭
173 grid-template-rows star grade grade grade grade 클릭
174 hanging-punctuation star grade grade grade grade 클릭
175 height star grade grade grade grade 클릭
176 hyphenate-character star grade grade grade grade 클릭
177 hyphens star grade grade grade grade 클릭
178 image-orientation star grade grade grade grade 클릭
179 image-rendering star grade grade grade grade 클릭
180 image-resolution star grade grade grade grade 클릭
181 ime-mode star grade grade grade grade 클릭 delete
182 initial-letter star grade grade grade grade 클릭
183 initial-letter-align star grade grade grade grade 클릭
184 inline-size star grade grade grade grade 클릭
185 inset star grade grade grade grade 클릭
186 inset-block star grade grade grade grade 클릭
187 inset-block-end star grade grade grade grade 클릭
188 inset-block-start star grade grade grade grade 클릭
189 inset-inline star grade grade grade grade 클릭
190 inset-inline-end star grade grade grade grade 클릭
191 inset-inline-start star grade grade grade grade 클릭
192 isolation star grade grade grade grade 클릭
193 justify-content star grade grade grade grade 클릭
194 justify-items star grade grade grade grade 클릭
195 justify-self star grade grade grade grade 클릭
196 left star grade grade grade grade 클릭
197 letter-spacing star grade grade grade grade 클릭
198 line-break star grade grade grade grade 클릭
199 line-height star grade grade grade grade 클릭
200 line-height-step star grade grade grade grade 클릭
201 list-style star grade grade grade grade 클릭
202 list-style-image star grade grade grade grade 클릭
203 list-style-position star grade grade grade grade 클릭
204 list-style-type star grade grade grade grade 클릭
205 margin star grade grade grade grade 클릭
206 margin-block star grade grade grade grade 클릭
207 margin-block-end star grade grade grade grade 클릭
208 margin-block-start star grade grade grade grade 클릭
209 margin-bottom star grade grade grade grade 클릭
210 margin-inline star grade grade grade grade 클릭
211 margin-inline-end star grade grade grade grade 클릭
212 margin-inline-start star grade grade grade grade 클릭
213 margin-left star grade grade grade grade 클릭
214 margin-right star grade grade grade grade 클릭
215 margin-top star grade grade grade grade 클릭
216 margin-trim star grade grade grade grade 클릭
217 mask star grade grade grade grade 클릭
218 mask-border star grade grade grade grade 클릭
219 mask-border-mode star grade grade grade grade 클릭
220 mask-border-outset star grade grade grade grade 클릭
221 mask-border-repeat star grade grade grade grade 클릭
222 mask-border-slice star grade grade grade grade 클릭
223 mask-border-source star grade grade grade grade 클릭
224 mask-border-width star grade grade grade grade 클릭
225 mask-clip star grade grade grade grade 클릭
226 mask-composite star grade grade grade grade 클릭
227 mask-image star grade grade grade grade 클릭
228 mask-mode star grade grade grade grade 클릭
229 mask-origin star grade grade grade grade 클릭
230 mask-position star grade grade grade grade 클릭
231 mask-repeat star grade grade grade grade 클릭
232 mask-size star grade grade grade grade 클릭
233 mask-type star grade grade grade grade 클릭
234 max-block-size star grade grade grade grade 클릭
235 max-height star grade grade grade grade 클릭
236 max-inline-size star grade grade grade grade 클릭
237 max-width star grade grade grade grade 클릭
238 min-block-size star grade grade grade grade 클릭
239 min-height star grade grade grade grade 클릭
240 min-inline-size star grade grade grade grade 클릭
241 min-width star grade grade grade grade 클릭
242 mix-blend-mode star grade grade grade grade 클릭
243 object-fit star grade grade grade grade 클릭
244 object-position star grade grade grade grade 클릭
245 offset star grade grade grade grade 클릭
246 offset-anchor star grade grade grade grade 클릭
247 offset-distance star grade grade grade grade 클릭
248 offset-path star grade grade grade grade 클릭
249 offset-position star grade grade grade grade 클릭
250 offset-rotate star grade grade grade grade 클릭
251 opacity star grade grade grade grade 클릭
252 order star grade grade grade grade 클릭
253 orphans star grade grade grade grade 클릭
254 outline star grade grade grade grade 클릭
255 outline-color star grade grade grade grade 클릭
256 outline-offset star grade grade grade grade 클릭
257 outline-style star grade grade grade grade 클릭
258 outline-width star grade grade grade grade 클릭
259 overflow star grade grade grade grade 클릭
260 overflow-anchor star grade grade grade grade 클릭
261 overflow-block star grade grade grade grade 클릭
262 overflow-clip-margin star grade grade grade grade 클릭
263 overflow-inline star grade grade grade grade 클릭
264 overflow-wrap star grade grade grade grade 클릭
265 overflow-x star grade grade grade grade 클릭
266 overflow-y star grade grade grade grade 클릭
267 overscroll-behavior star grade grade grade grade 클릭
268 overscroll-behavior-block star grade grade grade grade 클릭
269 overscroll-behavior-inline star grade grade grade grade 클릭
270 overscroll-behavior-x star grade grade grade grade 클릭
271 overscroll-behavior-y star grade grade grade grade 클릭
272 padding star grade grade grade grade 클릭
273 padding-block-end star grade grade grade grade 클릭
274 padding-block-start star grade grade grade grade 클릭
275 padding-bottom star grade grade grade grade 클릭
276 padding-inline-end star grade grade grade grade 클릭
277 padding-inline-start star grade grade grade grade 클릭
278 padding-left star grade grade grade grade 클릭
279 padding-right star grade grade grade grade 클릭
280 padding-top star grade grade grade grade 클릭
281 page-break-after star grade grade grade grade 클릭
282 page-break-before star grade grade grade grade 클릭
283 page-break-inside star grade grade grade grade 클릭
284 perspective star grade grade grade grade 클릭
285 perspective-origin star grade grade grade grade 클릭
286 place-content star grade grade grade grade 클릭
287 place-items star grade grade grade grade 클릭
288 place-self star grade grade grade grade 클릭
289 pointer-events star grade grade grade grade 클릭
290 position star grade grade grade grade 클릭
291 print-color-adjust star grade grade grade grade 클릭
292 quotes star grade grade grade grade 클릭
293 resize star grade grade grade grade 클릭
294 right star grade grade grade grade 클릭
295 rotate star grade grade grade grade 클릭
296 row-gap (grid-row-gap) star grade grade grade grade 클릭
297 ruby-align star grade grade grade grade 클릭
298 ruby-position star grade grade grade grade 클릭
299 scale star grade grade grade grade 클릭
300 scroll-behavior star grade grade grade grade 클릭
301 scroll-margin star grade grade grade grade 클릭
302 scroll-margin-block star grade grade grade grade 클릭
303 scroll-margin-block-end star grade grade grade grade 클릭
304 scroll-margin-block-start star grade grade grade grade 클릭
305 scroll-margin-bottom star grade grade grade grade 클릭
306 scroll-margin-inline star grade grade grade grade 클릭
307 scroll-margin-inline-end star grade grade grade grade 클릭
308 scroll-margin-inline-start star grade grade grade grade 클릭
309 scroll-margin-left star grade grade grade grade 클릭
310 scroll-margin-right star grade grade grade grade 클릭
311 scroll-margin-top star grade grade grade grade 클릭
312 scroll-padding star grade grade grade grade 클릭
313 scroll-padding-block star grade grade grade grade 클릭
314 scroll-padding-block-end star grade grade grade grade 클릭
315 scroll-padding-block-start star grade grade grade grade 클릭
316 scroll-padding-bottom star grade grade grade grade 클릭
317 scroll-padding-inline star grade grade grade grade 클릭
318 scroll-padding-inline-end star grade grade grade grade 클릭
319 scroll-padding-inline-start star grade grade grade grade 클릭
320 scroll-padding-left star grade grade grade grade 클릭
321 scroll-padding-right star grade grade grade grade 클릭
322 scroll-padding-top star grade grade grade grade 클릭
323 scroll-snap-align star grade grade grade grade 클릭
324 scroll-snap-coordinate star grade grade grade grade 클릭 delete
325 scroll-snap-destination star grade grade grade grade 클릭 delete
326 scroll-snap-points-x star grade grade grade grade 클릭 delete
327 scroll-snap-points-y star grade grade grade grade 클릭 delete
328 scroll-snap-stop star grade grade grade grade 클릭
329 scroll-snap-type star grade grade grade grade 클릭
330 scrollbar-color star grade grade grade grade 클릭
331 scrollbar-width star grade grade grade grade 클릭
332 shape-image-threshold star grade grade grade grade 클릭
333 shape-margin star grade grade grade grade 클릭
334 shape-outside star grade grade grade grade 클릭
335 tab-size star grade grade grade grade 클릭
336 table-layout star grade grade grade grade 클릭
337 text-align star grade grade grade grade 클릭
338 text-align-last star grade grade grade grade 클릭
339 text-combine-upright star grade grade grade grade 클릭
340 text-decoration star grade grade grade grade 클릭
341 text-decoration-color star grade grade grade grade 클릭
342 text-decoration-line star grade grade grade grade 클릭
343 text-decoration-skip star grade grade grade grade 클릭
344 text-decoration-skip-ink star grade grade grade grade 클릭
345 text-decoration-style star grade grade grade grade 클릭
346 text-emphasis star grade grade grade grade 클릭
347 text-emphasis-color star grade grade grade grade 클릭
348 text-emphasis-position star grade grade grade grade 클릭
349 text-emphasis-style star grade grade grade grade 클릭
350 text-indent star grade grade grade grade 클릭
351 text-justify star grade grade grade grade 클릭
352 text-orientation star grade grade grade grade 클릭
353 text-overflow star grade grade grade grade 클릭
354 text-rendering star grade grade grade grade 클릭
355 text-shadow star grade grade grade grade 클릭
356 text-size-adjust star grade grade grade grade 클릭
357 text-transform star grade grade grade grade 클릭
358 text-underline-position star grade grade grade grade 클릭
359 top star grade grade grade grade 클릭
360 touch-action star grade grade grade grade 클릭
361 transform star grade grade grade grade 클릭
362 transform-box star grade grade grade grade 클릭
363 transform-origin star grade grade grade grade 클릭
364 transform-style star grade grade grade grade 클릭
365 transition star grade grade grade grade 클릭
366 transition-delay star grade grade grade grade 클릭
367 transition-duration star grade grade grade grade 클릭
368 transition-property star grade grade grade grade 클릭
369 transition-timing-function star grade grade grade grade 클릭
370 translate star grade grade grade grade 클릭
371 unicode-bidi star grade grade grade grade 클릭
372 user-select star grade grade grade grade 클릭
373 vertical-align star grade grade grade grade 클릭
374 visibility star grade grade grade grade 클릭
375 white-space star grade grade grade grade 클릭
376 widows star grade grade grade grade 클릭
377 width star grade grade grade grade 클릭
378 will-change star grade grade grade grade 클릭
379 word-break star grade grade grade grade 클릭
380 word-spacing star grade grade grade grade 클릭
381 writing-mode star grade grade grade grade 클릭
382 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
계층 선택자 하위 선택자 div p {color: #fff;} star star star star star
자식 선택자 div > p {color: #fff;} star star star grade grade
형제 선택자 div ~ p {color: #fff;} star star star grade grade
인접 선택자 div + p {color: #fff;} star star star grade grade
속성 선택자 [name] a[href] star star star grade grade
[name="value"] a[href="#web"] star star star grade grade
star star star grade grade
star star grade grade grade
star star grade grade grade
star star grade grade grade
star star grade grade grade
가상 요소 a:link star star star grade grade
star star star grade grade
star star star grade grade
star star star grade grade
star star star grade grade
가상 클래스 a:link star star star grade grade
star star star grade grade
star star star grade grade
star star star grade grade
star star star grade grade
star star star grade grade
star star star grade grade
star star star grade grade
star star star grade grade
star star star grade grade
star star star grade grade
star star star grade grade
star star star grade grade
링크 가상
선택자
star star star star star
star star star star star
star star star star star
star star star star star

선택자
star star star star star
star star star star star
star star star star star
star star star star star
속성 속성 설명 중요 보기 비고
기본 선택자 accent-color star grade grade grade grade 클릭