reference book

CSS 레퍼런스 북

CSS 레퍼런스

번호 속성 설명 중요 보기 비고
01 accent-color 일부 요소가 생성하는 사용자 인터페이스 컨트롤의 강조색을 지정합니다. star grade grade grade grade ㅡ
02 align-content 콘텐츠 사이와 콘텐츠 주위 빈 공간을 교차축(flex박스) 또는 블록축(grid)을 따라 배치할지 속성할 수 있습니다. star grade grade grade grade ㅡ
03 align-items 플렉스 요소의 수직 방향 정렬 방식을 설정합니다. star grade grade grade grade ㅡ
04 align-self 개별적인 플렉스 아이템의 정렬 상태를 설정합니다. star grade grade grade grade ㅡ
05 all 요소의 unicode-bidi, direction, CSS 사용자 지정 속성을 제외한 모든 속성을 초기화합니다. 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 애니메이션 key frame 이름을 설정합니다. star star star star star ㅡ
13 animation-play-state 애니메이션 진행상태를 설정합니다. star star grade grade grade ㅡ
14 animation-timeline 요소에 적용할 스크롤 애니메이션을 설명하는 하나 이상의 @scroll-timeline at-rules 이름을 지정합니다. 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 각각의 논리 블록 border 속성 값을 설정합니다. star grade grade grade grade ㅡ
35 border-block-color 물리적 테두리 색상에 매핑하는 요소의 논리 블록 테두리의 색상을 정의합니다. star grade grade grade grade ㅡ
36 border-block-end 각각의 논리 블록 엔드 border 속성 값을 설정합니다. 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 각각의 논리 블록 스타트 border 속성 값을 설정합니다. 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 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 border-image-source로 설정한 이미지를 여러 개의 영역으로 나눕니다. 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 각각의 논리적 인라인 border 속성 값을 설정합니다. star grade grade grade grade ㅡ
63 border-inline-color 요소의 논리적 인라인 테두리의 색상을 정의합니다. star grade grade grade grade ㅡ
64 border-inline-end 각각의 논리적 인라인 엔드 border 속성 값을 설정합니다. 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 각각의 논리적 인라인 시작 border 속성 값을 설정합니다. 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 표(table)의 캡션의 위치를 정하는 속성입니다. star grade grade grade grade ㅡ
102 caret-color input의 커서 색을 정의합니다. star grade grade grade grade ㅡ
103 clear 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 CSS 카운터 값을 주어진 값 만큼 늘리거나 줄 입니다. star grade grade grade grade ㅡ
122 counter-reset 콘텐츠의 숫자를 초기화합니다. star grade grade grade grade ㅡ
123 counter-set CSS 카운터 를 주어진 값으로 설정합니다. 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 CSS 속성에 저장된 폰트 자간 정보의 사용을 설정한다. 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 암시적 열(Track)의 크기를 정의합니다. star grade grade grade grade ㅡ
162 grid-auto-flow 배치하지 않은 아이템(Item)을 어떤 방식의 ‘자동 배치 알고리즘’으로 처리할지 정의합니다. star grade grade grade grade ㅡ
163 grid-auto-rows 암시적 행(Track)의 크기를 정의합니다. star grade grade grade grade ㅡ
164 grid-column grid-column-start와 grid-column-end 속성을 같이 사용합니다. star grade grade grade grade ㅡ
165 grid-column-end 그리드 선(Line)의 ‘끝 위치’를 지정합니다. star grade grade grade grade ㅡ
166 grid-column-start 그리드 선(Line)의 ‘시작 위치’를 지정합니다. star grade grade grade grade ㅡ
167 grid-row grid-row-start과 grid-row-end의 단축 속성입니다. 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 grid-area 속성으로 설정된 그리드 영역의 이름을 참조하여, 그리드 템플릿 영역을 설정할 수 있습니다. star grade grade grade grade ㅡ
172 grid-template-columns 공백으로 구분된 값 리스트를 해석하여 그리드 행(Row), 열(Column)을 설정합니다. 각 값은 트랙 크기를 말합니다. 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 IME(Input Method Editor)의 상태를 반환하거나 설정합니다. 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 참고상하좌우값을 지정해 줄수 있는 css 속성입니다. 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 stacking context을 설정합니다. star grade grade grade grade ㅡ
193 justify-content 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. star grade grade grade grade ㅡ
194 justify-items justify-self에게 적절한 축을 따라 각 상자를 정렬하는 속성입니다. 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 한중일(CJK) 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 mask-border에 사용되는 블렌딩 모드 속성입니다. 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 border-image-source로 설정한 이미지를 여러 개의 영역으로 나눕니다. 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 background-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 img, video 태그의 크기를 정의합니다. star grade grade grade grade ㅡ
244 object-position img, video 태그의 위치를 정의합니다. star grade grade grade grade ㅡ
245 offset 상대주소의 값을 정합니다. 상대주소이기 때문에 offset값을 지정할 엘레먼트와 기준이 될 엘레먼트가 필요합니다. star grade grade grade grade ㅡ
246 offset-anchor offset-path 를 따라 이동하는 요소의 상자 내부 지점을 지정합니다 . star grade grade grade grade ㅡ
247 offset-distance offset-path 요소의 위치가 됩니다. star grade grade grade grade ㅡ
248 offset-path 애니메이션 요소가 따를 수 있는 경로를 정의합니다. star grade grade grade grade ㅡ
249 offset-position 엘레먼트의 위치를 정하는 속성입니다. star grade grade grade grade ㅡ
250 offset-rotate 소자의 배향 / 정의 방향 offset-path 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-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 3D를 표현할 때 원근점의 방향을 정의합니다. star grade grade grade grade ㅡ
286 place-content 첫번째 값으로 align-content의 값을 받고, 두번째 값으로는 justify-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 요소를 지정한 크기만큼 확대or축소 시킬 수 있습니다. 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 Deprecatedscroll-snap-coordinate 각 축에 대한 가장 가까운 조상 스크롤 컨테이너의 스크롤 스냅 대상과 정렬되는 요소 내의 x및 y좌표 위치를 정의합니다. star grade grade grade grade ㅡ delete
325 Deprecatedscroll-snap-destination 크롤 컨테이너 비주얼 내의 x 및 y 좌표 위치를 정의 star grade grade grade grade ㅡ delete
326 Deprecatedscroll-snap-points-x 물리보다는 논리상 방향과 차원 맵핑을 통해 레이아웃을 제어하는 능력을 제공하는 속성 및 값을 정의하는 CSS 모듈입니다. star grade grade grade grade ㅡ delete
327 Deprecatedscroll-snap-points-y 물리보다는 논리상 방향과 차원 맵핑을 통해 레이아웃을 제어하는 능력을 제공하는 속성 및 값을 정의하는 CSS 모듈입니다. 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 shape-outside를 통해 생성된 형태의 바깥여백을 설정합니다. 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 CSS 표준에 정의되지 않은 SVG 속성입니다. 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 컨텐츠 요소를 이동(translate), 회전(rotate), 확대(scale), 기울기(skew) 등의 효과를 줄 수 있습니다. 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 요소의 움직임 스타일을 정의합니다. 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 transition의 적용 여부를 정의합니다. star grade grade grade grade ㅡ
369 transition-timing-function 요소의 움직임 기능을 정의합니다. star grade grade grade grade ㅡ
370 translate 페이지를 지역화할 때 요소의 Text 노드 자식 및 번역 가능한 특성의 값을 번역해야 되는지, 아니면 그대로 유지해야 하는지 나타내는 열거형 속성입니다. star grade grade grade grade ㅡ
371 unicode-bidi 글자의 방향 속성을 설정합니다. star grade grade grade grade ㅡ
372 user-select 요소의 텍스트를 선택할 지 정의합니다. star grade grade grade grade ㅡ
373 vertical-align 텍스트의 상하 정렬 방식을 설정합니다. star grade grade grade grade ㅡ
374 visibility 요소를 보이지 않게 정의합니다. star grade grade grade grade ㅡ
375 white-space 줄바꿈, 공백, 줄 속성을 설정합니다. star grade grade grade grade ㅡ
376 widows 블록 컨테이너의 최소 줄 수를 설정합니다. star grade grade grade grade ㅡ
377 width 요소의 가로 값을 정의합니다. star grade grade grade grade ㅡ
378 will-change 엘리먼트에 어떠한 변경을 할 것인지를 미리 브라우저에 알려주는 속성입니다. star grade grade grade grade ㅡ
379 word-break 줄바꿈 속성을 설정합니다. star grade grade grade grade ㅡ
380 word-spacing 단어 사이의 간격을 정의합니다. star grade grade grade grade ㅡ
381 writing-mode 텍스트 라인 방향(가로/세로) 여부를 결정합니다. star grade grade grade grade ㅡ
382 z-index 요소의 위치가 겹칠 경우 순서를 정의합니다. star grade grade grade grade ㅡ
선택자 종류 예시 설명 중요 비고
기본 선택자 태그 선택자 div {color: #fff;} div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. star star star star star
클래스 선택자 .class {color: #fff;} 클래스(.class)를 선택하여 글씨 색을 하얀색으로 변경합니다. star star star star star
아이디 선택자 #id {color: #fff;} 아이디(#id)를 선택하여 글씨 색을 하얀색으로 변경합니다. star star star star star
그룹 선택자 h1,h2,h3,h4,h5,h6 {font-weight: normal;} 여러개의 태그를 선택하여 폰트 두께를 기본값으로 설정합니다. star star star star star
전체 선택자 * {margin: 0;} 전체 태그를 선택하여 바깥쪽 여백을 0으로 설정합니다. star star star star star
계층 선택자 하위 선택자 div p {color : #fff;} 선택자 사이를 공백으로 분리하여, 요소 내부의 모든 해당 요소의 글자색을 흰색으로 변경합니다. star star star star star
자식 선택자 div > p {color : #fff;} 선택자 사이를 '>'로 분리하여, 요소 내부의 해당 요소의 글자색을 흰색으로 변경합니다.. star star star star grade
형제 선택자 div ~ p {color : #fff;} 선택자 사이를 '~'로 분리하여, 현재 요소와 같은 계층에 있는 요소만 글자색을 흰색으로 변경합니다. star star star grade grade
인접 선택자 div + p {color: #fff;} div 요소의 바로 뒤에 나오는 p태그만 글자색을 흰색으로 변경합니다. star star star grade grade
속성 선택자 [name] a[href] href 속성을 가진 a 요소 star star star star star
[name="value"] a[href="#web"] href 속성값이 id(web)인 a요소 star star grade grade grade
[name~="abc"] p[class~= "abc"] class명이 유일하게 'abc'이거나 여러개의 class 중 하나가 'abc'인 p요소 star star grade grade grade
[name|="abc"] p[class|="abc"] class명이 'abc'이거나 'abc-'로 시작하는 p요소 star star grade grade grade
[name^="abc"] p[class^="abc"] class명이 철자 'abc'로 시작하는 p요소 star star grade grade grade
[name$="abc"] p[class$="abc"] class명이 철자 'abc'로 끝나는 p요소 star star grade grade grade
[name*="abc"] p[class*="abc"] class명에 철자 'abc'가 포함되어 있는 p요소 star star grade 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 태그 안에서 드래그 한 영역의 글씨 색상을 red로 변경합니다. 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 star star
:visited a:visited {color: #fff} 방문했던 링크를 선택하여 글자 색상을 흰색으로 변경합니다. star star star star star
:hover a:hover {color: #fff} 마우스를 o태그 위에 올린 상태일때 글자 색상을 흰색으로 변경합니다. star star star star star
:active a:active {color: #fff} o 태그를 마우스로 클릭한 상태일때 글자 색상을 흰색으로 변경합니다. star star star star star
폼 선택자 :checked input:checked {color: #fff} input박스가 체크 되었을 때 색상을 흰색으로 변경합니다. star star star star star
:focus input:focus {color: #fff} input박스에 초점(커서생성)이 맞춰졌을 때 글자 색상을 흰색으로 변경합니다. star star star star star
:enabled input:enabled {color: #fff} input박스가 사용 가능 할 때 글자 색상을 흰색으로 변경합니다. star star star star star
:disabled input:idsabled {color: #fff} input박스가 사용 불가능 일때 글자 색상을 흰색으로 설정합니다. star star star star star
번호 속성 설명 중요 보기 비고