[CSS] 가상 요소 선택자

가상 클래스 선택자에 이은 가상 요소 선택자에 대하여

• 살펴볼 가상 요소 선택자의 종류
  1) before & after
  2) first-letter & first-line & selection

before & after

• 조잡하지만..? 간단하게 예매 시간표를 만들어봤다. 이 때, '스파이더맨4'와 '인셉션'의 바로 뒤에는 빨간 글씨로 sold out이라는 글자가 적혀 있는데, 이는 가상 요소 선택자인 ::after를 이용하여 스타일을 적용해준 것이다. 이처럼 가상 요소 선택자 after는 선택한 부분의 바로 뒷부분(after)에 속성으로 준 content에 쓰여진 문자열을 넣어준다. 그래서 해당 선택자로 선택한 모든 요소에 저렇게 sold out처리를 해줄 수 있다.
• 다음으로 인셉션이라는 영화 앞에 파란색 하트가 붙어 있는데, 이는 가상 요소 선택자인 ::before을 통해 구현했다. before은 after와 반대로 선택한 요소의 앞부분에 content로 지정한 문자열을 넣어준다. 또한, 각각의 가상 요소 선택자 안에 지정해준 스타일은 해당 콘텐츠에 적용된다(sold out에 color:red;를 준 것처럼).
• 이 때, 자동적으로 가상 요소 선택자로 만들어준 부분은 드래그를 할 수 없게 설정이 된다.
• 그리고 before든 after든 실제 html 문서 상에 기록이 됐기 때문에 예를 들어 뒤이어 배울 first-letter(맨 앞글자에 스타일을 적용하는 가상 요소 선택자)를 써줬는데 만약 그 맨 앞글자가 before로 정의해준 부분이라면 그 부분의 맨 앞글자에 스타일이 적용된다.

first-letter & first-line & selection

• 위에는 간단하게 각각의 기능을 사용해서 구현해본 것인데, 먼저, first-letter를 써서 Lorem의 맨 앞글자인 L에만 스타일을 줬다. 이처럼 가상 요소 선택자인 first-letter는 말그대로 첫번째 글자에 스타일을 준다.
• 다음으로, 사용해본 것은 first-line이다. 이는 웹브라우저를 늘렸다 줄일 때 자연스럽게 p태그 내의 텍스트의 첫문장이 좁아지면 뒷부분이 두번째줄로 갔다가 넓어지면 다시 돌아왔다 하는데, 그것을 고려하면서, 즉, 브라우저의 크기가 변함에 따라 변하는 첫번째 줄에 스타일을 준다.
• 마지막으로 selection 가상 요소 선택자를 써서 내가 드래그 하는 부분에 대해서 스타일을 줬다. 그래서 두번째 문단을 드래그하면 공부할 때 줄을 치면서 읽는 효과와 같은 스타일이 적용된다.