20230210 TIL 이 부분은 어떻게 스타일링을 하면 좋을까

크게 어려워보이지 않는데 어떻게 하면 좋을지 감이 잘 잡히지 않는 부분들이 가끔있다.
오늘 디자인을 입히는 중에 위의 부분이 그런 경우에 해당했다.
크게 어렵지 않고 디자인을 입히려면 쉽게 입힐 수 있겠지만 바람직해보이지 않았다.
가장 먼저 떠오른 방법은 추천수 부분과 조회수 부분을 같은 태그로, |를 다른 태그로 감싸서 처리하는 방법이었는데,
태그를 스타일링을 위해 다르게 사용하는 것은 시멘틱하지 않아 바람직하지 않다고 생각했다.

혹시 더 좋은 방법이 있을까 싶어 프론트엔드 끝판왕 짝꿍님께 여쭤보았더니 좋은 팁을 얻을 수 있었다.
가상 선택자를 개발자 도구에서 본 적은 있었지만 사용해본 적은 없었는데, 가상 선택자를 이런 경우에 사용할 수 있다고 알려주셨다.
가상 선택자를 사용하면 HTML 마크업을 수정하지 않은 채
CSS스타일링을 입힐 수 있게 되기 때문에 복잡한 UI요소를 구현할 때 유리하고, 아래와 같은 종류가 있다.

1. ::before: HTML 요소 앞에 콘텐츠를 삽입합니다.
2. ::after: HTML 요소 뒤에 콘텐츠를 삽입합니다.
3. ::first-letter: 첫 글자만 선택합니다.
4. ::first-line: 첫 줄만 선택합니다.
5. ::selection: 사용자가 텍스트를 선택할 때 적용되는 스타일을 정의합니다.

::after를 이용해서 추천수 부분 selector와 함께 사용해서 위의 스타일링을 입힐 수 있었다.

앞으로도 어떻게 하면 좋을지 고민이 될 때는 적극적으로 다른 사람들에게 조언을 구하면 좋은 것 같다!