4. CSS - 반응, 상태, 동위 선택자

• 반응 선택자
  • 사용자의 움직임에 반응하여 선택되는 선택자
  • 선택자:active -> 선택된 요소를 클릭하고 있을 경우
  • 선택자:hover -> 선택된 요소에 마우스를 올리고 내릴 경우

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 :active 화면
	클릭하기 전 화면	클릭한 상태의 화면
웹에서 출력된 :hover 화면
	마우스를 가져가기 전 화면	마우스를 가져다 댄 화면

 

• 상태 선택자
  • 입력 양식 관련 태그(input, input 관련 태그) 상태에 따라 선택하는 선택자
  • :focus -> 요소에 초점이 맞춰진 상태인 경우 선택 (input 상태)
  • :checked -> 요소가 체크 되었을 때 선택 (radio, checkbox)
  • :enabled -> 요소가 사용 가능한 상태일 때 선택
  • :disabled -> 요소가 사용 불가능한 상태일 때 선택

 

 

 

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 :focus화면
	요소에 초점이 맞춰지지 않은 경우	요소에 초점이 맞춰진 경우
웹에서 출력된 :checked화면
	요소에 체크가 되지 않은 경우	요소에 체크가 된 경우
웹에서 출력된 :enable/disabled화면 - 사용가능에만 input 입력이 가능

 

 

• 동의 선택자
  • 동위 관계 (동등한 위치의 관계 == 형제 관계) 다음에(뒤에) 위치한 요소를 선택하는 선택자
  • 특정지을 수 있는 게 없을 때에도 사용이 가능

A
B (1)
B (2)
가 있을 경우

A를 기준으로 바로 다음에 존재하는 B 요소(1)를 하나 선택할 경우
작성법 : A + B { CSS 코드; }

A를 기준으로 다음에 오는 모든 B 요소 (1), (2) 선택
작성법 : A  ~ B { CSS 코드; }

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면