최근 Chrome 144에 ::search-text가 정식으로 추가되면서, 웹 페이지 내에서 텍스트를 강조 표시하는 '하이라이트 의사 요소(Highlight Pseudo-elements)'의 종류가 더 다양해졌습니다. 페이지 내 찾기(Ctrl/Cmd+F) 결과나 URL 프래그먼트로 강조된 텍스트 등, 각기 다른 목적의 하이라이트를 어떻게 구분하고 스타일링해야 할지 헷갈리시나요? 이 글에서는 모든 하이라이트 의사 요소를 한데 모아 비교하고, 실무에서 바로 적용할 수 있는 스타일링 기법을 소개합니다. 자세한 내용은 CSS-Tricks의 관련 글을 근거자료로 참고했습니다.
하이라이트 의사 요소 비교표
각 의사 요소가 어떤 텍스트를 선택하는지, 그리고 주의사항을 표로 정리해보았습니다.
| 의사 선택자 | 선택 대상 | 비고 |
|---|---|---|
::search-text | 페이지 내 찾기(Ctrl/Cmd+F) 결과 | ::search-text:current는 현재 포커스된 결과 선택 |
::target-text | URL 텍스트 프래그먼트로 강조된 텍스트 | 검색 엔진 등 외부 링크를 통해 접근 시 주로 사용 |
::selection | 사용자가 마우스/포인터로 선택한 텍스트 | |
::highlight() | JavaScript Custom Highlight API로 정의한 커스텀 하이라이트 | |
::spelling-error | 맞춤법이 틀린 단어 (주로 편집 가능 콘텐츠) | |
::grammar-error | 문법이 틀린 부분 (주로 편집 가능 콘텐츠) |
<mark> HTML 요소도 비슷한 역할을 하지만, 이는 의사 요소가 아닌 마크업입니다. 위 표를 보면 ::search-text와 ::target-text가 특히 혼동하기 쉬운데, 발생 원인과 컨텍스트가 다르다는 점을 꼭 기억하세요.
상대 색상 구문으로 접근성 있는 하이라이트 만들기
기본 하이라이트 색상(예: ::search-text의 노란색)이 배경색과 대비가 낮아 가독성이 떨어진다면 어떻게 해야 할까요? CSS 상대 색상 구문(Relative Color Syntax)을 사용하면 배경색에 반응하는 역색(Inverse Color)을 자동으로 생성해 접근성과 사용성을 동시에 잡을 수 있습니다.
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));
}
위 코드는 --background 변수 색상을 기준으로 하이라이트 배경색을 완전히 반전시킵니다. 이렇게 하면 어떤 배경색 위에서도 하이라이트가 최대한 눈에 띄게 됩니다. 다만, 회색(#808080)처럼 반전해도 같은 색이 나오는 경우는 별도로 대비를 확인해야 합니다.
각 하이라이트를 시각적으로 구분하기
여러 하이라이트가 겹칠 경우를 대비해 각각을 조금씩 다르게 스타일링하는 것이 좋습니다. 아래 예시는 RGB 채널 중 하나를 반전에서 제외하여 색상을 변형하는 방법입니다.
::selection {
/* R 채널은 그대로, G와 B 채널만 반전 */
background: rgb(from var(--background) r calc(255 - g) calc(255 - b) / 70%);
}
::target-text {
/* G 채널은 그대로, R과 B 채널만 반전 */
background: rgb(from var(--background) calc(255 - r) g calc(255 - b) / 70%);
}
::search-text {
/* B 채널은 그대로, R과 G 채널만 반전 */
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%);
}
마무리: 실무 적용 시 고려사항
하이라이트 스타일링의 궁극적인 목표는 사용자가 필요한 정보를 빠르게 찾고 구분할 수 있게 하는 것입니다. 따라서 단순히 디자인 통일성을 위해 색상을 비슷하게 맞추기보다, 기능적 요소로서 확실히 눈에 띄도록 만드는 것이 더 중요할 수 있습니다.
- 항상 대비 검사하기: 상대 색상 구문이 자동으로 해결해주지 않습니다.
#808080같은 특수 케이스를 포함해, 개발자 도구의 접근성 체크 기능이나 Color Contrast Analyzer로 꼭 확인하세요. - 의미에 맞는 시각적 구분:
::spelling-error는 빨간 밑줄,::grammar-error는 초록 밑줄처럼 플랫폼의 관습을 따르는 것이 사용자 예상을 깨트리지 않는 방법입니다. - 미래 기술 기대하기: CSS Color Module Level 5의
contrast-color()함수가 도입되면, 배경색 대비 최적의 전경색을 자동으로 선택할 수 있어 더욱 편리해질 것입니다.
새로운 ::search-text를 시작으로, 하이라이트 의사 요소에 대한 이해와 적절한 스타일링은 모던 웹 개발자가 갖춰야 할 필수 역량이 되고 있습니다. 사용자 경험과 접근성을 한 단계 업그레이드하는 좋은 기회로 삼아보세요.