브라우저에서 텍스트를 찾거나 선택할 때 나타나는 하이라이트 색상, 더 이상 기본값에 맡기지 마세요. Chrome 144부터 정식 지원되는 ::search-text를 비롯해 ::selection, ::target-text 등 다양한 하이라이트 가상 요소(Pseudo-Element)를 CSS로 직접 제어할 수 있게 되었습니다. 이 글에서는 각 요소가 무엇을 선택하는지 명확히 구분하고, 접근성과 사용성을 고려한 실전 스타일링 기법을 소개합니다. 자세한 내용은 근거자료에서 확인할 수 있어요.
하이라이트 가상 요소 비교표
각 가상 요소의 역할을 한눈에 비교해보는 것이 이해에 도움이 됩니다.
| 가상 선택자 | 선택 대상 | 비고 |
|---|---|---|
::search-text | 찾기(Find-in-page) 결과 | ::search-text:current는 현재 대상 선택 |
::target-text | URL 텍스트 프래그먼트 하이라이트 | 검색 엔진 등에서 링크로 넘어올 때 강조됨 |
::selection | 포인터로 드래그 선택한 텍스트 | |
::highlight() | JavaScript 커스텀 하이라이트 API로 정의 | |
::spelling-error | 맞춤법 오류 (밑줄) | 편집 가능 콘텐츠에 주로 적용 |
::grammar-error | 문법 오류 (밑줄) | 편집 가능 콘텐츠에 주로 적용 |
실전: 상대 색상 구문으로 유연하게 스타일링하기
기본 노란색 하이라이트가 페이지 배경과 대비가 낮아 가독성이 떨어진다면? 상대 색상 구문(Relative Color Syntax)을 사용해 배경색에 반응하는 하이라이트를 만들 수 있습니다. 핵심은 RGB 채널 값을 반전(invert)시켜 항상 뚜렷한 대비를 보장하는 거예요.
body {
--background: #38003c;
background: var(--background);
}
::selection,
::target-text,
::search-text {
/* 텍스트 색상을 배경색과 동일하게 */
color: var(--background);
/* 배경색을 RGB로 변환 후 각 채널을 (255 - 값)으로 반전 */
background: rgb(from var(--background) calc(255 - r) calc(255 - g) calc(255 - b));
}
/* 각 하이라이트 유형을 시각적으로 구분 (R, G, B 채널 하나씩 유지) */
::selection {
background: rgb(from var(--background) r calc(255 - g) calc(255 - b) / 70%);
}
::target-text {
background: rgb(from var(--background) calc(255 - r) g calc(255 - b) / 70%);
}
::search-text {
background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 70%);
}
::search-text:current {
background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 100%);
}
위 코드에서 r, g, b는 --background 변수 색상의 RGB 채널 값입니다. calc(255 - r) 공식으로 색상을 반전시키고, 투명도(/ 70%)를 조절해 중첩되었을 때도 구분이 가능하도록 했습니다.
핵심 인사이트와 주의사항
이런 스타일링이 필요한 이유는 단순히 예쁘게 보이기 위해서가 아닙니다. **접근성(색상 대비)**과 **사용성(강조 효과)**을 보장하기 위함이에요. 특히 ::search-text와 ::target-text는 사용자가 의도적으로 찾은 정보이므로, 시각적으로 명확히 드러나야 합니다.
한 가지 유의할 점은, 완전 반전 색상도 항상 좋은 대비를 보장하지는 않는다는 겁니다. 예를 들어 회색(#808080)은 반전해도 동일한 회색이에요. 따라서 color-contrast() 함수 같은 미래 CSS 기능을 기대하며, 지금은 항상 색상 대비 검사 도구로 꼼꼼히 테스트하는 습관이 필요합니다.
하이라이트는 디자인 팔레트에 조화롭게 녹아들기보다, 기능적으로 '튀어야' 할 때가 있습니다. 사용자의 주의를 최대한 끌어 정확한 정보를 제공하는 것이 더 중요한 UI 요소니까요. 새로운 ::search-text를 시작으로, 브라우저가 제공하는 다양한 선택자들을 능숙하게 다루어 더 나은 사용자 경험을 설계해 보시기 바랍니다.