가상 클래스 vs 가상 요소

2020. 3. 6. 11:13

css를 배우고 실무에서 사용하다 보면 가상 클래스와 가상 요소 선택자라는 단어를 많이 들어볼 것이다.

실제로 두 선택자의 차이를 구분하지 못하고 두루뭉술하게 아는 경우가 많다.

그래서 가상 클래스와 가상 요소 선택자의 특징을 알아보고 차이점에 대해서 알아보려한다.

1. 가상 클래스

먼저 가상 클래스란

실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서

css로 제어하는 것을 말한다.

예를 들어,

특정 a태그에 마우스를 올리면 색상을 변경하려고 한다.

이때 가상 클래스를 사용하지 않는다고 가정하면

a태그에 스크립트로 mouseover 이벤트를 걸어서

해당 a태그에 마우스 오버시 색상이 변경되는 클래스를 주게 만들어 처리를 해야할 것이다.

<style>
   a{color:#333;}
   a.on{color:#fff000;}   /* 마우스 올렸을 때 색상 변경용 클래스 */
</style>
<body>
   <a href="#">Button</a>

   <script>
      $("a").on("mouseover", function(){
         $(this).addClass("on");
      }).on("mouseout", function(){
         $(this).removeClass("on");
      });
   </script>
</body>

이처럼 하게되면 불필요한 스크립트나 클래스가 들어가게 된다.

이러한 상황에선 마우스 오버라는 이벤트 상황에 맞춰

실제로 존재하는 a태그에 가상으로 :hover라는 클래스를 줘서

간단하게 css로 색상을 제어할 수 있다.

<style>
   a{color:#333;}
   a:hover{color:#fff000;}   /* 마우스 올렸을 때 가상 클래스 :hover 사용해 색상 조정 */
</style>
<body>
   <a href="#">Button</a>
</body>

이처럼 css 가상 선택자만으로 간단하게 제어를 할 수 있다.

가상 클래스	설명
:active	해당하는 요소를 활성화 했을 때 즉, 클릭한 상태일 때 스타일 부여
:checked	input 태그의 type이 checkbox나 radio일 경우 해당 태그가 체크 되어있을 때 스타일 부여
:disabled	선택, 클릭, 입력 등을 할 수 있는 요소에 비활성을 했을 때 스타일 부여 ex) input, button, a태그
:enabled	:disabled의 반대로 활성화 되어있는 요소에 스타일 부여
:empty	자식 요소가 없는 태그에 스타일 부여
:focus	input 태그에 focus를 한 상태일 때 스타일 부여
:hover	해당 요소에 마우스를 올렸을 때 스타일을 부여
:link	미방문 링크에 스타일 부여
:visited	이미 방문한 링크에 스타일 부여
:not(selector)	(selector)를 제외한 나머지 요소들에 스타일 부여 ex) .main p:not(.cmt){color:red} (.main 클래스 하위에 있는 p태그 중 .cmt 태그를 제외하고 color:red를 적용)
:read-only (읽기전용)	input 태그에 readonly 속성을 지정한 요소에 스타일 부여
:required (필수입력)	input 태그에 required 속성을 지정한 요소에 스타일 부여
:first-child	형제 요소 중 첫 번째 자식요소(맨 앞)에 스타일 부여 ex) .main div:first-child{color:red;} (.main 클래스 자식 요소인 div 중 첫 번째 div에 color:red 적용) * 만약 div 이전 형제요소 중 다른 태그가 있으면 스타일 적용이 어렵다. <div class="main"> <p>test1</p> <div>test2</div> </div> .main div:first-child{color:red} -> 아무런 스타일 변화가 없다.
:first-of-type	형제 요소 중 해당하는 태그의 제일 첫 요소에 스타일 부여 ex) <div class="main"> <p>test1</p> <div>test2</div> </div> .main div:first-of-type{color:red} -> div태그 (test2)에 color:red가 적용된다.
:last-child	형제 요소 중 가장 마지막 요소에 스타일 부여
:last-of-type	형제 요소 중 해당하는 태그의 가장 마지막 요소에 스타일 부여
:nth-child(n)	n번째 요소에 스타일 적용, n에 숫자 뿐만 아니라 even(짝수), odd(홀수), 2n+1 등 특정 수식을 줄 수 있다.
:nth-last-child(n)	뒤에서 n번째 요소에 스타일 부여
:only-child	형제 요소 중 유일하게 있는 요소에 스타일 부여 (다른 형제 요소가 있으면 스타일 적용x) ex) <div class="main"> <div>test1</div> <p>test2</p> </div> .main div:only-child{color:red} -> div의 형제에 p태그가 있으므로 스타일 적용 x
:only-of-type	형제 요소 중 같은 유형의 형제가 없이 유일한 요소에 스타일 부여 ex) <div class="main"> <div>test1</div> <p>test2</p> </div> .main div:only-child{color:red} -> 형제 요소 중 div는 하나기 때문에 스타일 적용

2. 가상요소

실제로 존재하는 요소에 가상으로 클래스를 주던 가상클래스와는 다르게

실제로 존재하지 않는 가상의 요소를 만들어 스타일을 주는 것을 말한다.

보통 콜론(:)을 사용하지만 가상 클래스와의 구분을 하기 위해

이중콜론(::)의 사용을 권장하고 있다.

(이중 콜론(::)은 ie9 이상 부터 지원한다.)

가상요소	설명
::before	지정된 요소의 앞에 가상의 요소 생성 <div class="main"> <p>test1</p> </div> .main p:before{content:"- "} -> - test1로 출력된다. (- 표시를 before로 삽입)
::after	지정된 요소의 뒤에 가상의 요소 생성
::first-letter	지정된 요소의 첫 번째 글자에 스타일 적용
::first-line	지정된 요소의 첫 번째 줄에 스타일 적용

저작자표시

'Frontend > CSS' 카테고리의 다른 글

[css 속성] position (static, relative, absolue, fixed) (0)	2020.03.23
[css 속성] display (block, inline, inline-block, table) (0)	2020.03.06
CSS 우선순위 (0)	2020.03.04
CSS 적용을 위한 또 다른 방법, @import (0)	2020.03.03
CSS Reset (초기화) (0)	2020.02.19

About Web