[CSS] 가상요소, 가상클래스란? (의사요소, 의사클래스)

CSS 가상요소란?

CSS선택자에 추가하는 키워드로,

우리가 선택한 요소의 일부분에만 스타일을 입힐 수 있게 해준다.

 

가상요소의 종류

가상요소	기능
p::first-line { 스타일 }	p문단의 첫번째 줄에만 스타일을 적용한다.
div::first-letter { 스타일 }
p::before { content: "😀", 스타일... }	p문단 바로 앞에 😀 아이콘 추가, 스타일 적용
p::after { content: "🤣", 스타일... }	p문단 바로 뒤에 🤣 아이콘 추가, 스타일 적용
div::backdrop { 스타일 }	div 내부, 콘텐츠가 없는 부분에 스타일 적용
div::cue { 스타일 }
div::cue-region { 스타일 }
div::grammar-error { 스타일 }
div::marker { 스타일 }
div::part(요소) { 스타일 }
div::placeholder { 스타일 }
div::selection { 스타일 }
div::slotted(요소) { 스타일 }
div::spelling-error { 스타일 }

 

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

 

---

CSS 가상클래스란?

CSS선택자에 추가하는 키워드로,

우리가 선택한 요소의 조건에 따라 스타일을 입힐 수 있게 해준다.

 

가상클래스의 종류

가상요소	기능
p:hover { 스타일 }	p문단위에 마우스가 올라갔을때, 해당 스타일을 적용
p:active { 스타일 }	p문단을 클릭중일때, 해당 스타일을 적용
p:focus { 스타일 }	p문단을 클릭했을때, 해당 스타일을 적용

 

의사 클래스 - CSS: Cascading Style Sheets | MDN