검색 엔진의 결과를 눌렀을 때 검색 결과가 노란색이나 다른 색으로 표시된 적이 있나요?
이걸 Text Fragments 라고 합니다.
웹페이지가 자체적으로 id를 이용해 삽입한 앵커와 다르게, 페이지에 있는 모든 텍스트를 대상으로 한다는 점에서 활용성이 굉장히 높습니다.
(만약 위의 링크 를 눌렀다면) 현재 브라우저의 URL의 끝에 무언가 추가되어있는 것을 볼 수 있을 것입니다.
.../posts/text-fragments/#:~:text=검색%20엔진의,있나요?
이처럼, text fragments는 URL의 끝에 특정 문법에 따라 강조할 내용을 삽입하는 방식으로 사용합니다.
문법
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
textStart
강조할 내용 그 자체 또는 강조할 내용의 시작입니다.
예시:#:~:text=강조할%20내용textEnd
강조할 내용의 끝입니다. 사용될 경우,textStart부터textEnd까지의 범위로 강조됩니다.
예시:#:~:text=사용될%20경우,범위로prefix--앞에 오는 문자열은 내용을 검색할때는 포함되지만, 강조 자체에는 포함되지 않습니다.
예시:#:~:text=pomegranate-,applebanana apple grapefruit pomegranate apple orange-suffix-뒤에 오는 문자열은 내용을 검색할때는 포함되지만, 강조 자체에는 포함되지 않습니다.
예시:#:~:text=apple,-pomegranateapple banana apple pomegranate
사용 예시
Hear the sledges with the bells-
Silver bells!
What a world of merriment their melody foretells!
How they tinkle, tinkle, tinkle,
In the icy air of night!
While the stars that oversprinkle
All the heavens, seem to twinkle
With a crystalline delight;
Keeping time, time, time,
In a sort of Runic rhyme,
To the tintinnabulation that so musically wells
From the bells, bells, bells, bells,
Bells, bells, bells-
From the jingling and the tinkling of the bells.
- #:~:text=bells
- #:~:text=Silver-,bells
- #:~:text=bells%2C-,bells
- #:~:text=bells%2C%20bells%2C-,bells,-%2C%20bells
- #:~:text=time,rhyme