텍스트로 스크롤에 대해 알고 계셨습니까? 📜

제목과 같은 페이지의 일부에 대한 링크를 가리키기 위해 링크의 조각을 사용했을 것입니다. 이 기술은 예를 들어 목차에서 사용되며 일반적인 패턴입니다.

배경

페이지의 앵커 요소로 스크롤하는 것에 대한 현재 지원을 확장하기 위해 W3C는 기본적으로 id가 있는 DOM 요소 또는 페이지의 텍스트 콘텐츠에 링크하는 기능을 추가하여 브라우저가 무엇을 더 쉽게 이해할 수 있도록 하는 솔루션을 제안했습니다. 사용자는 페이지를 방문할 때 관심을 갖고 스크롤합니다. 시각적으로 쉽게 따라갈 수 있을 뿐만 아니라 텍스트에 하이라이트를 추가하여 사용자가 첫눈에 어디를 봐야 하는지 알 수 있습니다.

텍스트 조각으로 스크롤

그렇게 탄생한 Scroll to Text Fragment. URL에 제공된 조각을 사용하여 페이지의 특정 텍스트에 연결할 수 있는 Chrome 및 Microsoft EdgeScroll to Text Fragment로 배송되었습니다. 페이지가 로드되면 브라우저는 텍스트를 강조 표시하고 스크롤하여 보기에 표시합니다.

다음은 일반 구문입니다.

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
          context  |-------match-----|  context

💡 Square brackets indicate an optional parameter.

다음은 예입니다.

<a href="https://yashints.dev/#:~:text=Meet&text=Yas">
  Click to go to a specific portion of a page
</a>

그리고 clicking here 까지 실시간으로 테스트할 수 있습니다.

정확한 텍스트를 타겟팅하려는 경우:

<a href="https://yashints.dev/#:~:text=almond%20croissant%20addict">
  Click to go to a specific portion of a page
</a>

Try it here .

텍스트 지시문이 페이지의 텍스트 범위를 참조하는 경우 종료 텍스트를 추가할 수도 있습니다.

<a href="https://yashints.dev/#:~:text=Although,web%20developer">
  Click to go to a specific portion of a page
</a>

Try it here .

사용 사례

검색 엔진

검색 엔진이 쿼리에 대한 관련 정보가 포함된 페이지에 링크할 때 사용자가 더 쉽게 찾을 수 있도록 스크롤하고 강조 표시합니다.

인용/참고 링크

링크는 저자가 Wikipedia와 같은 참조를 가리켜 주장을 시행하고자 하는 일부 페이지에서 인용으로 사용되는 경우가 있습니다. 이러한 참조 페이지에는 많은 양의 텍스트가 포함될 수 있으며 정보를 찾는 것이 어려울 수 있습니다. 따라서 해당 섹션으로 스크롤하여 강조 표시할 수 있는 기능은 독자가 링크를 따라가도록 하는 것이 좋습니다.

특정 텍스트 또는 단락 공유

예를 들어 이메일이나 소셜 미디어를 통해 누군가에게 텍스트를 공유하고 싶을 때 전체 페이지가 아닌 특정 섹션으로 직접 링크할 수 있는 것이 정말 도움이 됩니다.

요즘 사람들은 트윗에서 직접 짧은 스니펫을 공유하거나 더 많은 텍스트를 포함할 수 있는 스크린샷을 만들어 게시합니다. 이렇게 하면 링크가 더 의미 있을 수 있으므로 그렇게 할 필요가 없습니다.

요약

그리고 이것이 웹이 사용자가 우리 개발자의 관심의 중심이 되는 더 나은 곳으로 이동하고 있는 방식이며, 사용자의 삶을 더 쉽게 만드는 방법을 알면 알수록 사용자가 우리를 더 신뢰하게 됩니다.

👋🏽 즐거운 저녁시간 되세요.