Class13(가상요소)

2022. 05. 03 수업정리 #1/3

가상요소

• 의사 클래스(pseudo-class)

  선택하고자 하는 HTML 요소의 특별한 ‘상태(state)’를 명시할 때 사용합니다.
  

• 의사 클래스의 문법

  사용하기 위해서는 아래와 같은 문법을 사용합니다.

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

  클래스, 아이디에도 사용 가능합니다.

  선택자.클래스이름:의사클래스이름 {속성:속성값;}
  선택자#아이디이름:의사클래스이름 {속성:속성값;}
  

  ★의사클래스의 이름은 대소문자를 구분하지 않습니다.★
  

• 대표적인 CSS 의사 클래스

  1. 동적 의사 클래스(dynamic pesudo-class)
     • :link
     • :visitied
     • :hover
     • :active
     • :focus
       
  2. 상태 의사 클래스(UI element )
     • :checked
     • :enabled
     • :disabled
       
  3. 구조 의사 클래스(structural pesudo-class)
     • :first-child
     • :nth-child
     • :first-of-type
     • :nth-of-type
       
  4. 기타 의사 클래스
     • :not
     • :lang
       

• CSS 의사 클래스(pesudo-classes) 표

  의사 클래스	설명
  :link	사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함. (기본 상태)
  :visited	사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함.
  :hover	사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택함.
  :active	사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택함.
  :focus	초점이 맞춰진 input 요소를 모두 선택함.
  :checked	체크된(checked) 상태의 input 요소를 모두 선택함.
  :enabled	사용할 수 있는 input 요소를 모두 선택함.
  :disabled	사용할 수 없는 input 요소를 모두 선택함.
  :target	현재 활성화된 target 요소를 모두 선택함.
  :in-range	특정 범위 내의 값을 가지는 input 요소를 모두 선택함.
  :out-of-range	특정 범위를 벗어나는 값을 가지는 input 요소를 모두 선택함.
  :read-only	readonly 속성을 가지는 input 요소를 모두 선택함.
  :read-write	readonly 속성을 가지지 않는 input 요소를 모두 선택함.
  :required	required 속성을 가지는 input 요소를 모두 선택함.
  :optional	required 속성을 가지지 않는 input 요소를 모두 선택함.
  :valid	유효한 값을 가지는 input 요소를 모두 선택함.
  :invalid	유효하지 않은 값을 가지는 input 요소를 모두 선택함.
  :first-child	모든 자식(child) 요소 중에서 첫 번째에 위치하는 자식(child) 요소를 모두 선택함.
  :last-child	모든 자식(child) 요소 중에서 마지막에 위치하는 자식(child) 요소를 모두 선택함.
  :nth-child	모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
  :nth-last-child	모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
  :first-of-type	모든 자식(child) 요소 중에서 첫 번째로 등장하는 특정 요소를 모두 선택함.
  :last-of-type	모든 자식(child) 요소 중에서 마지막으로 등장하는 특정 요소를 모두 선택함.
  :nth-of-type	모든 자식(child) 요소 중에서 n번째로 등장하는 특정 요소를 모두 선택함.
  :nth-last-of-type	모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 요소를 모두 선택함.
  :only-child	자식(child) 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
  :only-of-type	자식(child) 요소를 특정 요소 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
  :empty	아무런 자식(child) 요소도 가지지 않는 요소를 모두 선택함.
  :root	문서의 root 요소를 선택함.
  :not(선택자)	모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용함.
  :lang(언어)	특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용함.