CSS 가상 요소

CSS 가상 요소 (Pseudo-element)

• 선택자에 추가 하는 키워드
• 실제로는 존재하지 않는 element 이지만 존재하는 element 인 것처럼 사용 가능

p::before{
 content : "";
 width: 100px;
 height : 100px;
 background-color : black;
}

위와 같이 작성한다면 가상의 element가 설정한 속성에 맞추어(::before 다음에 나오는 속성) p태그의 content 바로 앞에 삽입되어 렌더링된다.
즉 가상 요소는 위와 같이 가상의 element를 지정한 속성에 맞추어 지정한 위치에 만드는 거라고 나는 이해했다.

가상 요소 종류

• ::before => 특정 요소 content 바로 앞에 샆입
• ::after => 특정 요소 content 바로 뒤에 삽입
• ::first-letter => 요소의 첫 글자를 선택
• ::first-line => 요소의 첫 번째 줄을 선택
• ::marker => marker 목록 항목의 마커를 선택
• ::selection => 해당 요소에서 사용자가 선택한 요소 부분을 선택
• ::placeholder => input 필드 안 텍스트를 선택

::before, ::after

대표적인 가상요소이며 가장 자주 사용되는 것 같다.
before와 after를 사용할 때는 content 속성이 꼭 필요하다 content="" 왜냐하면 before과 after의 경우 html에 content 속성으로 지정한 값이 새롭게 생성되기 떄문이다.

앞서 언급했듯 엄청나게 많은 곳에서 쓰이고 있는데, 대표적으로 div 태그와 div 태그 사이의 경계선을 표시할 때 자주쓰이는 모습을 각종 프로젝트에서 확인할 수 있다.

그 외 다른 속성

다른 속성들은 ::before,::after와는 다르게 content 속성을 지정하지 않아도 사용가능하다 . 왜냐하면 요소의 어떤 부분을 지정하기 떄문에 content값이 정해져 있기 때문.