CSS 선택자 - 가상 요소 선택자

 

 

가상 요소 선택자 ( Pseudo-Element Selector )

   - 가상 클래스 선택자와 사용법은 비슷합니다.

   - 콜론( : )을 두번을 입력하여 사용하지만, 콜론을 한번만 입력해도 가능합니다

      > 코드 가독성을 위해 가급적이면 콜론을 두번 입력하는것을 권고하고 있습니다.

   - 상태에 따라서 적용해주는 가상 클래스 선택자와는 달리,

      실제로 존재하지 않는 요소를 만들거나, 범위를 만들어 적용합니다.

/* Pseudo Element Selector*/

/* CSS */
.movie::before{
    content: 'MOVIE';
    color: indianred;
}

<!-- HTML -->
<div class="movie">Toy Story</div>
<div class="movie">Zootopia</div>
<div class="movie">Inside Out</div>
<div class="movie">Coco</div>
<div class="movie">Finding Nemo</div>

실행 화면

   - div 앞에 MOVIE 라는 글자가 추가되고, 스타일이 적용됩니다.

   - 이렇게 추가된 요소는 다른 상호작용이 되지 않습니다.

   - 주로 컨텐츠에 뱃지나 구분점, 구분바를 추가하는 등의 꾸밈요소로 사용합니다.

 

   before & after

      - selector::before

         > 태그 앞에 요소를 적용합니다.

      - selector::after 

         > 태그 뒤에 요소를 적용합니다.

 

 

   first-letter & first-line & selection

     - selector::first-letter

         > 선택자의 첫번째 글자에 스타일을 적용합니다.

      - selector:: first-line

         > 선택자의 첫번째 줄에 스타일을 적용합니다

      - selector::selection

         > 드래그한 영역에 스타일을 적용합니다.