가상요소 선택자 ::before, ::after

가상 요소란 선택자 (Pseudo-elements)

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

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

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

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

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

 

그 중 가장 대표적인  ::before 와 ::after 의 사용 예시에 대해서 알아보자

가상 요소 사용법

가상 요소는,

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

import React from "react";
import './App.css';

function App() {
  return (
    <div>
      <div className="box1">Hello</div>
      <div className="box2">Hello</div>
    </div>
  );
}

export default App;

콘텐츠 추가 ( content="" )

• content="" 가 있어야지, 가상요소가 만들어지므로 필수 속성이다 

.box1::before {
  content: '💫';
}
.box2::after {
  content: '💫';
}

::before, ::after이 필요한 경우:

홈페이지 헤더나 푸터에 구분선을 삽입할 때

• 홈페이지 헤더: 로그인ㅣ회원가입ㅣ마이페이지ㅣ사이트
• 홈페이지 푸터: 회사소개ㅣ이용약관ㅣ개인정보취급방침ㅣ1:1문의ㅣ모바일버전

 

 

가상 요소 종류

이 글에서는 가장 많이 사용하는 ::before 와 ::after 만 다루었지만 아래와 같이 다양한 가상 요소의 종류도 있다.

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