가상클래스, 가상요소...?

CSS를 사용하면서 가상 요소들을 다루기 시작하니 헷갈리는 부분이 많이 생겼다.

가상 요소와 가상 클래스.. 이름부터 비슷한 두 녀석을 비교해 보기로 했다.

 

 

가상 클래스(Pseudo-class) , 너는 무엇이냐?

 

 

가상 클래스는 실제로 존재하는 요소에 특정 이벤트 발생 시 가상으로 클래스를 주어 CSS를 제어하는 것.

그렇다고 아무 클래스를 주는 건 아니고 특정 이벤트가 따로 정해져 있다.

 

문법은 세미콜론 ' : ' 하나를 사용한다.

선택자:가상클래스 { 
  property: value; 
}


button:hover {
  color: red;
}

 

예를 들어서 버튼에 마우스를 올렸을 때 글씨 색을 바꾸고 싶다면? 

아래 예제를 보자 -

 

See the Pen 가상클래스 by kim-Yeji (@yeeed711) on CodePen.

 

 

이렇게 버튼에 마우스를 올렸을 때, 버튼이 눌렸을 때 

각각 이벤트가 부합되면 가상 클래스 속성들이 적용되는 것을 확인할 수 있다.

예제 이벤트 말고도 여러 가지 가상 클래스 선택자가 존재한다.

 -> 가상 클래스 선택자 확인하러가기 👀

 

가상 요소(Pseudo-element) , 너는 누구니?

가상 요소는 가상 클래스와는 달리 실제로 존재하지 않는 가상의 요소를 만들어 특정 부분에 디자인적 스타일을 적용할 때 사용한다.

문법도 동일하게 세미콜론 ' : ' 하나를 사용하는데, 가상 클래스와 구분하기 위해 더블 콜론 ' :: ' 을 사용하도록 권장한다.

 

다만 더블 콜론은 IE9 이상부터 지원이 되므로... 익스플로러를 지원해야한다면 더블콜론은 지양해야 한다😭

 

아래 예제로 확인해보자 

 

See the Pen 가상요소 by kim-Yeji (@yeeed711) on CodePen.

 

 

 

 

이처럼 마크업에는 존재하지 않지만 화면상에는 나타나는 모습을 확인할 수 있다.

-> 가상 요소 선택자 확인하러가기 👀

 

 

접근성이슈

가상요소는 스크린리더에서 읽을 수 있나? 

가상요소 content="" 라면 읽지않지만, content 안에 다른 콘텐츠를 넣게된다면 이는 스크린리더가 읽게된다!

불필요한 정보를 content에 넣게된다면 스크린리더가 읽게되니 주의하자.