다양한 selector

다양한 선택자

다양한 선택자를 학습하여 스타일 적용하기

Selector	Type	Description
전체 선택자	* { width:100%; }	모든 요소에 스타일을 적용할 때 사용 HTML 페이지에 있는 모든 요소를 대상으로 스타일을 적용 HTML 전체를 대상으로 가로 값을 100%로 설정
타입 선택자	p { width:100%; }	태그 선택자 p 요소에게 가로 값을 100% 설정
class 선택자	.wrap { width:100%; }	클래스 wrap에 가로 값을 100% 설정
id 선택자	#wrap { width:100%; }	아이디 wrap에 가로 값을 100% 설정
후손 선택자	div p { width:100%; }	'하위 선택자'라고도 합니다. div 요소 안에 있는 p 요소에게 가로 값을 100% 설정
자식 선택자	div > p { width:100%; }	div 요소 바로 아래에 있는 p 요소에게 가로 값을 100% 설정
이웃 선택자	div + p { width:100%; }	div 요소 바로 다음에 오는 p 요소에게 가로 값을 100% 설정
형제 선택자	div ~ p { width:100%; }	div 요소와 p 요소가 형제관계에 있다면 p 요소에게 가로 값을 100% 설정
그룹 선택자	div, p { width:100%; }	div 요소와 p 요소에게 가로 값을 100% 설정
속성 선택자	[type=input] { width:100%; }	타입 유형 중 input 요소에게 가로 값 100% 설정