[TIL] 가상요소 before, after

[sgoldenbird]

📌 배운 내용

• 가상 요소 ::before, ::after는 한 요소당 각각 하나씩만 사용할 수 있다. (한 요소에 여러 ::before, ::after못함)
• 따라서 하나의 요소에 여러 장식 요소를 넣고 싶다면 div 등의 실제 DOM 요소를 사용하는 것이 필요하다.

---

🔍 배경 / 문제 상황

Pending UI를 구현하면서 별 모양을 배치해야 했다.
여러 개의 별을 배치할 때도 가상 요소(::before, ::after)를 반복적으로 활용할 수 있지 않을까 고민했다.
하지만 가상 요소는 한 요소당 ::before, ::after 하나씩만 만들 수 있기 때문에, 여러 별을 표현하는 데 제약이 있다는 문제를 알게 되었다.

---

✅ 핵심 정리 / 해결 방법

• ::before, ::after는 각각 하나의 가상 요소만 생성 가능
• 배경 별들은 반복적으로 나타나야 하므로 div로 각각 만들고, 중앙의 큰 별처럼 단일 요소는 ::after로 처리하는 게 효율적.
  작은 백그라운드 별들은 여러 개가 필요했기 때문에 map 메서드를 사용해 각각 별도의 div로 렌더링했다.
  반면, 중앙에 배치하는 큰 별은 하나만 필요했기 때문에, 별도의 DOM을 만들지 않고 가상 요소(::after)를 활용해 처리했다.

---

🧠 느낀점 또는 생각 메모

이전엔 단순히 ::before, ::after로 꾸미면 되는 줄 알았는데, 실제 UI 요소가 많아지면 구조적으로 분리해야 하는 상황이 많다는 걸 느꼈습니다.
시각적으로 유사한 결과도 기술적으로는 명확히 구분되어야 한다는 점에서 좋은 학습이 됐습니다.

---