📌 가상요소 선택자(Pseudo Selectors)란?

html에서 코드를 만들지 않고, css에서 스타일로만 요소를 추가하거나 제어할 때 사용하는 선택자이다.

즉, html 문서에는 실제로 존재하지 않지만 실제 동작화면에는 존재하게 되는 것이다.

 

가상요소는 콜론(:)을 2개 연달아 표기해서 가상요소임을 나타낸다.

콜론을 하나만 써도 적용이 되긴하지만, 가상요소임을 명확하게 구분하기 위해 콜론 2개를 붙이는 것을 권장한다.

선택자::가상요소 {
	속성: 속성 값;
}

위와 같은 형태로 작성한다.

📌 왜 사용하는건데?

실제 HTML을 조작하지 않기 때문에 HTML 구조에 영향을 미치지 않고 컨텐츠를 삽입할 수 있다.

또한 의미는 없지만 어떤 장식을 추가하고 싶을 때, 굳이 div 태그를 추가하지 않고 만들 수 있다.

어떤 의미있는 컨텐츠를 표현하기 보다는 디자인에 많이 사용된다.

📌 HTML 컨텐츠 변경(::before, ::after)

가상요소 선택자 중, ::before와 ::after는 가장 흔히 쓰인다.

속성으로는 content 값이 필수이다.

content의 값으로는 텍스트 뿐만 아니라 이미지, HTML 속성 등이 들어갈 수 있다.

귀여운 이모지도 가능하다(🐶🤍)

p::after {
    content: "🐶";
}

p::before {
	content: "😻";
}

p::after {
	content : url('이미지 url');	// 이미지
}

 

작성한 content의 값이 위와 같이 화면에 출력된다.

::before는 선택한 요소의 앞에 가상요소가 추가되고, ::after는 선택한 요소의 뒤에 가상요소가 추가된다.

 

‼️ ::after와 ::before의 특징

  • inline 요소이므로 width, height를 가지지 않는다.
    width와 height를 지정해주고 싶다면 inline-block이나 block으로 변경하면 된다.
  • content 속성을 필수로 가진다.
  • 실제 HTML 구조에는 포함되지 않기 때문에, 웹 접근성을 방해할 수 있다.
  • 가상요소이기 때문에, 실제 요소에 적용되는 포인터 이벤트가 적용되지 않는다.
    ex) 클릭, hover, active, focus, 드래그 ..
  • 빈태그에는 적용할 수 없다.(img, br, input)

📌 가상요소를 활용한 예시

1️⃣ 가상요소로 동적 컨텐츠 표시하기

attr() 함수를 이용해서 content 속성에 HTML 태그의 속성 값을 가져올 수 있다.

<style>
   p::before {
    content: attr(data-name) "의 블로그입니당🐶";
  }
</style>

<body>
	<p data-name="heedonguri"></p>
</body>

실제 data가 적용된 것을 확인할 수 있다!

 

2️⃣ 가상요소로 목록에 순서달기

counter-reset() 함수로 카운터를 초기화하고, content의 값으로 counter의 값을 넘겨줄 수 있다.

counter-increment 속성을 사용하면 항목이 증가하면서, 카운터 값도 증가한다.

 <style>
      ol {
        counter-reset: list-counter;	// 카운터 초기화
        list-style: none;
      }
      li::before {
        content: counter(list-counter) " : ";	// 컨텐츠 값에 카운터 넣기
      }
      ol li {
        counter-increment: list-counter;	// 카운터 값 자동 증가
      }
</style>
    
<body>
    <ol>
      <li>첫번째</li>
      <li>두번째</li>
      <li>세번째</li>
    </ol>
  </body>

적용된 것을 확인할 수 있다!

3️⃣ 가상요소로 FNB에 구분선 추가하기

카카오 로그인 페이지를 만들면서 위와 같은 FNB를 만들어야 했다.

span 태그를 각 사이에 넣고 width와 height를 지정해서 만들었다.

하지만 카카오에서 만든 페이지를 자세히 살펴보면 ::before을 사용한 것을 볼 수 있다.

 

span으로 만든 코드

 footer > span {
        width: 1px;
        height: 14px;
        padding: 0;
        background-color: rgba(0, 0, 0, 0.14);
  }

 

위의 코드를 ::before로 변경

  footer > div:not(:first-of-type)::before {
    content: "|";
    color: rgba(0, 0, 0, 0.14);
    padding-right: 12px;
  }

깔끔하게 잘 나오는 것을 확인할 수 있다!

📌 나머지 가상요소 4가지(컨텐츠 특정 영역 선택하는데 사용)

  • ::selection - 마우스 드래그로 선택한 텍스트 컨텐츠 영역 선택
  • ::marker - 목록 아이템 앞에 붙는 마커 선택
  • ::first-letter - 현재 화면에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자 선택
  • ::first-line - 현재 화면에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 줄 선택

'HTML,CSS,JS' 카테고리의 다른 글

[JS]JSON.stringify, JSON.parse  (0) 2025.01.23
[JS] let, var, const(+호이스팅, TDZ...)  (0) 2025.01.17
[JS] Map, Set(객체? 배열?)  (0) 2024.12.08
[CSS] RequestAnimationFrame  (0) 2024.10.08
[JS] Array와 Array 메소드  (0) 2024.08.26

티스토리툴바