reference book

CSS 레퍼런스 북

CSS 레퍼런스

번호 속성 설명 중요 보기 비고
01 accent-color 사용자 인터페이스 컨트롤의 강조색을 지정합니다. star grade grade grade grade
02 align-content 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. star grade grade grade grade
03 align-items 콘텐츠 아이템의 내부상하관계 정렬 상태를 설정합니다. star grade grade grade grade
04 align-self 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. star grade grade grade grade
05 all 요소의 속성을 초기화 또는 상속을 설정합니다. star grade grade grade grade
06 animation 애니메이션과 관련된 속성을 일괄적으로 설정합니다. star star star star star
07 animation-delay 애니메이션 지연 시간을 설정합니다. star star star star star
08 animation-direction 애니메이션 움직임 방향을 설정합니다. star star star grade grade
09 animation-duration 애니메이션 움직임 시간을 설정합니다. star star star star star
10 animation-fill-mode 애니메이션이 끝난 후의 상태를 설정합니다. star star grade grade grade
11 animation-iteration-count 애니메이션의 반복 횟수를 설정합니다. star star star star grade
12 animation-name 애니메이션 keyframe 이름을 설정합니다. star star star star star
13 animation-play-state 애니메이션 진행형태를 설정합니다. star star grade grade grade
14 animation-timeline 애니메이션의 타임라인을 설정합니다. star grade grade grade grade
15 animation-timing-function 애니메이션 움직임의 속도를 설정합니다. star star star star star
16 appearance 기본으로 지원하는 테마들의 모양을 해제하거나 추가를 설정합니다. star grade grade grade grade
17 aspect-ratio 요소의 비율 크기를 설정합니다. star grade grade grade grade
18 backdrop-filter 뒤 영역의 흐림이나 색상 시프트 등 그래픽 효과를 설정합니다. star grade grade grade grade
19 backface-visibility 입체적인 모습의 뒷면 가시성을 설정합니다. star grade grade grade grade
20 background 백그라운드 속성을 일괄적으로 설정합니다. star star star star star
21 background-attachment 배경 이미지의 고정 여부를 설정합니다. star star star grade grade
22 background-blend-mode 배경을 혼합했을 때 그래픽 효과를 설정합니다. star star star grade grade
23 background-clip 백그라운드 이미지의 위치 기준점을 설정합니다. star grade grade grade grade
24 background-color 백그라운드 색을 설정합니다. star star star star star
25 background-image 백그라운드 이미지 속성을 설정합니다. star star star star star
26 background-origin 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다. grade grade grade grade grade
27 background-position 백그라운드 이미지의 위치 영역을 설정합니다. star star star star star
28 background-position-x 백그라운드 이미지의 x축 위치 영역을 설정합니다. star grade grade grade grade
29 background-position-y 백그라운드 이미지의 y축 위치 영역을 설정합니다. star grade grade grade grade
30 background-repeat 백그라운드 이미지 반복 여부를 설정합니다. star star star star star
31 background-size 백그라운드 이미지 사이즈를 설정합니다. star star star star star
32 block-size 요소의 블록의 수평과 수직크기를 설정합니다. star grade grade grade grade
33 border 테두리 속성을 일괄적으로 설정합니다. star star star star star
34 border-block 테두리의 가로, 세로의 값을 일괄적으로 설정합니다. star grade grade grade grade
35 border-block-color 테두리의 가로, 세로 색을 설정합니다. star grade grade grade grade
36 border-block-end 테두리 가로, 세로 끝 값을 설정합니다. star grade grade grade grade
37 border-block-end-color 테두리 가로, 세로 끝의 색을 설정합니다. star grade grade grade grade
38 border-block-end-style 테두리 가로, 세로 끝의 스타일을 설정합니다. star grade grade grade grade
39 border-block-end-width 테두리 가로, 세로 끝의 넓이 값을 설정합니다. star grade grade grade grade
40 border-block-start 테두리 가로, 세로의 시작 값을 설정합니다. star grade grade grade grade
41 border-block-start-color 테두리 가로, 세로 시작의 색을 설정합니다. star grade grade grade grade
42 border-block-start-style 테두리 가로, 세로 시작 스타일을 설정합니다. star grade grade grade grade
43 border-block-start-width 테두리 가로, 세로 넓이 값을 설정합니다. star grade grade grade grade
44 border-block-style 테두리 가로, 세로의 스타일을 설정합니다. star grade grade grade grade
45 border-block-width 테두리 가로, 세로의 넓이를 설정합니다. star grade grade grade grade
46 border-bottom 아래쪽 속성을 일괄적으로 설정합니다. star star star star grade
47 border-bottom-color 테두리 아래쪽 색 속성을 설정합니다. star star star grade grade
48 border-bottom-left-radius 아래 왼쪽 모서리 굴곡을 설정합니다. star star grade grade grade
49 border-bottom-right-radius 아래 오른쪽 모서리 굴곡을 설정합니다. star star grade grade grade
50 border-bottom-style 테두리 아래쪽 스타일 속성을 설정합니다. star star grade grade grade
51 border-bottom-width 테두리 아래쪽 두께 속성을 설정합니다. star star grade grade grade
52 border-collapse 표의 테두리와 셀의 테두리 사이의 간격을 설정합니다. star grade grade grade grade
53 border-color 테두리의 색상을 일괄적으로 설정합니다. star grade grade grade grade
54 border-end-end-radius 테두리 끝과 끝의 모서리를 둥글게 설정합니다. star grade grade grade grade
55 border-end-start-radius 테두리 끝과 시작의 모서리를 둥글게 설정합니다. star grade grade grade grade
56 border-image 테두리에 이미지를 설정합니다. star grade grade grade grade
57 border-image-outset 테두리와 테두리 이미지의 거리를 설정합니다. star grade grade grade grade
58 border-image-repeat 테두리 이미지의 반복 속성을 설정합니다. star grade grade grade grade
59 border-image-slice 테두리 이미지의 영역의 분할을 설정합니다. star grade grade grade grade
60 border-image-source 테두리 이미지로 사용할 원본 이미지를 지정합니다. star grade grade grade grade
61 border-image-width 테두리 아래쪽 두께 속성을 설정합니다. star grade grade grade grade
62 border-inline 테두리 인라인의 속성을 설정합니다. star grade grade grade grade
63 border-inline-color 테두리 인라인의 색을 설정합니다. star grade grade grade grade
64 border-inline-end 테두리 인라인의 끝을 설정합니다. star grade grade grade grade
65 border-inline-end-color 테두리 인라인의 끝 색을 설정합니다. star grade grade grade grade
66 border-inline-end-style 테두리 인라인의 끝 스타일을 설정합니다. star grade grade grade grade
67 border-inline-end-width 테두리 인라인의 끝 넓이를 설정합니다. star grade grade grade grade
68 border-inline-start 테두리 인라인의 시작을 설정합니다. star grade grade grade grade
69 border-inline-start-color 테두리 인라인의 시작 색을 설정합니다. star grade grade grade grade
70 border-inline-start-style 테두리 인라인의 시작 스타일을 설정합니다. star grade grade grade grade
71 border-inline-start-width 테두리 인라인의 시작 넓이를 설정합니다. star grade grade grade grade
72 border-inline-style 테두리 인라인의 스타일을 일괄적으로 설정합니다. star grade grade grade grade
73 border-inline-width 테두리 인라인의 넓이를 일괄적으로 설정합니다. star grade grade grade grade
74 border-left 테두리 왼쪽을 일괄적으로 설정합니다. star grade grade grade grade
75 border-left-color 테두리 왼쪽 색상을 설정합니다. star grade grade grade grade
76 border-left-style 테두리 왼쪽 스타일을 설정합니다. star grade grade grade grade
77 border-left-width 테두리 왼쪽 두께의 속성을 설정합니다. star grade grade grade grade
78 border-radius 테두리의 경계의 꼭짓점을 둥글게 설정합니다. star grade grade grade grade
79 border-right 테두리 오른쪽 속성을 일괄적으로 설정합니다. star grade grade grade grade
80 border-right-color 테두리 오른쪽 색상을 설정합니다. star grade grade grade grade
81 border-right-style 테두리 오른쪽 스타일을 설정합니다. star grade grade grade grade
82 border-right-width 테두리 오른쪽 두께를 설정합니다. star grade grade grade grade
83 border-spacing 테두리의 인접한 셀의 경계 사이의 거리를 설정합니다. star grade grade grade grade
84 border-start-end-radius 테두리의 모서리의 시작과 끝의 반경을 설정합니다. star grade grade grade grade
85 border-start-start-radius 테두리 시작의 측면과 인라인 시작측면의 모서리를 설정합니다. star grade grade grade grade
86 border-style 테두리의 스타일을 일괄적으로 설정합니다. star grade grade grade grade
87 border-top 테두리 위쪽의 설정을합니다. star grade grade grade grade
88 border-top-color 테두리 위쪽의 색상을 설정합니다. star grade grade grade grade
89 border-top-left-radius 테두리 왼쪽 위의 모서리를 설정합니다. star grade grade grade grade
90 border-top-right-radius 테두리 오른쪽 위의 모서리를 설정합니다. star grade grade grade grade
91 border-top-style 테두리 위쪽 스타일을 설정합니다. star grade grade grade grade
92 border-top-width 테두리 위쪽 넓이를 설정합니다. star grade grade grade grade
93 border-width 테두리 넓이를 일괄적으로 설정합니다. star grade grade grade grade
94 bottom 위치가 지정된 요소의 아래쪽을 설정합니다. star grade grade grade grade
95 box-decoration-break 컬럼 및 줄바꿈시 테두리와 패딩의 방식을 설정합니다. star grade grade grade grade
96 box-shadow 테두리를 감싼 그림자 효과를 추가합니다. star grade grade grade grade
97 box-sizing 박스의 크기를 화면에 표시하는 방식을 변경합니다. star grade grade grade grade
98 break-after 박스가 생성된 후의 행동방법을 설정합니다. star grade grade grade grade
99 break-before 박스가 생성되기 전의 행동방법을 설정합니다. star grade grade grade grade
100 break-inside 지정된 요소 내부에서 나누기를 피할 것인지 여부를 설정합니다. star grade grade grade grade
101 caption-side 표의 캡션의 위치를 설정합니다. star grade grade grade grade
102 caret-color 텍스트 박스의 커서의 색상을 설정합니다. star grade grade grade grade
103 clear float속성을 사용한 후 지정된 영역에 더이상 float속성이 작동하지 않도록 설정합니다. star grade grade grade grade
104 clip 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지를 설정합니다. star grade grade grade grade delete
105 clip-path 이미지나 요소를 클립(잘라내기)할 수 있도록 설정합니다. star grade grade grade grade
106 color 글씨와 글씨장식의 전경색을 설정합니다. star grade grade grade grade
107 color-scheme 색 구성표 표시를 설정합니다. star grade grade grade grade
108 column-count 표 구성시 단의 개수를 설정합니다. star grade grade grade grade
109 column-fill 표 영역의 콘텐츠 흐름의 영향을 받는 방식을 설정합니다. star grade grade grade grade
110 column-gap (grid-column-gap) 요소 사이의 간격을 설정합니다. star grade grade grade grade
111 column-rule 단과 단 사이의 구분선을 표현합니다. star grade grade grade grade
112 column-rule-color 단과 단 사이의 구분선의 색상을 설정합니다. star grade grade grade grade
113 column-rule-style 단과 단 사이의 스타일을 설정합니다. star grade grade grade grade
114 column-rule-width 단과 단 사이의 넓이를 설정합니다. star grade grade grade grade
115 column-span 단과 단 사이의 여러 단이 차지하는 속성을 설정합니다. star grade grade grade grade
116 column-width 단 구성시 열의 넓이를 설정합니다. star grade grade grade grade
117 columns 단 구성을 일괄적으로 설정합니다. star grade grade grade grade
118 contain 특정 요소와 컨텐츠가 문서에 다른 부위와 독립되어 있음을 설정합니다. star grade grade grade grade
119 content 선택한 요소의 내용 앞이나 뒤에 콘텍츠를 설정합니다. star grade grade grade grade
120 content-visibility 콘텐츠의 렌더링 여부를 설정합니다. star grade grade grade grade
121 counter-increment 특정 요소에 일련 번호를 설정합니다. star grade grade grade grade
122 counter-reset 콘텐츠 숫자의 초기화를 설정합니다. star grade grade grade grade
123 counter-set 카운터의 값을 설정합니다. star grade grade grade grade
124 cursor 마우스 커서의 모양을 설정합니다. star grade grade grade grade
125 direction 텍스트의 방향을 설정합니다. star grade grade grade grade
126 display 웹페이지의 레이아웃 속성을 설정합니다. star grade grade grade grade
127 empty-cells 표에서 빈 셀의 테두리의 표시여부를 설정합니다. star grade grade grade grade
128 filter 흐림효과 등의 그랙픽 효과를 설정합니다. star grade grade grade grade
129 flex 레이아웃의 위치를 설정합니다. star grade grade grade grade
130 flex-basis 플렉스의 크기를 설정합니다. star grade grade grade grade
131 flex-direction 플렉스 아이템 배치의 방향을 설정합니다. star grade grade grade grade
132 flex-flow 플렉스 컨테이너의 방향, 동작을 설정합니다. star grade grade grade grade
133 flex-grow 플렉스 내부의 공간을 설정합니다. star grade grade grade grade
134 flex-shrink 플렉스 내부의 수축 크기를 설정합니다. star grade grade grade grade
135 flex-wrap 플렉스 요소들의 정렬을 설정합니다. star grade grade grade grade
136 float 레이아웃의 배치 정렬을 설정합니다. star grade grade grade grade
137 font 글자 폰트를 설정합니다. star grade grade grade grade
138 font-family 글꼴을 설정합니다. star grade grade grade grade
139 font-feature-settings 글자의 고급 인쇄 기능을 설정합니다. star grade grade grade grade
140 font-kerning 글꼴에 저장된 커닝 정보의 사용을 설정합니다. star grade grade grade grade
141 font-language-override 문서에 정의된 언어를 다른 언어로 대체합니다. star grade grade grade grade
142 font-optical-sizing 글꼴의 렌더링 최적화 여부를 설정합니다. star grade grade grade grade
143 font-size 글자의 크기를 설정합니다. star grade grade grade grade
144 font-size-adjust 소문자를 기준으로 글자크기를 설정합니다. star grade grade grade grade
145 font-stretch 글꼴을 노멀, 압축 또는 확장면을 선택합니다. star grade grade grade grade
146 font-style 글꼴을 스타일을 설정합니다. star grade grade grade grade
147 font-synthesis 글꼴을 기울기와 굵음 정도를 설정합니다. star grade grade grade grade
148 font-variant 소문자를 작은 대문자로 바꾸어 설정합니다. star grade grade grade grade
149 font-variant-alternates 글꼴을 장식요소나 특수 문자의 표시 형태를 설정합니다. star grade grade grade grade
150 font-variant-caps 텍스트의 모든 소문자를 작은 대문자로 변경합니다. star grade grade grade grade
151 font-variant-east-asian 한자나 일본어의 폰트를 약자 형식으로 변경합니다. star grade grade grade grade
152 font-variant-ligatures 발음 기호 형태와 같은 묶음 표시 형태를 표시합니다. star grade grade grade grade
153 font-variant-numeric 분수나 회계용 숫자 등의 표시 형태를 변경합니다. star grade grade grade grade
154 font-variant-position 위 첨자나 아래 첨자로 배치된 작은 크기의 글리프를 설정합니다. star grade grade grade grade
155 font-variation-settings 가변 폰트의 폰트 스타일을 설정합니다. star grade grade grade grade
156 font-weight 글자의 굵기를 설정합니다. star grade grade grade grade
157 forced-color-adjust 강제 색상모드에서 특정 색상을 설정합니다. star grade grade grade grade
158 gap (grid-gap) 그리드의 행과 열 사이의 간격을 설정합니다. star grade grade grade grade
159 grid 컨테이너의 위치와 크기를 설정합니다. star grade grade grade grade
160 grid-area 그리드 영역의 이름을 설정합니다. star grade grade grade grade
161 grid-auto-columns 그리드 컨테이너의 열을 설정합니다. star grade grade grade grade
162 grid-auto-flow 그리드 컨테이너의 위치를 자동으로 설정합니다. star grade grade grade grade
163 grid-auto-rows 그리드 컨테이너의 행의 위치를 설정합니다. star grade grade grade grade
164 grid-column 그리드의 위치와 크기를 설정합니다. star grade grade grade grade
165 grid-column-end 그리드 컨테이너 열의 끝 위치를 설정합니다. star grade grade grade grade
166 grid-column-start 그리드 컨테이너 열의 시작 위치를 설정합니다. star grade grade grade grade
167 grid-row 그리드 컨테이너 행의 위치를 설정합니다. star grade grade grade grade
168 grid-row-end 그리드 컨테이너 행의 끝 위치를 설정합니다. star grade grade grade grade
169 grid-row-start 그리드 컨테이너 행의 시작 위치를 설정합니다. star grade grade grade grade
170 grid-template 그리드 템플릿을 설정합니다. star grade grade grade grade
171 grid-template-areas 그리드 템플릿 영역을 설정합니다. star grade grade grade grade
172 grid-template-columns 그리드 열의 영역을 설정합니다. star grade grade grade grade
173 grid-template-rows 그리드 행의 영역을 설정합니다. star grade grade grade grade
174 hanging-punctuation 문장부호의 위치를 설정합니다. star grade grade grade grade
175 height 요소의 높이를 설정합니다. star grade grade grade grade
176 hyphenate-character 하이푼을 나누기전의 줄끝에 사용되는 문자를 설정합니다. star grade grade grade grade
177 hyphens 텍스트의 줄임표를 설정합니다. star grade grade grade grade
178 image-orientation 이미지 방향에 대한 레이아웃을 설정합니다. star grade grade grade grade
179 image-rendering 이미지 스케일링을 설정합니다. star grade grade grade grade
180 image-resolution 이미지의 고유 해상도를 설정합니다. star grade grade grade grade
181 ime-mode 텍스트 입력에 대한 입력기를 설정합니다. star grade grade grade grade delete
182 initial-letter 초기 글자에 대한 스타일을 설정합니다. star grade grade grade grade
183 initial-letter-align 단락내에서 글자의 정렬을 설정합니다. star grade grade grade grade
184 inline-size 블록의 가로 또는 세로의 크기를 설정합니다. star grade grade grade grade
185 inset 상하좌우 값을 설정합니다. star grade grade grade grade
186 inset-block 블록안의 크기를 설정합니다. star grade grade grade grade
187 inset-block-end 블록안의 끝 크기를 설정합니다. star grade grade grade grade
188 inset-block-start 블록안의 시작 크기를 설정합니다. star grade grade grade grade
189 inset-inline 인라인 요소의 안 크기를 일괄적으로 설정합니다. star grade grade grade grade
190 inset-inline-end 인라인 안의 끝 크기를 설정합니다. star grade grade grade grade
191 inset-inline-start 인라인 안의 시작 크기를 설정합니다. star grade grade grade grade
192 isolation 요소의 쌓임 맥락을 설정합니다. star grade grade grade grade
193 justify-content 플렉스 컨테이너의 공간을 설정합니다. star grade grade grade grade
194 justify-items 컨테이너의 정렬방법을 설정합니다. star grade grade grade grade
195 justify-self 컨테이너 내부의 상자 정렬방식을 설정합니다. star grade grade grade grade
196 left 요소의 왼쪽 위치를 설정합니다. star grade grade grade grade
197 letter-spacing 글자사이의 간격을 설정합니다. star grade grade grade grade
198 line-break 한중일 3개국어의 텍스트 줄 바꿈을 설정합니다. star grade grade grade grade
199 line-height 텍스트 라인 상자의 높이를 설정합니다. star grade grade grade grade
200 line-height-step 텍스트 높이의 단계 단위를 설정합니다. star grade grade grade grade
201 list-style 목록의 스타일을 일괄적으로 설정합니다. star grade grade grade grade
202 list-style-image 목록 항목 마커로 사용할 이미지를 설정합니다. star grade grade grade grade
203 list-style-position 목록 항목 마커의 위치를 설정합니다. star grade grade grade grade
204 list-style-type 목록 항목요소의 마커를 설정합니다. star grade grade grade grade
205 margin 바깥 영역의 여백을 설정합니다. star grade grade grade grade
206 margin-block 블록의 여백을 설정합니다. star grade grade grade grade
207 margin-block-end 블록의 여백 끝을 설정합니다. star grade grade grade grade
208 margin-block-start 블록의 여백 시작을 설정합니다. star grade grade grade grade
209 margin-bottom 아래쪽 바깥 영역을 설정합니다. star grade grade grade grade
210 margin-inline 인라인 영역의 여백을 설정합니다. star grade grade grade grade
211 margin-inline-end 인라인 영역의 끝 여백을 설정합니다. star grade grade grade grade
212 margin-inline-start 인라인 영역의 시작 여백을 설정합니다. star grade grade grade grade
213 margin-left 왼쪽 바깥 영역의 여백을 설정합니다. star grade grade grade grade
214 margin-right 오른쪽 바깥 영역의 여백을 설정합니다. star grade grade grade grade
215 margin-top 위쪽 바깥 역역의 여백을 설정합니다. star grade grade grade grade
216 margin-trim 컨테이너의 가장 자리에 인접한 자식의 여백을 트리밍합니다. star grade grade grade grade
217 mask 이미지의 가려짐 여부를 설정합니다. star grade grade grade grade
218 mask-border 테두리 가장자리의 마스크 여부를 설정합니다. star grade grade grade grade
219 mask-border-mode 마스크 테두리에 사용되는 혼합모드를 설정합니다. star grade grade grade grade
220 mask-border-outset 마스크 테두리의 거리를 설정합니다. star grade grade grade grade
221 mask-border-repeat 이미지의 가장자리를 테두리 마스크에 맞게 설정합니다. star grade grade grade grade
222 mask-border-slice 마스크 테두리에 사용된 이미지의 영역을 설정합니다. star grade grade grade grade
223 mask-border-source 마스크 테두리에 사용되는 이미지를 설정합니다. star grade grade grade grade
224 mask-border-width 마스크 테두리의 넓이를 설정합니다. star grade grade grade grade
225 mask-clip 마스크의 영향을 받는 영역을 설정합니다. star grade grade grade grade
226 mask-composite 현재 마스크레이어와 아래의 마스크레이어의 합성을 설정합니다. star grade grade grade grade
227 mask-image 마스크 레이어로 사용되는 이미지를 설정합니다. star grade grade grade grade
228 mask-mode 마스크 이미지의 휘도나 알파마스크 처리여부를 설정합니다. star grade grade grade grade
229 mask-origin 마스크 원점을 설정합니다. star grade grade grade grade
230 mask-position 마스크 오리진으로 설정된 요소의 위치를 설정합니다. star grade grade grade grade
231 mask-repeat 마스크 이미지의 반복을 설정합니다. star grade grade grade grade
232 mask-size 마스크의 크기를 설정합니다. star grade grade grade grade
233 mask-type 마스크의 휘도 또는 알파마스크의 여부를 설정합니다. star grade grade grade grade
234 max-block-size 블록요소의 최대크기를 설정합니다. star grade grade grade grade
235 max-height 요소의 최대 높이를 설정합니다. star grade grade grade grade
236 max-inline-size 인라인 요소의 최대 크기를 설정합니다. star grade grade grade grade
237 max-width 요소의 최대 넓이를 설정합니다. star grade grade grade grade
238 min-block-size 블록요소의 최소크기를 설정합니다. star grade grade grade grade
239 min-height 요소의 최소 크기를 설정합니다. star grade grade grade grade
240 min-inline-size 인라인 요소의 최소 크기를 설정합니다. star grade grade grade grade
241 min-width 요소의 최소 넓이를 설정합니다. star grade grade grade grade
242 mix-blend-mode 배경의 혼합여부를 설정합니다. star grade grade grade grade
243 object-fit 이미지나 비디오 요소의 크기를 설정합니다. star grade grade grade grade
244 object-position 이미지나 비디오의 정렬을 설정합니다. star grade grade grade grade
245 offset 애니메이션을 적용하는데 필요한 속성을 일괄적으로 설정합니다. star grade grade grade grade
246 offset-anchor 이동요소의 내부 지점을 설정합니다. star grade grade grade grade
247 offset-distance 배치할 요소의 오프셋 경로를 따라 위치를 설정합니다. star grade grade grade grade
248 offset-path 모션 경로를 설정합니다. star grade grade grade grade
249 offset-position 모션 경로의 초기 위치를 설정합니다. star grade grade grade grade
250 offset-rotate 모션 경로의 방향을 설정합니다. star grade grade grade grade
251 opacity 불투명도를 설정합니다. star grade grade grade grade
252 order 플렉스나 그리드의 배치순서를 설정합니다. star grade grade grade grade
253 orphans 블록 컨테이너의 최소 수를 설정합니다. star grade grade grade grade
254 outline 외곽선을 일괄적으로 설정합니다. star grade grade grade grade
255 outline-color 외곽선의 색상을 설정합니다. star grade grade grade grade
256 outline-offset 아웃라인과 요소의 테두리 간격을 설정합니다. star grade grade grade grade
257 outline-style 외곽선 스타일 설정합니다. star grade grade grade grade
258 outline-width 외곽선의 두께를 설정합니다. star grade grade grade grade
259 overflow 콘텐츠 요소의 처리법을 설정합니다. star grade grade grade grade
260 overflow-anchor 콘텐츠의 스크롤 동작을 설정합니다. star grade grade grade grade
261 overflow-block 블록 끝의 표시내용을 설정합니다. star grade grade grade grade
262 overflow-clip-margin 요소의 경계를 얼마나 벗어났는지를 설정합니다. star grade grade grade grade
263 overflow-inline 인라인 요소가 오버플로될 때 내용을 설정합니다. star grade grade grade grade
264 overflow-wrap 문자가 내용을 넘치지 않게 단어줄을 설정합니다. star grade grade grade grade
265 overflow-x 컨텐츠가 왼쪽 이나 오른쪽으로 넘칠때 내용을 설정합니다. star grade grade grade grade
266 overflow-y 컨텐츠가 위쪽 이나 아래쪽으로 넘칠때 내용을 설정합니다. star grade grade grade grade
267 overscroll-behavior 스크롤 영역의 경계에 도달할때의 내용을 설정합니다. star grade grade grade grade
268 overscroll-behavior-block 스크롤 영역의 블록방향의 경계할때 내용을 설정합니다. star grade grade grade grade
269 overscroll-behavior-inline 스크롤 영역의 인라인방향의 경계할때 내용을 설정합니다. star grade grade grade grade
270 overscroll-behavior-x 스크롤 방향의 수평 경계에 도달 할때 내용을 설정합니다. star grade grade grade grade
271 overscroll-behavior-y 스크롤 방향의 수직 경계에 도달 할때 내용을 설정합니다. star grade grade grade grade
272 padding 요소의 네 방향 안쪽 여백을 설정합니다. star grade grade grade grade
273 padding-block-end 블록의 끝 영역의 안쪽 여백을 설정합니다. star grade grade grade grade
274 padding-block-start 블록의 시작 영역의 안쪽 여백을 설정합니다. star grade grade grade grade
275 padding-bottom 아래쪽 안쪽 여백을 설정합니다. star grade grade grade grade
276 padding-inline-end 인라인 끝 영역의 안쪽 여백을 설정합니다. star grade grade grade grade
277 padding-inline-start 인라인 시작 영역의 안쪽 여백을 설정합니다. star grade grade grade grade
278 padding-left 왼쪽의 안쪽 여백을 설정합니다. star grade grade grade grade
279 padding-right 오른쪽의 안쪽 여백을 설정합니다. star grade grade grade grade
280 padding-top 위쪽의 안쪽 여백을 설정합니다. star grade grade grade grade
281 page-break-after 현재 요소의 뒤의 페이지 나누기를 설정합니다. star grade grade grade grade
282 page-break-before 현재 요소의 앞의 페이지 나누기를 설정합니다. star grade grade grade grade
283 page-break-inside 현재 요소의 내부의 페이지 나누기를 설정합니다. star grade grade grade grade
284 perspective 3d 요소의 원근감을 위해 사용자와의 거리를 설정합니다. star grade grade grade grade
285 perspective-origin 뷰어가 보고 있는 위치를 설정합니다. star grade grade grade grade
286 place-content 블록 및 인라인의 방향에 따라 콘텐츠를 한번에 정렬합니다. star grade grade grade grade
287 place-items 블록 및 인라인의 방향에 따라 콘텐츠를 정렬합니다. star grade grade grade grade
288 place-self 블록 및 인라인의 방향에 따라 콘텐츠를 개별적으로 정렬합니다. star grade grade grade grade
289 pointer-events 포인터 이벤트의 대상 여부를 설정합니다. star grade grade grade grade
290 position 문서상의 요소를 배치 하는 방법을 설정합니다. star grade grade grade grade
291 print-color-adjust 출력장치에서 요소의 모양의 최적화를 설정합니다. star grade grade grade grade
292 quotes 따옴표의 렌더링을 설정합니다. star grade grade grade grade
293 resize 요소의 크기와 방향을 설정합니다. star grade grade grade grade
294 right 요소의 오른쪽 배치를 설정합니다. star grade grade grade grade
295 rotate 요소의 회전변형을 설정합니다. star grade grade grade grade
296 row-gap (grid-row-gap) 행 사이의 간격 크기를 설정합니다. star grade grade grade grade
297 ruby-align 다양한 루비요소의 분포를 설정합니다. star grade grade grade grade
298 ruby-position 상대적인 루비요소의 위치를 설정합니다. star grade grade grade grade
299 scale 요소의 확대 축소를 설정합니다. star grade grade grade grade
300 scroll-behavior 스크롤 상자의 동작을 설정합니다. star grade grade grade grade
301 scroll-margin 스크롤 여백을 일괄적으로 설정합니다. star grade grade grade grade
302 scroll-margin-block 블록 요소의 스크롤 여백을 설정합니다. star grade grade grade grade
303 scroll-margin-block-end 블록 요소의 스크롤 끝 여백을 설정합니다. star grade grade grade grade
304 scroll-margin-block-start 블록 요소의 스크롤 시작 여백을 설정합니다. star grade grade grade grade
305 scroll-margin-bottom 스크롤 영역의 아래쪽 여백을 설정합니다. star grade grade grade grade
306 scroll-margin-inline 인라인 요소의 스크롤 여백을 설정합니다. star grade grade grade grade
307 scroll-margin-inline-end 인라인 요소의 스크롤 끝 여백을 설정합니다. star grade grade grade grade
308 scroll-margin-inline-start 인라인 요소의 스크롤 시작 여백을 설정합니다. star grade grade grade grade
309 scroll-margin-left 스크롤 영역의 왼쪽 여백을 설정합니다. star grade grade grade grade
310 scroll-margin-right 스크롤 영역의 오른쪽 여백을 설정합니다. star grade grade grade grade
311 scroll-margin-top 스크롤 영역의 위쪽 여백을 설정합니다. star grade grade grade grade
312 scroll-padding 스크롤 영역의 패딩을 일괄적으로 설정합니다. star grade grade grade grade
313 scroll-padding-block 블록 요소의 스크롤 패딩을 설정합니다. star grade grade grade grade
314 scroll-padding-block-end 블록 요소의 스크롤 끝 패딩을 설정합니다. star grade grade grade grade
315 scroll-padding-block-start 블록 요소의 스크롤 시작 패딩을 설정합니다. star grade grade grade grade
316 scroll-padding-bottom 스크롤 영역의 아래쪽 패딩을 설정합니다. star grade grade grade grade
317 scroll-padding-inline 인라인 요소의 스크롤 패딩을 설정합니다. star grade grade grade grade
318 scroll-padding-inline-end 인라인 요소의 스크롤 끝 패딩을 설정합니다. star grade grade grade grade
319 scroll-padding-inline-start 인라인 요소의 스크롤 시작 패딩을 설정합니다. star grade grade grade grade
320 scroll-padding-left 스크롤 영역의 왼쪽 패딩을 설정합니다. star grade grade grade grade
321 scroll-padding-right 스크롤 영역의 오른쪽 패딩을 설정합니다. star grade grade grade grade
322 scroll-padding-top 스크롤 영역의 위쪽 패딩을 설정합니다. star grade grade grade grade
323 scroll-snap-align 스냅이 되었을 때 스냅 영역의 정렬을 설정합니다. star grade grade grade grade
324 scroll-snap-coordinate 상위 스크롤의 위치 정렬에 따라 위치를 설정합니다. star grade grade grade grade delete
325 scroll-snap-destination 상위 스크롤의 위치에 따라 뷰포트 위치를 설정합니다. star grade grade grade grade delete
326 scroll-snap-points-x 스냅포인트의 위치를 수평으로 설정합니다. star grade grade grade grade delete
327 scroll-snap-points-y 스냅포인트의 위치를 수직으로 설정합니다. star grade grade grade grade delete
328 scroll-snap-stop 스냅 위치를 통과할 수 있는지 여부를 설정합니다. star grade grade grade grade
329 scroll-snap-type 스냅포인트가 엄격하게 적용되는지를 설정합니다. star grade grade grade grade
330 scrollbar-color 스크롤바 트랙과 썸의 색상을 설정합니다. star grade grade grade grade
331 scrollbar-width 스크롤바 막대의 표시 두께를 설정합니다. star grade grade grade grade
332 shape-image-threshold 이미지 모양 추출의 임계점 값을 설정합니다. star grade grade grade grade
333 shape-margin 인라인 콘텐츠가 둘러 싸는 모양의 여백을 설정합니다. star grade grade grade grade
334 shape-outside 인라인 콘텐츠가 둘러 싸는 모양을 정의합니다. star grade grade grade grade
335 tab-size 탭 문자의 넓이를 설정합니다. star grade grade grade grade
336 table-layout 표의 셀, 행 및 열의 레이아웃을 설정합니다. star grade grade grade grade
337 text-align 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다. star grade grade grade grade
338 text-align-last 블록의 마지막 줄의 정렬방법을 설정합니다. star grade grade grade grade
339 text-combine-upright 문자 조합을 단일 문자 공간으로 설정합니다. star grade grade grade grade
340 text-decoration 텍스트의 장식용 선을 추가합니다. star grade grade grade grade
341 text-decoration-color 텍스트에 추가되는 장식선의 색상을 설정합니다. star grade grade grade grade
342 text-decoration-line 텍스트에 사용되는 장식의 종류를 설정합니다. star grade grade grade grade
343 text-decoration-skip 텍스트 장식이 건너뛰어야 하는 요소의 콘텐츠의 부분을 설정합니다. star grade grade grade grade
344 text-decoration-skip-ink 윗줄과 밑줄이 그려지는 방법을 설정합니다. star grade grade grade grade
345 text-decoration-style 텍스트 라인의 스타일을 설정합니다. star grade grade grade grade
346 text-emphasis 텍스트에 강조표시를 설정합니다. star grade grade grade grade
347 text-emphasis-color 텍스트 강조 표시의 색상을 설정합니다. star grade grade grade grade
348 text-emphasis-position 강조 표시가 그려지는 위치를 설정합니다. star grade grade grade grade
349 text-emphasis-style 강조 표시의 스타일을 설정합니다. star grade grade grade grade
350 text-indent 들여쓰기를 설정합니다. star grade grade grade grade
351 text-justify 텍스트 정렬 유형을 설정합니다. star grade grade grade grade
352 text-orientation 텍스트 문자의 방향을 설정합니다. star grade grade grade grade
353 text-overflow 텍스트의 숨겨진 콘텐츠의 방식을 설정합니다. star grade grade grade grade
354 text-rendering 텍스트의 렌더링 최적화 정보를 제공합니다. star grade grade grade grade
355 text-shadow 텍스트에 그림자를 추가합니다. star grade grade grade grade
356 text-size-adjust 텍스트의 팽창 알고리즘을 설정합니다. star grade grade grade grade
357 text-transform 텍스트를 대문자로 표시하는 방법을 설정합니다. star grade grade grade grade
358 text-underline-position 텍스트의 밑줄값을 이용하여 밑줄의 위치를 설정합니다. star grade grade grade grade
359 top 요소의 위쪽 위치를 설정합니다. star grade grade grade grade
360 touch-action 터치스크린의 영역을 설정합니다. star grade grade grade grade
361 transform 회전, 크기 조절, 기울이기, 이동효과를 설정합니다. star grade grade grade grade
362 transform-box transform의 속성과 레이아웃을 설정합니다. star grade grade grade grade
363 transform-origin 요소의 변형원점을 설정합니다. star grade grade grade grade
364 transform-style 요소가 3d공간에 배치되는지 평면에 배치되는지 여부를 설정합니다. 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 전환 효과를 적용할 css속성을 설정합니다. star grade grade grade grade
369 transition-timing-function 전환 효과의 영향의 중간값의 계산을 설정합니다. star grade grade grade grade
370 translate 번역 변형을 설정합니다. star grade grade grade grade
371 unicode-bidi 문서의 텍스트가 양방향으로 처리되는 방식을 설정합니다. star grade grade grade grade
372 user-select 사용자가 텍스트를 선택할수 있는지의 여부를 설정합니다. star grade grade grade grade
373 vertical-align 인라인 또는 테이블 셀 박스의 수직 정렬을 설정합니다. star grade grade grade grade
374 visibility 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다. star grade grade grade grade
375 white-space 공백 문자의 처리 방법을 설정합니다. star grade grade grade grade
376 widows 페이지 맨위에 표시되는 블록 컨테이너의 최소 수를 설정합니다. star grade grade grade grade
377 width 요소의 넓이를 설정합니다. star grade grade grade grade
378 will-change 요소에 예상되는 변화 종류에 관한 힌트를 브라우저에게 제공합니다. star grade grade grade grade
379 word-break 텍스트가 콘텐츠 밖으로 오버풀로 할때 줄 바꿈을 설정합니다. star grade grade grade grade
380 word-spacing 단어와 단어 사이, 태그와 태그 사이의 거리를 설정합니다. star grade grade grade grade
381 writing-mode 텍스트의 가로, 세로의 배치여부와 진행방향을 설정합니다. star grade grade grade grade
382 z-index 위치 지정요소와 하위 플렉스 아이템의 z축 순서를 설정합니다. 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;} 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
속성 선택자 [class] h1[class] class명을 가진 h1 요소를 선택합니다. star star star grade grade
[alt] img[alt] alt 속성을 가진 img요소를 선택합니다. star star star grade grade
[class="abc"] p[class="abc"] class명이 유일하게 'abc'인 p요소를 선택합니다. star star star grade grade
[class~="abc"] p[class~="abc"] class명이 유일하게 'abc'이거나 여러 개의 class명 중 하나가 'abc'인 p요소를 선택합니다. star star star grade grade
[class|="abc"] p[class|="abc"] class명이 'abc'이거나 'abc~'로 시작하는 p요소를 선택합니다. star star star grade grade
[class^="abc"] p[class^="abc"] class명이 철지 'abc'로 시작하는 p요소를 선택합니다. star star star grade grade
[class$="abc"] p[class$="abc"] class명이 철자 'abc'로 끝나는 p요소를 선택합니다. star star star grade grade
[class*="abc"] p[class*="abc"] class명에 철자 'abc'가 포함되어 있는 p요소를 선택합니다. star star star grade grade
[href^="mailto"] a[href^="mailto"] herf 속성값이 'mailto'로 시작하는 a요소를 선택합니다. 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-type p:last-of-type {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:focud {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