pseudo class와 pseudo element

 

pseudo class (:pseudo-class)

 

 

특정 상태의 요소를 선택할 때 사용한다.

 

요소 자체는 변하지 않지만, 조건에 따라 스타일을 적용한다.

 

사용 예

• :hover
  • 사용자가 마우스를 올렸을 때
• :nth-child(n)
  • 특정 위치의 자식을 선택
• :focus
  • 요소가 포커스를 받을 때

 

a:hover {
  color: red;
}

링크에 마우스를 올렸을 때 텍스트 색이 빨간색으로 바뀐다.

 

pseudo element (::pseudo-element)

 

HTML 요소의 특정 부분을 선택하거나 가상의 요소를 만들어 스타일링할 때 사용한다.

 

실제 DOM 요소에 영향을 주지 않고 특정 부분만 스타일 적용한다.

 

사용 예

• ::before
  • 요소의 시작 부분에 가상의 콘텐츠 추가
• ::after
  • 요소의 끝부분에 가상의 콘텐츠 추가
• ::first-line
  • 텍스트의 첫 번째 줄에 스타일 적용

 

p::before {
  content: "Note: ";
  font-weight: bold;
}

모든 <p> 요소의 시작 부분에 "Note: "라는 텍스트가 추가된다.

 

특징	pseudo class	pseudo element
기능	상태를 선택	특정 부분이나 가상 요소 스타일링
구문	: (콜론 한 개)	:: (콜론 두 개)
작용 대상	기존 요소	요소의 일부 또는 가상 영역
예	:hover, :nth-child	::before, ::after, ::placeholder

실용적으로는 pseudo-class는 상태를, pseudo-element는 특정한 스타일링을 하는 데 사용한다.