[CSS] 가상요소(before), 가상클래스(hover) 사용법

가상 요소(Pseudo-elements)란?

HTML을 변경하지 않고 CSS구문으로 특정 요소앞에

문자, 이미지를 넣을 수 있는 유용한 선택자 입니다.

---

가상요소를 사용한 문자입력

가상요소 before를 이용해서 "HTML입력" 앞에 "CSS입력" 문자를 넣을 수 있습니다.

가상요소 문자의 색상은 구분을 위해 빨간색으로 지정하였습니다.

//HTML
<p>HTML입력</p>

//CSS
p:before {
    content: "CSS입력, ";
    color: red;
}

---

가상클래스를 사용한 문자색 변경

가상클래스 hover을 사용해서 마우스를 글자위에 올려두었을 시

색상을 파란색으로 변경하는 방법입니다.

p:before {
    content: "CSS입력, ";
    color: red;
}

p:hover {
  color: blue;
}

이렇게 입력하면 가상요소의 문자인 "CSS입력"은 색깔이 파란색으로 변하지 않습니다.

 

아래와 같이 수정하면

가상요소 문자도 같이 변경 색깔이 파란색으로 변경되게 됩니다.

p:before {
    content: "CSS입력, ";
    color: red;
}

p:hover {
  color: blue;
}

p:hover:before {
    color: blue;
}

이상으로 가상요소(before), 가상클래스(hover) 

를 사용하여 문자 색을 변경하는 방법에 대해서 알아보았습니다.