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

> Clean Markdown view of GeekNews topic #17474. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=17474](https://news.hada.io/topic?id=17474)
- GeekNews Markdown: [https://news.hada.io/topic/17474.md](https://news.hada.io/topic/17474.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-10-29T09:31:02+09:00
- Updated: 2024-10-29T09:31:02+09:00
- Original source: [alfy.blog](https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html)
- Points: 20
- Comments: 7

## Summary

웹 페이지 내 특정 텍스트에 직접 연결할 수 있는 텍스트 Fragment 기능은 사용자가 원하는 정보를 빠르게 찾을 수 있도록 도와줍니다. 기본 형식 외에 ::target-text CSS 의사 요소를 통해 강조 표시된 텍스트의 스타일도 변경할 수 있습니다. 모든 주요 브라우저에서 지원되며, 특히 Chromium 기반 브라우저에서는 특정 텍스트에 대한 링크를 쉽게 생성할 수 있어 효율적인 정보 공유가 가능합니다.

## Topic Body

- Text Fragment는 앵커를 추가할 필요 없이 웹 페이지 내 특정 텍스트에 정확하게 연결할 수 있게 해주는 강력한 웹 플랫폼 기능  
- 이 기능은 강조 표시된 텍스트의 스타일을 지정하는 방법을 제공하는 `::target-text` CSS 의사 요소에 의해 보완됨  
- 텍스트 프래그먼트 URL의 기본 구문:  
  - `https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]`  
- 해시 기호 뒤에 `:~:` 특수 구문을 추가, `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을 사용하는 경우 텍스트를 강조 표시하고 마우스 오른쪽 버튼을 클릭하면 상황에 맞는 메뉴에서 "강조 표시에 대한 링크 복사" 옵션을 찾을 수 있음

## Comments



### Comment 30657

- Author: plorrr
- Created: 2024-11-02T12:17:28+09:00
- Points: 1

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

### Comment 30496

- Author: siisee11
- Created: 2024-10-29T10:06:37+09:00
- Points: 1

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

### Comment 30493

- Author: galadbran
- Created: 2024-10-29T09:55:58+09:00
- Points: 1

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

### Comment 30495

- Author: galadbran
- Created: 2024-10-29T09:57:30+09:00
- Points: 1
- Parent comment: 30493
- Depth: 1

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

### Comment 30585

- Author: joyfui
- Created: 2024-10-30T23:52:43+09:00
- Points: 1
- Parent comment: 30495
- Depth: 2

오 좋은 확장 감사합니다.

### Comment 30492

- Author: huiya
- Created: 2024-10-29T09:53:57+09:00
- Points: 1

오 이건 신기하네요

### Comment 30491

- Author: secret3056
- Created: 2024-10-29T09:48:40+09:00
- Points: 1

이런 기능이....브라우저의 세계는 알면 알 수록 오만것이 다 있네요.  
  
https://news.hada.io/topic?id=17474#:~:text=처음에는,깨달음