프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

취 준 하 자

총 방문자수

오늘

어제

  • 전체 (162)
    • Project (8)
      • 검색 솔루션 개발 (1)
      • 실시간 채팅 서비스 개발 (3)
      • 지도 서비스 개발 (2)
      • 블로그 테마 만들기 (2)
    • Frontend (33)
      • CSS (8)
      • React (14)
      • Next.js (4)
      • Flutter (1)
      • Svelte (1)
      • 웹 접근성 (1)
      • 테스트 (0)
    • Backend (22)
      • Spring (5)
      • Database (6)
      • Tomcat (1)
      • Docker (1)
      • Node.js (4)
      • Ubuntu&Linux (4)
      • Firebase (1)
    • App (1)
      • Android (1)
    • Algorithm (3)
      • BOJ (0)
      • Programmers (2)
      • 이론 (1)
    • Language (37)
      • Javascript (26)
      • Python (1)
      • Java (10)
    • Computer Science (7)
      • Network (7)
    • 기타 (51)
      • npm (1)
      • Git (3)
      • VSCode (1)
      • 일상 (6)
      • 자격증 (1)
      • 부스트캠프(챌린지) (21)
      • 부스트캠프(멤버십) (17)

Tag

intl.numberformat, performance api, text fragments, 카카오 인앱 브라우저, 이미지 fallback, object.groupby, 뒤로가기 새로고침 구분, intl.datetimeformat, toReversed, toSorted, app router, map.groupby, findLastIndex, JavaScript, 경로 가로채기, toSpliced, 병렬 경로, findLast, node.js 23, speculation rules api,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

이 기술 블로그를 만들기 위해 5년을 미뤘다.

text fragments 1

텍스트 조각으로 특정 페이지 내 영역 이동, 하이라이팅을 해보자

URL 뒤에 hash 값 #[id]를 붙이면 페이지 내 해당 id를 갖는 특정 영역으로 스크롤된다. 예를 들어, https://m.gmarket.co.kr/n/best#rank-100 링크로 지마켓 베스트 페이지에 접근하면 id="rank-100"인 상품 위치로 스크롤이 이동된 것을 확인할 수 있다. 이 방법은 마크업에 id를 반드시 추가해야 사용할 수 있다는 단점이 존재한다. 텍스트 조각(Text Fragment) 기능을 사용하면 id 없이도 특정 위치로 스크롤 이동이 가능하다.  텍스트 조각(Text Fragment)이란?말 그대로 페이지 내 특정 문자열을 강조하고 해당 스크롤 위치로 이동할 수 있는 기능이다. 사용 방법은 아래와 같이 URL 뒤에 #:~:text=[하이라이트할 문자열] 형태의 텍스트..

Frontend 2024.10.30
이전
1
다음
더보기

Copyright © Kakao Corp. All rights reserved.

  • Github

티스토리툴바