[CSS] CSS 가상 클래스(:) & 가상 요소(::) 정리

프론트엔드 강의를 들으며 css의 가상클래스(:) & 가상요소(::) 두 개의 차이와, 어떻게 사용이 하는지 실제로 대입하는 것에 어려움을 느꼈다. 그래서 이 두 개의 개념과, 어떤 종류가 있고 어떤 상황에서 사용되는지 알아보려고 한다. 

 

가상 클래스 ( : / Pseude Class)

가상 클래스란 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 css 제어하는 것을 말한다. 

이론으로 이해하려고 하면 어렵기 때문에 :hover이라는 가상클래스로 예를 들어본다면,

:hover은 해당요소에 마우스를 올렸을때 스타일을 부여한다. 

가상클래스 :hover 예제

실제로 존재하는 li태그에 가상으로 :hover라는 클래스를 줘서 마우스를 올렸을 때 색상의 스타일을 주고, 색상뿐만 아니라 글씨크기, 두께등 css요소를 간단하게 구현을 할 수 있다. 

(ul 폰트사이즈는 잘보이게 크게 설정한 것이기 때문에 무시해도 된다.)

 

:hover JS버전

 

위의 :hover이라는 가상클래스를 자바스크립트를 통해 구현을 하려면 훨씬 복잡한 코드를 사용해야 한다. (자바스크립트는 아직 배우지 않아 설명은 생략한다...) 자바스크립트로 hover와 같은 효과를 어떻게 주는지 찾아보면서 가상 클래스를 잘 활용하면 더 보기 좋고 간편하게 마크업을 할 수 있을 것 같아 앞으로 많이 활용해야겠다는 생각을 했다.

 

*두 개의 사진에 링크를 통해 구현해 볼 수 있으니 참고 바랍니다*

 

 

 

 

가상 클래스 종류

가상 클래스(:)	설명
:active	해당요소를 마우스로 클릭했을때 스타일 부여 ex)링크클릭시 생상부여
:checked	input 태그의 type이 checkbox나 radio일 경우 해당 태그가 체크 되어있을 때 스타일 부여
:disabled	선택, 클릭, 입력 등을 할 수 있는 요소를 비활성을 했을 때 스타일 부여 ex) input, button, a태그 등
:enabled	:disabled의 반대로 요소가 활성화 되어있는 경우 스타일 부여
:empty	자식 요소가 없는 태그에 스타일 부여
:focus	input 태그에서 해당요소가 마우스 포커스를 가진경우 스타일 부여
: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	형제 요소 중 첫 번째 자식요소(맨 앞)에 스타일 부여 * 만약 div태그 중 첫 번째 요소의 스타일을 변경하려고 했을때, 이전 형제요소 중 다른 태그가 있으면 스타일 적용이 되지않는다.
:first-of-type	형제 요소 중 해당하는 태그의 제일 첫 요소에 스타일 부여 * 만약 div태그 중 첫 번째 요소의 스타일을 변경하려고 했을때, 이전 형제요소 중 다른 태그가 있어도 스타일 적용이 된다.
:last-child	형제 요소 중 가장 마지막 요소에 스타일 부여
:last-of-type	형제 요소 중 해당하는 태그의 가장 마지막 요소에 스타일 부여
:nth-child(n)	해당 요소의 n번째 자식 요소에 스타일 적용, *n에 숫자 뿐만 아니라 even(짝수), odd(홀수), 2n+1 등 특정 수식을 줄 수 있다.
:nth-last-child(n)	뒤에서 n번째 요소에 스타일 부여
:only-child	형제 요소 중 유일하게 있는 요소에 스타일 부여 *다른 형제 요소가 있으면 스타일 적용이 되지 않는다.
:only-of-type	형제 요소 중 같은 유형의 형제가 없이 유일한 요소에 스타일 부여

*더 정확한 설명 및 종류, 예제등은 mdn 공식문서에서 참고가능하다.

 

가상 요소 ( :: / Pseudo Element)

가상 요소는 선택된 요소의 일정 부분에 스타일을 입힐 수 있는 것이다. 즉, 존재하지 않는 요소를 존재하는 것으로 만들어 *셀렉터로 지정할 수 있게 만들어 준다고 할 수 있다.

*selector(선택자)란 말 그대로 선택을 해주는 요소. css작성 시 {} 중괄호 전에 어떤 요소에 대해 스타일을 입힐 건지 선택하여 작성하는 것을 셀렉터라고 할 수 있다. 위 예제의 선택자는 ui, li가 있었다.

 

가상 요소 종류

가상 요소(::)	설명
::after	선택한 요소 뒤에 가상의 요소 생성
::before	선택한 요소 앞에 가상의 요소 생성
::first-letter	선택한 요소의 내용중 첫번째 글자에 스타일 적용
::first-line	선택한 요소의 내용중 첫번째 줄에 스타일 적용
::selection	선택한 요소에서 텍스트가 선택(마우스로 클릭해서 영역 지정)된 영역에 스타일 적용

*더 정확한 설명 및 종류, 예제등은 mdn 공식문서에서 참고가능하다.

 

가상요소의 ::after와 ::before를 사용할 때는 반드시 'content'라는 속성을 사용해야한다. 'content'는 '가짜속성'으로 HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜 주기 위해 사용한다.

content를 사용하는 가상요소 예를 들어보자.

가상요소 after & before

위의 예시와 같이 가상요소 중 after와 before을 사용할때는 content를 사용해야 하는데 before와 같이 content의 안에 텍스트를 작성해 넣을 수도 있고, after와 같이 content를 비워놓고 지정된 크기만큼의 색을 변경할 수도 있다. after와 같이 작성을 하기 위해서는 포지션을 지정해줘야 한다.