CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

텍스트를 마우스로 드래그해 선택했을 때의 배경색과 글자색은 ::selection 가상 요소로 바꿀 수 있습니다. 선택한 부분의 배경은 background-color, 글자는 color로 지정합니다. JavaScript 이벤트를 추가하지 않아도 브라우저의 텍스트 선택 기능에 스타일이 적용됩니다.

전체 예제: 선택한 텍스트의 색 바꾸기

다음 코드를 selection-color.html로 저장한 뒤 브라우저에서 엽니다. 첫 문단과 두 번째 문단을 각각 드래그해 비교하거나, 페이지의 텍스트에 초점을 둔 상태에서 전체 선택 기능으로 두 색을 함께 확인합니다. 외부 파일은 필요하지 않습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>텍스트 선택 색상 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
h1 { font-size: 24px; }
    main { max-width: 650px; }
    p { padding: 16px; border: 1px solid #9eafbf; line-height: 1.8; }
    ::selection { background-color: #ffe6a7; color: #4a2a00; text-shadow: none; }
    .special::selection { background-color: #153e6b; color: #fff; }
  </style>
</head>
<body>
<main>
  <h1>텍스트 선택 색상 비교</h1>
  <p class="normal">이 문단의 텍스트를 선택하면 연한 노란 배경과 짙은 갈색 글자로 표시됩니다.</p>
  <p class="special">이 문단의 텍스트를 선택하면 짙은 파란 배경과 흰색 글자로 표시됩니다.</p>
</main>
</body>
</html>

첫 문단의 선택 영역은 연한 노랑·갈색으로, special 클래스가 있는 두 번째 문단은 짙은 파랑·흰색으로 표시됩니다. 드래그를 해제하면 원래의 글자와 배경으로 돌아갑니다. 선택 색상을 바꾸는 것은 원문에 색상 태그를 삽입하거나 내용을 수정하는 동작이 아닙니다.

특정 구역에만 적용하기

예제의 ::selection 규칙은 넓은 범위의 선택 영역에 기본 색을 지정하고, .special::selection은 해당 문단의 색을 따로 정합니다. 특정 본문 안에만 적용하려면 실제 본문 컨테이너를 기준으로 선택자를 좁힙니다. 예를 들어 그 영역의 문단만 바꾸려면 .article-content p::selection을 사용할 수 있습니다.

두 번째 규칙의 background-color를 #156754로 바꾸고 두 번째 문단을 다시 선택해 보세요. 일반 문단의 노란색 선택은 그대로이고 특수 문단만 초록색 배경으로 바뀌어야 합니다. 비교 후 원래 색으로 되돌립니다. 규칙을 제거하면 브라우저가 정하는 기본 선택 표시가 사용되며, 그 기본색은 운영체제·브라우저·테마 등에 따라 달라질 수 있습니다.

지원 속성과 읽기 쉬운 색 조합 확인하기

::selection에는 일반 요소의 모든 CSS 속성을 사용할 수 있는 것은 아닙니다. 대표적으로 color, background-color, text-shadow 같은 선택 강조용 속성을 사용합니다. width나 padding으로 선택 영역의 크기를 늘리는 방식은 적합하지 않으며 background-image도 선택 배경 이미지로 사용할 수 없습니다. 글자에 그림자가 있다면 예제처럼 text-shadow: none으로 선택 중의 선명도를 높일 수 있습니다.

배경색만 바꾸면 원래 글자색과 조합되어 잘 안 보일 수 있으므로 글자색도 함께 지정하고 실제 선택 상태에서 확인하세요. 선택해도 차이가 없다면 다른 스타일 규칙에 덮였는지, 해당 브라우저가 필요한 선택 스타일을 지원하는지 확인합니다. 모바일의 길게 누르기 선택, 입력 컨트롤과 보조 기술 환경까지 데스크톱 드래그와 완전히 같은 표시라고 가정하지 않는 것이 좋습니다.

이 속성은 선택을 막는 기능이 아닙니다. 사용자의 복사나 선택을 차단할 목적으로 조합하기보다 현재 선택 위치를 읽기 쉽게 표시하는 데 사용하세요. 적용 범위와 허용 속성은 MDN의 ::selection 설명과 W3C의 선택 강조 가상 요소 정의를 참고할 수 있습니다.

CSS