[CSS] 가상 요소(Pseudo-elements) 활용과 디자인 데코레이션

이번 포스팅에서는 [CSS 디자인 기법] 파트의 세부 주제인 ::before와 ::after 실전 활용법에 대하여 상세히 알아보겠습니다.

1. 필수 조건: content 속성과 display

가상 요소(::before, ::after)는 화면에 렌더링되기 위해 반드시 content: "" 속성이 필요합니다. 또한 기본적으로 inline 요소이므로 크기를 부여하려면 display: block이나 inline-block, absolute를 선언해야 합니다.

2. 실무 패턴 1: 툴팁(Tooltip) 꼬리 그리기

말풍선 디자인을 할 때 삼각형 꼬리를 그리기 위해 추가적인 태그를 넣는 것은 낭비입니다. CSS의 border 마술과 가상 요소를 결합합니다.

.tooltip {
  position: relative;
  background: #333;
  padding: 10px;
  border-radius: 4px;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%; /* 부모의 맨 아래 바닥으로 이동 */
  left: 50%; /* 가로 중앙 */
  margin-left: -5px;
  
  /* CSS 테두리로 삼각형 그리기 공식 */
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

3. 실무 패턴 2: 링크 아이콘이나 리스트 불릿 꾸미기

HTML <li>의 기본 불릿(점) 대신 커스텀 기호나 아이콘을 텍스트 앞에 일괄적으로 삽입할 때 ::before를 활용합니다.

---

지금까지 HTML 구조를 해치지 않고 UI를 꾸미는 가상 요소에 대해 살펴보았습니다. 데코레이션 목적으로 태그를 남발하기 전에 가상 요소로 해결 가능한지 먼저 고민해 보세요.