[CSS] 가상 클래스(pseudo-class) vs 가상 요소(pseudo-element)

면접에 나올 부분을 정리하다가 나온 가상 클래스와 가상 요소에 대해서 정리해보려고 한다

사실 내 포폴 사이트에도 가상 클래스와 가상 요소를 사용했는데 

막연하게 두루뭉실하게 알고있어서 확실하게 정리를 해보려한다

 

가상 클래스(pseudo-class)

 

요소의 특정 상태에 따라 스타일을 정의할 때 사용함 여기서 말하는 특정 상태란 아래와 같음

- 마우스오버

- 링크 방문/방문x

- 포커스

 

아래와 같이 콜론을 사용해 쓰면 됨

h1:hover {
  color: red;
}

 

가상 클래스에는 여러가지가 있는데 아래 페이지에서 어떤 것들이 있는지 확인할 수 있다
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements

의사 클래스와 의사 요소 - Web 개발 학습하기 | MDN

 

 

가상 요소(pseudo-element)

 

요소의 특정 부분에 스타일을 적용하기 위해 실제 존재하지 않는 가상의 요소를 만들어 스타일을 적용한다

여기서 말하는 특정 부분이란 아래와 같음

 

- 요소 컨텐츠의 첫 글자 또는 첫 줄

- 요소 컨텐츠의 앞 혹은 뒤

 

가상 요소에는 아래와 같다

pseudo-element	Description
::first-letter	콘텐츠의 첫글자를 선택한다.
::first-line	콘텐츠의 첫줄을 선택한다. 블록 요소에만 적용할 수 있다.
::after	콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::before	콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::selection	드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작x

 

이 중에 보통 많이 사용하는 가상 요소로는 ::before와 ::after가 있다

그리고 content라는 attr이라는 속성을 사용하기도 한다

 

See the Pen Untitled by Jeong hana (@Hah-nna) on CodePen.

 

content 속성은 속성값에 삽입된 텍스트나 이미지등을 화면에 출력시킨다

예를 들면 위의 title같은 속성의 값을 화면에 보여주는 것이다

 

content를 사용해 이미지도 삽입 가능하다

 

<h1>cat</h1>

h1::after {
content: url("이미지 주소")

}

하지만 이렇게 콘텐츠로 이미지를 넣으면 사이즈 조절이 불가능하기 때문에 background-image 속성을 사용해야함

또한 background-size를 통해 이미지의 사이즈를 지정해주고 width, height를 통해 content 영역이 차지할 공간에 대한 크기도 지정해주야 이미지가 나온다

또한 가상요소는 기본적으로 inline이기 때문에 특정 영역을 차지하고 싶으면 display:block으로 설정해주어야한다

See the Pen 22 by Jeong hana (@Hah-nna) on CodePen.

 

attr() 함수는 HTML 태그의 속성값을 가져올 수 있는 함수이다

data- 로 시작하는 데이터 속성의 값을 가져와서 동적으로 보여줄 수 있다고 한다

 

See the Pen Untitled by Jeong hana (@Hah-nna) on CodePen.

::before와 ::after를 사용하면 한 요소 안에 아래와 같이 적용되어있는 걸 볼 수 있다

 

h1이라는 요소 안에서 ::before 가상 요소 -> 요소의 콘텐츠 -> ::after 가상요소 순으로 적용된다