HTML/CSS - pseudo-class, pseudo-element

1. 개요

css에는 가상 클래스(pseudo-class)와 가상 요소(pseudo-element)가 있다. 이를 활용하면 HTML내에서 별도의 class를

지정할 필요 없이 HTML element를 선택할 수 있다.

 

2. Pseudo-class 

Pseudo-class는 실제로 존재하는 HTML 요소에 클래스 추가 없이 해당 요소를 선택할 수 있다.

 

3. Pseudo-element

Pseudo-element는 실제로 존재하지 않는 요소를 클래스 추가 없이 선택할 수 있다.

 

4. Pseudo-class와 Pseudo-element가 필요한가?

Pseudo-class, Pseudo-element는 HTML 수정 없이 CSS만으로 특정 요소를 선택할 수 있으며, HTML에 불필요한 class를 

지정하지 않음으로써 가독성을 향상시켜준다.

 

5. Pseudo-class, Pseudo-element 예시

1. :first-child - 클래스를 지정하지 않아도 li의 첫 번째 자식요소 선택하여 제어
2. :last-child - 클래스를 지정하지 않아도 li의 마지막 자식요소 선택하여 제어
3. ::first-letter - li내의 첫번째 글자를 감싸고 있는 요소가 없어도 있는 것과 같이 제어 가능

HTML element

Pseudo-class를 이용하여 첫 번째 li 태그와 두 번째 li 태그를 선택하고, Pseudo-element를 이용하여 first-letter 선택

CSS 수정 결과

     

      대표적인 Pseudo-element 목록은 다음과 같다.

대표적인 Pseudo-element 목록

 

6. ::before와 ::after

1. ::before - 실제 내용 바로 앞에서 생성되는 자식요소
2. ::after - 실제 내용 바로 뒤에서 생성되는 자식요소​

 

::before와 ::after를 사용하기 위해서는  content라는 속성이 꼭 필요하다.

 

7. content = "" 는 무엇인가?

::before와 ::after와 함께 꼭 쓰이는 ‘content’는 ‘가짜’ 속성으로, HTML 문서에 정보로 포함되지 않은 요소를 CSS에서

새롭게 생성시켜주기 때문에 'content'는 '가짜' 속성이라 할 수 있다.

 

아래의 표는 content를 쓸 때, 대표적으로 사용되는 속성값들 이다.

content의 속성 값들