css_의사 클래스(가상 클래스)

의사클래스(가상클래스)

• 선택자에 추가하는 키워드
• 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미

  h1:hover{
      color: red;
  }
  => h1 요소에 마우스 커서 올라오면(hover) 글자 빨간색으로 바뀜

• 속성 값
  - hover
  마우스 포인터가 요소에 올라가 있음
  - active
  사용자가 요소를 활성화(ex) 마우스 누르기)
  - focus
  요소가 포커스를 받고 있음
  tab으로 활성화 될 때
  - disabled
  비활성 상태의 요소
  - nth-child()
  형제 사이에서의 순서에 따라 요소를 선택

의사 요소(pseudo-elements)

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

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

li::first-letter{
	font-size: 20px;
}
=> li요소의 첫 번째 글자만 크기를 20px로 하겠다. (기본 값은 16px)

• 속성 값:
  - after
  요소의 뒤에 의사 요소를 생성 및 추가

  a::after{
   	content: "추가"
   }
   => a 태그 요소 뒤에 '추가'라는 글씨가 추가된다.

  • before
    요소의 앞에 의사 요소를 생성 및 추가
    display:inline-block; 을 이용해서 block화 한 다음, 글자 크기 등을 조정할 수 있음

    a::before{
    	content: "추가"
    }
    => a 태그 요소 앞에 '추가'라는 글씨가 추가된다.