문자 선택자[시작 문자 선택자, 전후 문자 선택자, 반응 문자 선택자]

이번 포스팅에서는 문자 선택자 중에서

-시작 문자 선택자

-전후 문자 선택자

-반응 문자 선택자

에 대해 포스팅을 해보도록 하겠습니다.

1. 문자 선택자

태그 내부의 특정한 조건의 문자를 선택하는 선택자

보통 :: 를 사용하지만 : 도 사용 가능

1-1. 시작 문자 선택자

태그 내부의 첫 번째 글자와 첫 번째 줄을 선택할때 사용하는 태그

문법 형태

::first-letter -> 첫 번째 글자를 선택

::fist-line -> 첫 번재 줄을 선택

예제를 통해서 한번 알아보도록 하겠습니다.

여기다가 시작 문자 선택자를 한번 적용시켜 볼게요

"p태그 중에서 첫번째 글자 크기를 3em 으로 해줄게"

"p태그 중에서 첫번째 줄의 글자 색을 빨강으로 해줄게"

짠~~참 쉽죠잉?

1-2. 전후 문자 선택자

특정 태그의 전후에 위치하는 공간을 선택하는 선택자

문법 형태

::after -> 태그 뒤에 위치하는 공간을 선택

::before -> 태그 앞에 위치하는 공간을 선택

이 속성은 사용 빈도가 매우 낮아서 따로 자세한 설명은 안드리겠습니다.

1-3. 반응 문자 선택자

문자를 드래그할 때 변화하는걸 정해주기 위해 사용하는 선택자

문법 형태

::selection -> 사용자가 드래그한 글자 선택

예제를 통해서 알아볼게요

겁나 간단해요!!

이때는 드래그할때 그냥 이렇게 보여져요

반응 문자 선택자를 사용하면

요렇게 되요!!

이제 아시겠죠??