의사요소와 의사클래스

✏️ 의사 클래스

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

자주 쓰이는 의사 클래스

• hover : 마우스 포인터가 요소에 올라감
• active : 사용자가 요소를 활성화함 (클릭 등)
• focus : 요소가 포커스를 받고 있음
• disabled : 비활성 상태의 요소
• nth-child() : 형제 사이에서의 순서에 따라 요소를 선택

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

h1 요소에 hover 상태가 되면 색상을 red로 변경

---

✏️ 의사 요소

의사요소(pseudo-elements)는 선택자에 추가하는 키워드
선택한 요소의 특정 부분에 대한 스타일 정의

자주 쓰이는 의사 요소

• after : 요소의 앞에 의사 요소를 생성 및 추가
• before : 요소의 뒤에 의사 요소를 생성 및 추가
• first-line : 블록 레벨 요소의 첫 번째 선에 스타일을 적용
• marker : 목록 기호의 스타일 적용
• placeholder : 입력 요소의 플레이스홀더 스타일 적용

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

li 요소의 첫 글자를 red로 색상 지정