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 animation-timeline star grade grade grade grade
15 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 백그라운드 속성을 일괄적으로 설정함 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 block-size star grade grade grade grade
33 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 테두리 하단 속성을 일괄적으로 설정 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 star star star grade
53 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 테두리 좌측 속성 설정함 star star grade grade grade
75 border-left-color 테두리 좌측의 색상을 설정함 star star grade grade grade
76 border-left-style 테두리 좌측의 스타일을 설정함 star star grade grade grade
77 border-left-width 테두리 좌측의 두께를 설정함 star star grade grade grade
78 border-radius 테두리 모서리를 둥글게 설정함 star star star star star
79 border-right 테두리 우측 속성을 설정함 star star grade grade grade
80 border-right-color 테두리 우측 색상을 설정함 star star grade grade grade
81 border-right-style 테두리 우측의 스타일을 설정함 star star grade grade grade
82 border-right-width 테두리 우측의 두께를 설정함 star star 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 테두리의 스타일을 일괄적으로 설정함 star star star star grade
87 border-top 테두리 상단의 속성을 일괄적으로 설정함 star star grade grade grade
88 border-top-color 테두리 상단의 색상을 설정함 star star 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 star grade grade grade
92 border-top-width 테두리 상단의 두께를 설정함 star star grade grade grade
93 border-width 테두리 두께 속성을 설정함 star star star star grade
94 bottom 배치된 요소의 하단 위치를 설정함 star star grade grade grade
95 box-decoration-break box-decoration-break star grade grade grade grade
96 box-shadow 박스에 그림자 효과를 추가하고 일괄적으로 설정할 수 있음 star star grade grade grade
97 box-sizing 박스의 크기를 어떤 것을 기준으로 계산할 것인지를 정하는 속성 star star star star star
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 요소의 글씨 색상을 설정함 star star star star star
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 열의 너비를 설정함 star star star star grade
117 columns 열의 개수와 열의 너비를 설정함 star star star star grade
118 contain contain star grade grade grade grade
119 content 생성한 값으로 요소를 대체하며 content 속성으로 추가한 요소를 익명 대체 요소라고 부름 star star grade grade grade
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 요소 위에서의 마우스 커서 상태를 설정함 star star star star star
125 direction direction star grade grade grade grade
126 display 요소의 블록과 인라인 요소 처리 여부와 자식 요소 배치 시 사용할 레이아웃을 설정함 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 플렉스 아이템 중 컨테이너 차지 공간을 설정함 star star grade grade grade
130 flex-basis flex-basis star grade grade grade grade
131 flex-direction 플렉스 컨테이너 내의 아이템 배치 방향 및 정렬 방식 설정 가능함 star star grade grade grade
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 플렉스 항목을 한 줄로 강제 정렬할 것인지 혹은 여러 줄로 줄바꿈 할 것인지를 설정함 star star star star star
136 float 컨테이너를 좌측 또는 우측에 배치하여 텍스트 및 인라인 요소가 요소 주위를 둘러쌀 수 있도록 함 star star star star star
137 font 폰트 속성 설정 star star star star star
138 font-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 폰트 크기를 설정함 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 폰트의 스타일을 설정함 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 폰트 두께를 설정함 star star star star grade
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-area에서 할당된 이름을 이용해 그리드의 구조를 할당할 수 있음 star star star star star
172 grid-template-columns 그리드 열의 크기를 설정함 star star star star star
173 grid-template-rows 그리드 행의 크기를 설정함 star star star star star
174 hanging-punctuation hanging-punctuation star grade grade grade grade
175 height 높이 설정 star star star star star
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 플렉스 컨테이너의 기본 축 또는 그리드 컨테이너의 인라인 축의 공간 분배 설정함 star star 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 줄 간격을 설정함 star star star star star
200 line-height-step line-height-step star grade grade grade grade
201 list-style list-style star grade grade grade grade
202 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 여백 설정 star star star star star
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 요소 하단의 여백 영역을 설정함 star star star star star
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 요소 좌측의 여백 영역을 설정함 star star star star grade
214 margin-right 요소 우측의 여백 영역을 설정함 star star star star grade
215 margin-top 요소 상단의 여백 영역을 설정함 star star star star 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 최대 높이 설정 star star star star grade
236 max-inline-size max-inline-size star grade grade grade grade
237 max-width 최대 너비 설정 star star star star grade
238 min-block-size min-block-size star grade grade grade grade
239 min-height 최소 높이 설정 star star star star grade
240 min-inline-size min-inline-size star grade grade grade grade
241 min-width 최소 너비 설정 star star star star 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 요소의 콘텐츠가 너무 커서 블록 서식 맥락에 맞추지 못할 때의 처리법을 지정함 star star star star star
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-behavior overscroll-behavior 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 요소 안쪽의 여백 영역을 일괄(네 방향 모두) 설정함 star star star star star
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 요소 안쪽의 하단 여백 영역을 설정함 star star star star 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-left 요소 안쪽의 좌측 여백 영역을 설정함 star star star star grade
279 padding-right 요소 안쪽의 우측 여백 영역을 설정함 star star star star grade
280 padding-top 요소 안쪽의 상단 여백 영역을 설정함 star star star star 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 위치 설정 star star star star star
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 회전값 설정 star star 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 스케일 설정 star star 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 텍스트에 장식용 선을 일괄 설정함 star star star star grade
341 text-decoration-color 텍스트 장식용 선의 색상을 설정함 star star star grade grade
342 text-decoration-line 텍스트 장식용 선의 모양을 설정함 star star star grade grade
343 text-decoration-skip text-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 너비 설정 star star star star star
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축의 순서 설정 star star star star star
선택자 종류 예시 설명 중요 비고
기본 선택자 태그 선택자 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;} div 태그 내부의 모든 하위 p태그를 선택하여 글씨 색상을 흰색으로 변경함 star star star star star
자식 선택자 div > p {color: #fff;} div 태그 내부의 자식 요소 중의 p 태그를 선택하여 글씨 색상을 흰색으로 변경함 star star star grade grade
형제 선택자 div ~ p {color: #fff;} div 태그와 같은 계층에 있는 p 태그를 선택해 글씨 색상을 흰색으로 변경함 star star star grade grade
인접 선택자 div + p {color: #fff;} div 태그의 바로 다음에 나오는 p 태그를 선택하여 글씨 색상을 흰색으로 변경함 star star star grade grade
속성 선택자 [name] h1[class] {color: blue;} h1 태그의 클래스를 선택하여 글씨 색상을 파란색으로 변경함 star star star grade grade
[name="value"] p[class="abc"] {color: red;} p 태그 중 class명이 'abc'인 태그만을 선택하여 글씨 색상을 빨간색으로 변경함 star star star grade grade
[name~="value"] p[class~="abc"] {color: #fff;} class명이 유일하게 'abc'이거나 여러 개의 class명 중 하나가 'abc'인 p 요소 선택해서 글씨 색상 흰색으로 변경함 star star star grade grade
[name|="value"] p[class|="abc"] {color: #fff;} class명이 'abc'이거나 'abc-'로 시작하는 p 요소 선택해서 글씨 색상 흰색으로 변경함 star star star grade grade
[name^="value"] p[class^="abc"] {color: #fff;} class명이 철자 'abc'로 시작하는 p 요소를 선택해서 글씨 색상 흰색으로 변경함 star star star grade grade
[name$="value"] p[class$="abc"] {color: #fff;} class명이 철자 'abc'로 끝나는 p 요소를 선택해서 글씨 색상 흰색으로 변경함 star star star grade grade
[name*="value"] p[class*="abc"] {color: #fff;} class명에 철자 'abc'가 포함되는 p 요소를 선택해서 글씨 색상 흰색으로 변경함 star star star 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: red;} 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 star grade grade
:first-of-type p:first-of-type {color: #fff;} p 태그 중 첫번째 p만 선택해 글씨 색상을 흰색으로 변경함 star star star grade grade
:last-of-child p:last-of-child {color: #fff;} p 태그 중 마지막 p만 선택해 글씨 색상을 흰색으로 변경함 star star star grade grade
:nth-child() p:nth-child(2) {color: #fff;} p 태그의 앞에서 두번째 자식만 선택해 글씨 색상을 흰색으로 변경함 star star star grade grade
:nth-last-child() p:nth-last-child(2) {color: #fff;} p 태그의 뒤에서 두번째 자식만 선택해 글씨 색상을 흰색으로 변경함 star star star grade grade
:nth-of-type() p:nth-of-type(3) {color: #fff;} p 태그 중 앞에서 세번째 p만 선택해 글씨 색상을 흰색으로 변경함 star star star grade grade
:nth-last-of-type() p:nth-last-of-type(3) {color: #fff;} p 태그 중 뒤에서 세번째 p만 선택해 글씨 색상을 흰색으로 변경함 star star star grade grade
:only-child p:only-child {color: #fff;} p 태그가 유일한 자식이면 선택해 글씨 색상을 흰색으로 변경함 star star star grade grade
:only-of-type() p:only-of-type(3) {color: #fff;} p 태그가 유일한 p 태그면 선택해 글씨 색상을 흰색으로 변경함 star star star grade grade
:not() li:not(:nth-child(2)) {color: #fff;} li 태그의 자식 중 앞에서 두번째 자식만 빼고 글씨 색상을 흰색으로 변경함 star star star grade grade
:root :root {color: #fff;} 문서상 최상위 요소(html)을 선택해 글씨 색상을 흰색으로 변경함 star star star grade grade
:empty :empty {color: #fff;} 텍스트 및 공백을 포함하여 내용이 없는 태그를 선택해 글씨 색상을 흰색으로 변경함 star star star grade grade
링크 가상 선택자 :link a:link {color: #fff;} 방문하지 않은 링크를 선택해 글씨 색상을 흰색으로 변경함 star star star grade grade
:visited a:visited {color: #fff;} 방문했던 링크를 선택해 글씨 색상을 흰색으로 변경함 star star star grade grade
:hover a:hover {color: #fff;} 마우스를 a태그 위에 올린 상태일 때 글씨 색상을 흰색으로 변경함 star star star grade grade
:active a:active {color: #fff;} a태그를 마우스로 클릭한 상태일 때 글씨 색상을 흰색으로 변경함 star star star grade grade
폼 선택자 :checked input:checked {color: #fff;} input 박스가 체크 되었을 때 글씨 색상을 흰색으로 변경함 star star star grade grade
:focus input:focus {color: #fff;} input 박스에 초점(커서 생성)이 맞춰졌을 때 글씨 색상을 흰색으로 변경함 star star star grade grade
:enabled input:enabled {color: #fff;} input 박스가 사용 가능할 때 글씨 색상을 흰색으로 변경함 star star star grade grade
:disabled input:disabled {color: #fff;} input 박스가 사용 불가능할 때 글씨 색상을 흰색으로 변경함 star star star grade grade
번호 속성 설명 중요 보기 비고
01 accent-color 다른 페이지로의 이동을 설정함 star grade grade grade grade