CSS 가상 선택자 이용하기

CSS에는 가상 클래스(:pseudo-class)와 가상 요소(:pseudo-element)란 개념이 존재한다.

요놈들을 사용했을 때의 장점은 → 오직 CSS를 적용하기 위해 HTML을 수정하는 불상사..!가 발생하지 않는다는 점!

 

가상 클래스로 우리에게 가장 익숙한 녀석은 :hover 되시겠다.

사실 여태가지는 별 생각없이 :hover를 사용해 property와 value를 지정해줬지만...

 

알고 보면 '사용자가 해당 요소에 커서를 가져다 댔을 때'란 가상의 클래스를 입힌 후 CSS를 적용시킨 것!

덕분에 HTML상에서 각 부분마다 div를 비롯한 태그들로 감싸지 않아도 원하는 스타일을 입힐 수 있다. 와우!

 

:hover 이외에 자주 쓰이는 가상 클래스로는...

:link : 방문하지 않은 페이지

:visited : 방문한 페이지

:active : 요소가 활성화 되었거나 클릭되었을 때

:focus : 해당 요소에 키보드 포커스가 맞춰졌을 때

 

그렇다면 가상 요소는 뭘까?

현재 HTML상에 원 하나가 덩그러니 있다.

이를 위해 <div className="circle'/>을 만들고, .circle에 원에 해당되는 속성을 주는(그럴 수도 있지만) 것이 아닌!

::before / ::after 이란 가상 요소를 통해 새로운 태그를 만들지 않고도 저런 원을 제작할 수 있다.

 

즉 가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면,

가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다.

 

이 중 ::before은 실제 내용 바로 앞에서 생성되는 자식요소를,

::after은 실제 내용 바로 뒤에서 생성되는 자식요소를 의미!

 

이때 요 두 녀석과 함께 반드시 쓰이는 속성이 content 되시겠다.

요런 식으로!

으엥 value가 공백 인디? → content를 한마디로 정의하자면 가짜 속성!

HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜주기 때문에 필요한 값 정도로 생각하면 되겠다.