html) 가상 요소(Pseudo-element)와 가상클래스(Pseudo-class)

가상 요소(Pseudo-Element)

 

가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며,
존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능함.

 

::first-line	요소의 텍스트 중 첫 줄
::first-letter	요소의 첫번째 글자
::before	요소의 컨텐츠 시작부분
::after	요소의 컨텐츠 끝부분
::selection	요소의 텍스트 중 선택된 영역(drag)
::placeholder	input 필드 힌트 텍스트인 placeholder

cf> 가상 클래스는 가상 요소와 달리 요소의 특정 상태에 스타일을 적용할 때 사용한다.

selector::pseudo-element { property: value; }

-> 단일 콜론(:) 대신 이중 콜론(::)을 사용하여 의사 클래스와 의사 요소를 구별해야 함.





___

가상 클래스

선택한 요소가 특별한 상태여야 만족할 수 있음.
예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있음.


syntax>

selector:pseudo-class { property: value; }

예제>

button:hover { color: blue; }

 

대표적인 가상 클래스 예.

:link	방문 안한 링크
:visited	방문한 링크
:active	링크 누를때
:hover	링크에 마우스 올릴때
:focus	요소가 포커스될때 (키보드 or 문자입력양식)
:first-child	요소의 첫번째 자식요소
:first-line	블록 요소 문단의 첫번째 줄
:first-letter	블록 요소 첫줄에 첫번째 문자
:before	요소 내용 앞에 추가할 태그 지정 (content 속성 필요)
:after	요소 내용 뒤에 추가할 태그 지정 (content 속성 필요)

---

REFERENCE

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

의사 요소 - CSS: Cascading Style Sheets | MDN