HTML

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

Prof.SSong 2024. 1. 25. 20:00
728x90

클론 코딩을 진행하다보니 가상요소를 사용하는게

더욱 짧은 코드와 좋은 코드를 적을 수 있을 것 같아서 끄적여볼게요.

 

다들 알고 계실 수도 있고, 잘 사용하시는 거 같던데..

사실 제가 이번에 클론 코딩하면서 이런 방법을 거의 처음 알았거든요..하하;;

(이런게 전공생이라는게...)

아니 진짜 이거 쓰니까 디게 간단하게 끝나던데요..?

다들 저로 인해 알게된 걸로 해주세요.. 그래야 좀 덜 민망하니까요;;

 

가상 요소(Pseudo-elements)란? 

CSS 가상요소는 선택자에 추가하는 키워드로, 선택한 요소의 일부에만 스타일을 적용

즉, 선택한 요소 전체에 스타일 적용이 아니다 이 말이에요.

HTML에 새로운 요소를 추가한거 마냥 동작을 하는거죠

 

가상 요소의 종류

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

::before

::after

::first-letter

::first-line

::selection

::slotted()

::cue

::cue-region

이정도라고 생각하시면 될 거 같아요

 

::before, ::after

::before는 선택된 요소의 첫번째 자식 요소(가상 요소)를 생성해요.예시로 보여드리는 HTML 및 CSS 코드는 바로 밑에 있는 코드 그대로 보시면 됩니다.(차이라고는 before, after 정도의 차이에요)

<p>안녕</p>
<p>나는 코드</p>

<HTML 공통 코드 입니다>

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

'::before'가상 요소는 주로 'content' 속성과 함께 사용해요

위 예시도 'content' 속성에 정의된 값을 선택된 요소(<p>)의 첫 번째 자식 요소로 추가를 한 모습이에요.

 

결과는 🩷안녕 뭐 이런식으로 나옵니다.

 

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

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

결과는 안녕🩷 뭐 이런식으로 나옵니다.

 

이렇게 특정 부분의 스타일을 커스텀 하거나 반복되는 스타일을 효율적으로 관리하기를 원하신다면

한 번쯤 사용해보시는 것도 좋을 것 같아요

 

※혹여나 궁금해서 들어오신 분들께 도움이 되었다면 너무나 영광이고,

제 설명이 부족하다 또는 잘못된 내용이다 하시면 언제나 피드백 부탁드립니다!!

728x90