가상클래스와 가상요소(::before와::after)

1. 가상클래스(Pseudo-Class)

 - 별도의 class를 지정하지 않아도 지정한 것 처럼 요소를 선택할 수 있습니다.

 

2. 가상요소(Pseudo-Element)

 - 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능합니다.

 

대표적으로 사용되고 있는 가상요소들

 

 3. ::before, ::after의 정의

  3-1. ::before 란 실제 내용 바로 앞에서 생성되는 자식요소

  3-2. ::after 란 실제 내용 바로 뒤에서 생성되는 자식요소

  이 둘을 사용할 땐 content라는 속성이 반드시 필요합니다.

 

 4. content=""; 정의

  HTML 문서정보에 포함되지 않는 요소를 CSS에서 새롭게 생성시켜 준다. 

contetn의 속성들