Ctrl+F 보다 더 똑똑하게: 웹페이지 콘텐츠에 직접 링크하기

(alfy.blog)

20P by xguru 28일전 | favorite | 댓글 7개

Text Fragment는 앵커를 추가할 필요 없이 웹 페이지 내 특정 텍스트에 정확하게 연결할 수 있게 해주는 강력한 웹 플랫폼 기능
이 기능은 강조 표시된 텍스트의 스타일을 지정하는 방법을 제공하는 ::target-text CSS 의사 요소에 의해 보완됨
텍스트 프래그먼트 URL의 기본 구문:
- https://example.com/page.html/…]
해시 기호 뒤에 :~: 특수 구문을 추가, text= 뒤에 다음을 추가:
1. prefix-: 연결된 텍스트 바로 앞에 와야 하는 텍스트 문자열. 여러 개의 일치 항목이 있는 경우 브라우저가 올바른 텍스트에 연결하는 데 도움. 이 부분은 강조 표시되지 않음
2. textStart: 강조 표시할 텍스트의 시작
3. textEnd: 강조 표시할 텍스트의 끝 부분
4. -suffix: prefix-와 유사하게 동작하지만 텍스트 뒤에 오는 하이픈이 뒤에 오는 텍스트 문자열. 여러 개의 일치 항목이 있을 때 유용하며 연결된 텍스트와 함께 강조 표시되지 않음
브라우저가 텍스트 프래그먼트를 지원하는 경우 ::target-text 의사 요소를 사용하여 강조 표시된 텍스트의 스타일을 변경할 수 있음
- ::target-text { background-color: yellow; }
다음 속성만 변경가능:
- color
- background-color
- text-decoration 및 관련 속성
- text-shadow
- stroke-color, fill-color, stroke-width
- 사용자 지정 속성
브라우저 지원 및 폴백 동작
- 텍스트 프래그먼트는 현재 모든 브라우저에서 지원됨
- ::target-text 의사 요소는 아직 Safari에서 지원되지 않지만 Technology Preview 버전에서 사용 가능
- 브라우저에서 이 기능이 지원되지 않으면 텍스트 강조 표시나 스크롤 없이 페이지가 로드
- 강조 표시의 기본 스타일은 브라우저마다 다름
마무리 생각
- 처음에는 텍스트 프래그먼트가 Chrome 전용 기능이라고 생각했지만, 사실은 모든 브라우저에서 구현할 수 있는 개방형 웹 기반이라는 걸 깨달음
- 특히 신뢰할 수 있는 생성 AI 시스템에서 이 기능이 더 널리 사용되기를 희망
- 모든 사용자가 텍스트 프래그먼트를 쉽게 사용할 수 있게 되면 좋겠음
업데이트
- Chromium 기반 브라우저에는 이미 특정 텍스트에 대한 링크를 생성하는 기능이 내장되어 있음
- Chrome을 사용하는 경우 텍스트를 강조 표시하고 마우스 오른쪽 버튼을 클릭하면 상황에 맞는 메뉴에서 "강조 표시에 대한 링크 복사" 옵션을 찾을 수 있음