웹에서 특정 위치로 이동하는 앵커(anchor) 기능은 오래전부터 널리 쓰여왔다. <a href="#section"> 처럼 id 속성을 가진 요소로 스크롤을 이동시키는 방식이다.

<h2 id="intro">소개</h2>

https://example.com/page#intro

하지만 이 방식은 태생적인 한계를 가진다. 목적지 태그에 반드시 id 속성이 있어야만 동작한다는 점이다.

문제는 우리가 링크로 강조하고 싶은 부분이 항상 id를 가진 블록 단위는 아니라는 데 있다. 긴 문단 속 한 문장, 리스트 안의 특정 항목, 혹은 아예 마크업 구조상 앵커로 걸 수 없는 텍스트 조각.. 이런 경우가 실제로는 훨씬 더 빈번하다. 결국 이런 텍스트를 링크해주려면 개발자가 미리 id 속성을 심어두거나 "해당 링크의 N번째 문단" 같은 안내에 의존할 수 밖에 없었다.

Text Fragments의 등장

이 불편함을 해결하기 위해 등장한 것이 2020년 2월 구글 크롬 80 버전에 도입된 Text Fragments 이다.
이는 ID 속성 대신 텍스트 자체를 링크에 첨부해서 브라우저가 페이지 내에서 해당 텍스트를 찾아 스크롤하고 하이라이트까지 해주는 기능이다.

사용법

기존 앵커와 사용 방식은 크게 다르지 않다. URL 끝에 #:~:text= 식별자를 붙이고, 그 뒤에 강조하고 싶은 텍스트를 입력하면 된다.

https://example.com/page#:~:text=<강조할_텍스트>
ex) https://velog.io/@alirz-pixel/HTML-Text-Fragments#:~:text=Text%20Fragments

이 URL로 접속하면 브라우저가 페이지 안에서 "<강조할_텍스트>"라는 문자열을 찾고 자동으로 스크롤하여 노란색 하이라이트로 표시해준다.

범위 지정

텍스트가 길거나 중간에 다른 요소가 껴 있을 경우를 대비하여 범위 지정도 가능하다. 강조할 텍스트의 시작 부분과 끝 부분을 콤마(,)로 구분해서 범위로 지정할 수 있다.

#:~:text=<시작_문구>,<끝_문구>
ex) https://velog.io/@alirz-pixel/HTML-Text-Fragments#:~:text=%ED%85%8D%EC%8A%A4%ED%8A%B8%EA%B0%80%20%EA%B8%B8%EA%B1%B0%EB%82%98,%20%EC%A7%80%EC%A0%95%ED%95%A0%20%EC%88%98%20%EC%9E%88%EB%8B%A4.

이렇게 하면 "시작 문구"가 나오는 지점부터 "끝 문구"가 나오는 지점까지를 하나의 범위로 하이라이트한다.

Prefix / Suffix 지정

같은 텍스트가 페이지 내에 여러 번 등장할 경우, 원치 않는 위치가 걸릴 수 있다. 이때는 - 기호를 이용해 앞 뒤 문맥(prefix, suffix)을 함께 지정할 수 있다.

#:~:text=<앞문맥>-,<강조할_텍스트>,-<뒷문맥>
ex) https://velog.io/@alirz-pixel/HTML-Text-Fragments#:~:text=%EA%B0%99%EC%9D%80%20-,%ED%85%8D%EC%8A%A4%ED%8A%B8,-%EA%B0%80

이렇게 하면 브라우저는 지정한 문맥 사이에 위치한 텍스트만 정확히 찾아 하이라이트한다.