HTML-CSS 가상 요소 선택자(Pseudo-Elements)

1. ABC::before 가상 요소 선택자

선택자 ABC 요소의 내부 앞에 내용을 삽입.

가상의 인라인(글자) 요소(ex. 앞!)를 만들어서 선택자 태그의 내부의 앞에 삽입됨 !

cf. 인라인 요소는 가로, 세로 값을 설정해도 적용되지 않는 특성이 있다 !

     => 가로, 세로 값 적용해주고 싶으면 가상 요소 선택자를 블록 요소로 설정해주면 가능하다.

           !! display: block;

 

 

 

2. ABC::after 가상 요소 선택자

선택자 ABC 요소의 내부 뒤에 내용을 삽입.

가상의 인라인(글자) 요소(ex. 뒤!)를 만들어서 선택자 태그의 내부의 뒤에 삽입됨 !

!! ::before와 ::after 가상 요소 선택자를 사용할 때는,

   내용이 삽입하려는 내용이 있든 없든 반드시 content: " ";를 작성해야 작동한다. 쌍으로 작성하는 것 명심할 것 !

 

  cf. 이렇게 삽입하려는 텍스트가 없어도 가상 요소 선택자 ::before, ::after를 통해 어떤 모양을 부여하고 꾸밀 수 있다.

    보통 이런 부분은 CSS에 작성하여 제어하고 HTML은 덜 복잡하게 만든다.