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

3 days ago 4

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

Read Entire Article

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

Related

Postgres에서 PDF 전문 검색하기

Flutter 클린 아키텍처: 작은 앱부터 대규모 프로젝트까지 맞춤 설계

Autodesk, 애니메이션 영화를 위한 AI도구 Wonder Animation 베타 버전 출시

메뉴 구조가 고민될 때 해볼 수 있는 UX리서치

구글! 제발 그만해주세요: 당신들이 독립 웹사이트를 파괴하고 있어요

Zed 에디터, SSH Remote 기능 지원

Anthropic, 데스크탑용 Claude AI 앱 베타버전 공개

뉴욕시에서 제이워킹 합법화

Tips

취업 정보

온라인 툴

유용한 정보

유튜브

Trending

Popular

[속보] “日이시바 총리, 내주 라오스서 한일 정상회담 예정”

'호부지가 돌아왔다!' NC, 이호준 제4대 감독 선임 "특별한 팀서 감독하게 돼 기뻐" [오피셜]

SKT 에이닷, 멀티 LLM 에이전트 PC버전 출시

"모든 것을 바꾼다" 업무와 여가를 변화시키는 필수 AI 도구 8종

"개발자 편의 개선 및 성능 향상에 집중" 파이썬 3.13의 주요 변화 살펴보기

글로벌 칼럼 | AI 글래스 얼굴 인식 기능이 사생활 침해라는 오해

의료 보안의 새로운 취약점…스마트 기기와 랜섬웨어 증가

애플, 아이폰 '게스트 모드' 특허 출원…인증 거친 게스트만 접근 가능

이곳이 정말 공항 맞나요?…‘민폐 끝판왕’ 중국 아줌마들 광장 댄스에 경악

애플 워치 시리즈 10 리뷰 | 검증된 성공 공식에 소소한 개선을 더하다