whatisthis?

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

WEB STUDY/HTML,CSS

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

thisisyjin 2021. 10. 19. 14:26

가상 요소(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

CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line (en-US)을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.

developer.mozilla.org