[CSS -8] 의사요소와 의사 클래스

의사요소와 의사 클래스

의사 클래스

• 의사 클래스(가상클래스)는 선택자에 추가하는 키워드
• 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미
• 사용법

  선택자:의사클래스{
  속성명 : 속성값;
  }

• 자주 쓰이는 의사 클래스

  속성 값	설명
  hover	마우스 포인터가 요소에 올라가 있다.
  active	사용자가 요소를 활성화 했다.
  focus	요소가 포커스를 받고 있다.
  disabled	비활성 상태의 요소이다.
  nth-child()	형제 사이에서의 순서에 따라 요소를 선택한다.

의사 요소

• 선택자에 추가하는 키워드
• 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있음
• 사용법

  선택자::의사요소{
  속성명 : 속성값;
  }

• 자주 쓰이는 의사 요소

  속성 값	설명
  after	요소의 앞에 의사 요소를 생성 및 추가
  before	요소의 뒤에 의사요소를 생성 및 추가
  first-line	블록 레벨 요소의 첫 번째 선에 스타일을 적용
  marker	목록 기호의 스타일을 적용
  placeholder	입력 요소의 플레이스홀더(자리표시자) 스타일을 적용