텍스트 조각으로 특정 페이지 내 영역 이동, 하이라이팅을 해보자

URL 뒤에 hash 값 #[id]를 붙이면 페이지 내 해당 id를 갖는 특정 영역으로 스크롤된다.

 

예를 들어, https://m.gmarket.co.kr/n/best#rank-100 링크로 지마켓 베스트 페이지에 접근하면 id="rank-100"인 상품 위치로 스크롤이 이동된 것을 확인할 수 있다.

location.hash로 요소의 id를 넘겨서 스크롤

 

이 방법은 마크업에 id를 반드시 추가해야 사용할 수 있다는 단점이 존재한다.

 

텍스트 조각(Text Fragment) 기능을 사용하면 id 없이도 특정 위치로 스크롤 이동이 가능하다.

 

 

텍스트 조각(Text Fragment)이란?

말 그대로 페이지 내 특정 문자열을 강조하고 해당 스크롤 위치로 이동할 수 있는 기능이다.

 

사용 방법은 아래와 같이 URL 뒤에 #:~:text=[하이라이트할 문자열] 형태의 텍스트 조각을 붙여주면 된다.

// 1. 특정 문자열만 하이라이트 + 스크롤 이동
#:~:text=[특정 문자열]

// 2. 특정 문자열로 시작하는 영역 하이라이트 + 스크롤 이동
#:~:text=[시작할 문자열]

// 3. 특정 문자열로 시작하고 끝나는 영역 하이라이트 + 스크롤 이동
#:~:text=[시작할 문자열],[끝날 문자열]

// 4. prefix 지정
#:~:text=[prefix-][시작할 문자열]

// 5. suffix 지정
#:~:text=[특정 문자열][-suffix]

 

https://github.com/nodejs/node/pull/55504#:~:text=official,.  링크로 페이지에 접근해보면, 아래와 같이 텍스트 조각 영역이 하이라이트된 것을 확인할 수 있다.

 

여러 개의 텍스트 조각을 강조하고 싶다면 text 파라미터를 여러 개 넘기면 된다.

https://github.com/nodejs/node/pull/55504#:~:text=official,.&text=we,openssl

 

 

참고로 text의 값으로 사용할 문자열은 인코딩된 값이어야 한다. (한글, 특문, 공백 사용시 주의)

 

그리고 스크롤 이동이 되기는 하나, #id와는 달리 텍스트 조각이 페이지 정 가운데에 오도록 스크롤이 이동된다는 차이가 있다.

 

 

하이라이트 스타일 변경

텍스트 조각 하이라이팅 영역은 ::target-text 가상요소에 css를 작성하여 스타일 커스텀이 가능하다.

::target-text {
  background-color: #1187cf;
  color: #fff;
}

 

위와 같이 css를 추가하면 하이라이트 영역이 아래처럼 보인다.

 

참고로 ::target-text 가상요소는 safari 브라우저, iOS 웹뷰에서는 제공되지 않는다.

 

 

브라우저 지원

브라우저 호환

 

텍스트 조각은 IE를 제외한 거의 모든 브라우저, 웹뷰에서 모두 지원한다.

 

콘솔에 document.fragmentDirective를 입력하여 직접 기능 지원 여부를 확인할 수도 있다.

(미지원 브라우저일 경우 undefined 반환)

 

 

참고 링크

Text fragments - URIs | MDN

Smarter than 'Ctrl+F': Linking Directly to Web Page Content