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