가상 요소 선택자

실제로 html 요소를 수정하지 않고,
css만으로 가상 요소를 추가해 선택할 수 있음.

가상 클래스 선택자와 비슷한데 선택이 클래스인지 요소인지의 차이

:before
:after 두가지가 있음.

이와같은 화면을 만드려면

이렇게 코드를 짜면되는데
만약 가상 요소 선택자를 사용해서 만들면

html 코드를 줄일 수 있음.
가상 요소에는 반드시 content가 존재해야 하며
내용 없는 빈 상자를 만들때도 비어있는 값을 입력하여 만들어야함.

사용 예시

위처럼 box를 만들어서 float을 사용해서 정렬을 하려하면

컨테이너 박스에 제대로 들어가지 않음
이럴때 사용하던게 clearfix를 따로 만들어주는 것 이었음.

이렇게 clearfix를 사용하면 깔끔하게 정렬이되는 모습

해당 내용을 가상 요소 선택자를 활용해서 만들어보면

위와같은 clearfix 기능 말고도

캐러셀버튼 (회전배너 버튼) 등에서도 사용됨.

형제 요소 선택자

A와 같은 부모를 갖는 형제 요소들 중에서 B를 선택한다는 뜻

이런식으로 작성을 하면
text와 부모가같은 내부의 두개 span 에만 적용이 될것