[HTML/CSS] ::before, ::after 가상 요소(Pseudo-elements)

 

가상 요소란? (Pseudo-elements)

CSS 가상 요소는,

선택자에 추가하는 키워드로,

선택한 요소(element)의 일부에만 스타일을 적용합니다.

즉, 선택한 요소 전체에 스타일을 적용하는 것이 아니라,

요소의 일부에만 스타일을 적용합니다.

다시 말해, HTML에 새로운 요소(element)를 추가한 것처럼 동작합니다.

 

 

 

가상 요소 사용법

가상 요소는,

::before, ::after, ::first-letter 와 같이 앞에 '::'를 붙여서 표기합니다.

p::first-letter {
   color: blue;
}

위 코드로 <p> 영역의 첫번째 글자를 파란색으로 지정할 수 있습니다.

 

 

 

가상 요소 종류

가상 요소의 종류는 다음과 같습니다.

• ::before
• ::after
• ::first-letter
• ::first-line
• ::selection
• ::slotted()
• ::cue
• ::cue-region

 

::before, ::after

::before, ::after는 이 가상 요소의 한 종류입니다.

 

이번에는 이 중 '::before', '::after'에 대해 정리해 보겠습니다.

 

::before

::before는 선택된 요소의 첫 번째 자식 요소(가상 요소)를 생성합니다.

<p>tomato</p>
<p>banana</p>

p::before {
  content : '♥';
  color: pink;
}

'::before' 가상 요소는,

보통 'content' 속성과 함께 사용됩니다.

'content' 속성에 정의된 값을, 선택된 요소(여기서는 <p>)의 첫 번째 자식 요소로 추가합니다.

 

또한, 새로 추가되는 요소에 대한 다른 스타일 속성도 지정할 수 있습니다.

(여기서는, 추가되는 텍스트 ♥의 컬로를 핑크로 지정하였습니다)

 

 

::after

::after는 선택된 요소의 마지막 자식 요소(가상 요소)를 생성합니다.

 

<p>tomato</p>
<p>banana</p>

p::after {
  content : '♥';
  color: pink;
}

'::after' 속성 역시, '::before'와 마찬가지로,

'content' 속성과 같이 사용되며,

선택된 요소(여기서는 <p>)의 마지막 자식 요소로 '♥' 문자열을 추가합니다.

 

 

---

 

::before, ::after 는 위 예제처럼 단순히 텍스트를 추가하는 것뿐만 아니라,

다양한 방법으로 사용됩니다.

그 방법들은 다른 포스팅에서 자세히 소개하도록 하겠습니다.

 

또한, ::before, ::after 이외의 다른 가상 요소 역시

다른 포스팅에서 예를 들어 설명하도록 하겠습니다.