가상 요소 사용 규칙
가상 요소(::before, ::after)는
순수 장식 표현에 한해 사용하는 CSS 표현 수단입니다.
가상 요소로 의미·상태·인터랙션을 전달하지 않습니다.
가상 요소에 대한 기본 관점
Section titled “가상 요소에 대한 기본 관점”가상 요소는
DOM 구조에 존재하지 않는 시각적 표현 수단입니다.
가상 요소는 다음과 같은 특성을 가집니다.
- 의미를 가지지 않습니다.
- 구조와 콘텐츠를 대신할 수 없습니다.
- 표현 계층에만 존재합니다.
이 특성 때문에
가상 요소는 장식 목적으로만 사용합니다.
가상 요소 사용 허용 기준
Section titled “가상 요소 사용 허용 기준”다음 경우에만 가상 요소 사용을 허용합니다.
- 순수 장식 목적의 아이콘이나 구분선
- 시각적 강조를 위한 보조 그래픽
- 구조와 무관한 배경 표현
이 경우에도
가상 요소는 UI 이해에 필수적인 정보를 포함해서는 안 됩니다.
가상 요소 사용 금지 기준
Section titled “가상 요소 사용 금지 기준”다음과 같은 경우에는
가상 요소 사용을 금지합니다.
- 의미 전달이 필요한 텍스트
- 버튼, 링크 등 인터랙션 요소
- 상태 정보를 표현하는 콘텐츠
- 접근성 대체 수단으로 사용하는 경우
가상 요소로 의미를 전달하기 시작하면
접근성은 즉시 깨진다고 판단합니다.
가상 요소와 접근성의 관계
Section titled “가상 요소와 접근성의 관계”가상 요소는 접근성 설계의 일부로 취급하지 않습니다.
접근성이 필요한 정보는 반드시 실제 DOM 요소로 제공합니다.
가상 요소가 접근성에서 배제되는 이유와
정보를 실제 요소로 전달해야 하는 근거는
접근성 철학에서 다룹니다.
가상 요소 설계 시 점검 기준
Section titled “가상 요소 설계 시 점검 기준”가상 요소를 사용하기 전에는 다음을 점검합니다.
- 이 요소가 없어도 UI 의미가 유지되는가
- 실제 요소로 구현하는 것이 더 적절하지 않은가
- 장식 목적 외의 역할을 하고 있지는 않은가
점검을 통과하지 못하면 장식이 아니라 실제 요소로 구현합니다.
가상 요소 사용 규칙의 목적
Section titled “가상 요소 사용 규칙의 목적”가상 요소 사용 규칙은
표현 계층과 의미 계층을 CSS에서 분리하기 위한 기준입니다.
가상 요소를 장식으로만 최소화하면
표현이 늘어도 UI 구조는 그대로 유지됩니다.