🌱 기초 프론트엔드
가상 요소(Pseudo-element)란?
쉽게 이해하기
책에 형광펜으로 밑줄을 긋는 것과 비슷해요. 책의 원래 내용을 바꾸지 않고도 시각적으로 강조할 수 있죠. 가상 요소도 HTML을 건드리지 않고 CSS만으로 새로운 요소를 추가해서 꾸밀 수 있습니다.
핵심 정리
실제로 HTML에 없는 요소를 CSS로 만들어서 스타일을 적용하는 기능입니다.
자세히 알아보기
가상 요소(Pseudo-element)는 더블 콜론(::)을 사용해서 HTML에 실제로 존재하지 않는 요소를 만들어내는 CSS 기능입니다. 가장 많이 쓰이는 것은 ::before와 ::after인데, 요소의 앞뒤에 콘텐츠를 추가할 수 있어요.
실무에서는 아이콘을 추가하거나, 말풍선 꼬리를 만들거나, 장식용 도형을 넣을 때 많이 사용합니다. 예를 들어 '.card::before { content: "★"; }'라고 쓰면 카드 앞에 별 아이콘이 자동으로 붙어요. HTML을 수정하지 않고도 디자인 요소를 추가할 수 있어서 편리합니다.
다른 가상 요소로는 ::first-letter(첫 글자 스타일), ::first-line(첫 줄 스타일), ::selection(드래그로 선택한 텍스트 스타일) 등이 있습니다. 특히 ::before와 ::after는 content 속성과 함께 사용해야 하는데, content: ""처럼 빈 문자열이라도 반드시 있어야 해요.
가상 요소를 쓰는 이유는 HTML을 깔끔하게 유지하면서도 복잡한 디자인을 만들 수 있기 때문입니다. 예를 들어 버튼 100개에 아이콘을 넣어야 한다면, HTML에 100번 쓰는 것보다 CSS 한 줄로 처리하는 게 훨씬 효율적이죠. 로딩 스피너, 툴팁, 구분선 같은 것들을 만들 때도 자주 사용합니다.