reference book
CSS 레퍼런스 북
CSS 레퍼런스
| 번호 | 속성 | 설명 | 중요 | 보기 | 비고 |
|---|---|---|---|---|---|
| 01 | accent-color | 한 줄의 코드로 브랜드 색상을 기본 제공 HTML 양식 입력으로 가져옵니다. | 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 star | __ | |
| 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 | __ | delete |
| 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 | float 요소의 성질을 차단합니다. | star grade grade grade grade | __ | |
| 104 | clip | ... | star grade grade grade grade | __ | |
| 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 | colum-rule-color | ... | star grade grade grade grade | __ | |
| 113 | colum-rule-style | ... | star grade grade grade grade | __ | |
| 114 | colum-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 | 콘텐츠의 성질을 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-variant-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 | flex 콘텐츠의 순서를 정의합니다. | 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 | X축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. | star grade grade grade grade | __ | |
| 266 | overflow-y | 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-inilne-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 (rid-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 | scoll-margin | ... | star grade grade grade grade | __ | |
| 302 | scoll-margin-block | ... | star grade grade grade grade | __ | |
| 303 | scoll-margin-block-end | ... | star grade grade grade grade | __ | |
| 304 | scoll-margin-block-start | ... | star grade grade grade grade | __ | |
| 305 | scoll-margin-bottom | ... | star grade grade grade grade | __ | |
| 306 | scoll-margin-inline | ... | star grade grade grade grade | __ | |
| 307 | scoll-margin-inline-end | ... | star grade grade grade grade | __ | |
| 308 | scoll-margin-inline-start | ... | star grade grade grade grade | __ | |
| 309 | scoll-margin-left | ... | star grade grade grade grade | __ | |
| 310 | scoll-margin-right | ... | star grade grade grade grade | __ | |
| 311 | scoll-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 | unicon-bid | ... | 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 | windows | ... | 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} | 박스 내부에 있는 모든 p 태그들의 문자를 fff로 표시 | star star star star star | |
| 자식 선택자 | div > p {color: #fff} | 박스 내부 요소들 중 또 다른 하위 요소 안에 있는 p 태그들을 제외한 나머지 p 태그들의 문자만을 fff로 표시함 | star star star grade grade | ||
| 형제 선택자 | div ~ p {color: #fff} | 현재 요소와 같은 계층에 있는 p 태그들만 fff로 표시함 | star star star grade grade | ||
| 인접 선택자 | div + p {color: #fff} | 전체 p 요소 중 div 바로 다음에 나오는 p 태그들의 문자만들 fff로 표시 | star star star grade grade | ||
| 속성 선택자 | [name~="value"] | p[class="abc"] | class명이 유일하게 'abc'인 p 요소 | star star grade grade grade | |
| [name~="value"] | p[class~="abc"] | class명이 유일하게 'abc'이거나 여러 개의 class명 중 하나가 'abc'인 p 요소 | star star grade grade grade | ||
| [name|="value"] | p[class|="abc"] | class명이 'abc'이거나 'abc-'로 시작하는 p 요소 | star star grade grade grade | ||
| [name^="value"] | p[class^="abc"] | class명이 철자 'abc'로 시작하는 p 요소 | star star grade grade grade | ||
| [name$="value"] | p[class$="abc"] | class명이 철자 'abc'로 끝나는 p 요소 | star star grade grade grade | ||
| [name*="value"] | p[class*="abc"] | class명에 철자 'abc'가 포함되어 있는 p 요소 | star star grade grade grade | ||
| [name^="value"] | a[href^="mailto"] | href 속성값이 'mailto'로 시작하는 a 요소 | star star grade grade grade | ||
| 가상 요소 | ::first-line | p::first-line {color: #fff} | p 태그의 첫 번째 라인을 선택하여 글씨 색을 fff로 변경합니다. | star star star grade grade | |
| ::first-letter | p::first-letter {color: #fff} | p 태그의 첫 번째 문자를 선택하여 글씨 색을 fff로 변경합니다. | 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 태그 안에서 드래그 한 영역의 글씨 색깔을 red로 변경합니다. | star star star grade grade | ||
| 가상 클래스 | :first-child | li:first-child {color: #fff} | li의 첫번째 자식만 선택하여 글씨 색깔을 fff로 변경합니다. | star star star grade grade | |
| :last-child | li;last-child {color: #fff} | li의 마지막 자식만 선택하여 글씨 색깔을 fff로 변경합니다. | star star star grade grade | ||
| :first-of-type | p:first-of-type {color: #fff} | p 태그 중 첫번째 p만 선택하여 글씨 색깔을 fff로 변경합니다. | star star star grade grade | ||
| :last-of-type | p:last-of-type {color: #fff} | p 태그 중 마지막 p만 선택하여 글씨 색깔을 fff로 변경합니다. | star star star grade grade | ||
| :nth-child() | p:nth-child(2) {color: #fff} | p 태그의 앞에서 두번째 자식만 선택하여 글 씨 색깔을 fff로 변경합니다. | star star star grade grade | ||
| :nth-last-child() | p:nth-last-child(2) {color: #fff} | p 태그의 뒤에서 두번째 자식만 선택하여 글씨 색깔을 fff로 변경합니다. | star star star grade grade | ||
| :nth-of-type() | p:nth-of-type(3) {color: #fff} | p 태그 중 앞에서 세번째 p만 선택하여 글씨 색깔을 fff로 변경합니다. | star star star grade grade | ||
| :nth-last-of-type() | p:nth-last-of-type(3) {color: #fff} | p 태그 중 뒤에서 세번째 p만 선택하여 글씨 색깔을 fff로 변경합니다. | star star star grade grade | ||
| :only-child | p:only-child {color: #fff} | p 태그가 유일한 자식이면 선택하여 글씨 색깔을 fff로 변경합니다. | star star star grade grade | ||
| :only-of-type() | p:only-of-type(3) {color: #fff} | p 태그가 유일한 p 태그면 선택하여 글씨 색깔을 fff로 변경합니다. | star star star grade grade | ||
| :not() | li:not(:nth-child(2)) {color: #fff} | li 태그의 자식 중 앞에서 두번째 자식만 빼고 글씨 색깔을 fff로 변경합니다. | star star star grade grade | ||
| :root | :root {color: #fff} | 문서상 최상위 요소(html)을 선택하여 글씨 색깔을 fff로 변경합니다. | star star star grade grade | ||
| :empty | :empty {color: #fff} | 텍스트 및 공백을 포함하여 내용이 없는 태그를 선택하여 색깔을 fff로 변경합니다. | star star star grade grade | ||
| 링크 가상 선택자 |
:link | a:link {color: #fff} | 방문하지 않은 링크를 선택하여 글씨 색깔을 fff로 변경합니다. | star star grade grade grade | |
| :visited | a:visited {color: #fff} | 방문했던 링크를 선택하여 글씨 색깔을 fff로 변경합니다. | star star grade grade grade | ||
| :hover | a:hover {color: #fff} | 마우스를 a 태그 위에 올린 상태일 때 글씨 색깔을 fff로 변경합니다. | star star grade grade grade | ||
| :active | a:active {color: #fff} | a 태그를 마우스로 클릭한 상태일 때 글씨 색깔을 fff로 변경합니다. | star star grade grade grade | ||
| 폼 선택자 |
:checked | input:enabled {color: #fff} | input 박스가 체크되었을 때 글씨 색깔을 fff로 변경합니다. | star star grade grade grade | |
| :focus | input:enabled {color: #fff} | input 박스에 초점(커서 생성)이 맞춰졌을 때 글씨 색깔을 fff로 변경합니다. | star star grade grade grade | ||
| :enabled | input:enabled {color: #fff} | input 박스가 사용 가능할 때 글씨 색깔을 fff로 설정합니다. | star star grade grade grade | ||
| :disabled | input:disabled {color: #fff} | input 박스가 사용 불가능할 때 글씨 색깔을 fff로 설정합니다. | star star grade grade grade |
| 번호 | 속성 | 설명 | 중요 | 보기 | 비고 |
|---|---|---|---|---|---|
| 01 | accent-color | ... | star grade grade grade grade | __ |