CSS 텍스트 드래그 스타일 적용하기 – ::selection 가상 요소 선택자

`::selection` 가상 요소

::selection 가상 요소 선택자는
사용자가 텍스트를 드래그해서 선택한 부분에 스타일을 적용할 수 있게 합니다.

사용자가 텍스트를 선택할 때, 그 선택된 부분('하이라이트된 부분'이라고도 함)에 지정한 스타일을 적용할 수 있게 합니다.

주의하세요!
::selection 가상 요소는 해당 요소 전체에 스타일을 적용하는 것이 아니라, 사용자가 마우스로 드래그하거나 키보드를 이용하여 직접 선택한 텍스트 부분에만 스타일을 적용합니다.
그리고, 사용자가 텍스트를 선택하는 순간부터 해당 선택 영역에 스타일이 자동으로 적용됩니다. 그리고 선택을 해제하면 스타일도 함께 사라집니다.

일부 브라우저에서는 문서 내에 다른 문서를 삽입하는 <iframe> 내의 텍스트의 경우 ::selection 가상 요소로 선택한 텍스트의 스타일이 <iframe> 밖에서 포커스되어 선택이 해제되었음에도 불구하고 스타일이 사라지지 않고 계속 유지되게 구현합니다.

예제

::selection 가상 요소의 형식은 다음과 같습니다.

구문

제한된 스타일 속성만 허용

::selection 가상 요소 선택자는 사용자가 텍스트를 드래그하는 동안 주변 레이아웃에 영향을 미치치 않으면서 동적으로 스타일을 적용할 수 있도록 제한된 스타일 속성만 허용합니다. 만약에 주변 레이아웃에 영향을 미친다면 사용자의 사용자 경험이나 접근성에 제한이 생길 수 있기 때문입니다.

명세서에서는 ::selection 가상 요소 선택자에 적용할 수 있는 속성에 대해 명시적으로 지정하고 있지만, 브라우저별로 지원하는 스타일 속성에는 차이가 있습니다.

다음은 ::selection 가상 요소 선택자에 적용할 수 있는 속성입니다. 이 속성들은 완벽하게 모든 브라우저에서 지원하고 있지는 않지만 대부분의 브라우저에서 지원하고 있습니다.

color
background-color
text-shadow

접근성 고려사항

::selection 가상 요소 선택자를 사용하여 스타일을 지정할 때에는 사용자 입장을 반드시 고려해야 합니다. 즉, 순전히 아름다움의 시선에서만 스타일하는 것은 때때로 사용자들에게는 불편을 줄 수 있습니다. 특히, 낮은 대비는 시각 장애가 있는 사용자들에게 불편을 줄 수 있습니다. 예를 들어, 밝은 배경에 밝은 글자색을 사용하면 가독성이 떨어지기 때문에 피해야 합니다.

시각 장애가 있는 사용자를 위해 선택된 텍스트와 배경색 사이의 색 대비가 충분해야 합니다. WCAG 2.1 기준을 참고하여 적절한 색 대비를 유지해야 합니다.

WCAG(Web Content Accessibility Guidelines) 기준이란?

WCAG(Web Content Accessibility Guidelines, 웹 콘텐츠 접근성 가이드라인)는 웹 콘텐츠를 누구나 접근하고 사용할 수 있도록 하는 기술적인 지침입니다. 장애 유형이나 기술적 제약 없이 모든 사람이 웹 콘텐츠를 동등하게 이용할 수 있도록 보장하는 것이 목표입니다.