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

• 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을 사용하는 경우 텍스트를 강조 표시하고 마우스 오른쪽 버튼을 클릭하면 상황에 맞는 메뉴에서 "강조 표시에 대한 링크 복사" 옵션을 찾을 수 있음

[plorrr]

가끔 구글검색하다 본건데 이런거군요

[siisee11]

아크브라우저에서 텍스트로 가는 링크 복사되는게 이런 기능이었군요..!

[galadbran]

에지 브라우저에는 텍스트 선택하고 우클릭 컨텍스트 메뉴 띄워보면 "Copy link to highlight" 라는 메뉴가 있는데, 그 기능 때문에 이런 스펙이 있다는 걸 알게됐었어요.

[galadbran]

Firefox 에서는 https://github.com/ichaoX/ext-textFragment 라는 확장기능을 설치해서 사용하고 있어요.

[joyfui]

오 좋은 확장 감사합니다.

[huiya]

오 이건 신기하네요

[secret3056]

이런 기능이....브라우저의 세계는 알면 알 수록 오만것이 다 있네요.

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