4일차(CSS-의사요소&의사클래스)-24.11.19

의사클래스&의사요소

의사클래스

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

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

예) h1:hover{color: red; }
-h1로 지정되어있는 요소에 마우스커서가 올라가면 글자를 빨간색으로 하겠다.

자주 쓰이는 의사클래스들

속성값	설명
hover	마우스커서가 요소에 올라가있다.
active	사용자가 요소를 활성화했다. (마우스로 클릭, 등등..)
focus	요소가 포커스를 받고 있다. (예)채팅창에 커서가 깜빡거리는 상태
disabeled	비활성 상태의 요소이다
nth-child()	형제 사이에서의 순서에 따라 요소를 선택한다.

 

의사요소

의사요소(pseudo-elements)는 선택자에 추가하는 키워드로,
이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수있다.
( :: 2개 사용 )

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

예) li::first-letter{font-size: 30px; }
-li로 지정되어있는 요소의 첫 번째 글자들만 30px로 변경하겠다.
(기본값은 16px)

자주 쓰이는 의사 요소들

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