Fragment(#) 사용하기, Hashbang(#!)

웹 전반, 브라우저/HTML, CSS

Fragment(#) 사용하기, Hashbang(#!)

DarrenKwonDev 2020. 4. 7. 04:21

https://darrengwon.tistory.com/200

I. HTTP: 웹의 기초 | 1. HTTP 개관, 2. URL과 리소스

번역가의 다음 글을 참고해서 앞으로 며칠 간 HTTP 완벽 가이드를 읽으며 내용을 정리하려고 합니다. 웹 프로그래머를 위한 HTTP 완벽 가이드 읽는 법 HTTP 완벽가이드는 이름 그대로 HTTP를 매우 자세히 다루고..

darrengwon.tistory.com

프래그먼트가 무엇인지는 위를 참고합시다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
    <p id="one">
      <b>one</b>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
      Expedita sunt sint quae, cumque suscipit explicabo voluptatum blanditiis
      omnis minus pariatur magnam, quos veniam! Nisi, similique. Beatae
      excepturi ratione repudiandae tempore ab expedita vel.
    </p>
    <p id="two">
      <b>two</b>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
      Adipisci earum ratione dolorum quo distinctio. Nisi, repellat est, soluta
      impedit excepturi eligendi explicabo deserunt quas quidem ipsum ut rem? Ea
      accusamus. Ipsum, at omnis?
    </p>
    <p id="three">
      <b>three</b>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis
      temporibus eaque voluptas culpa praesentium quas dolorem et aliquam non
      doloribus laudantium sapiente, inventore deserunt nobis libero esse in
    </p>
  </body>
</html>

해당 버튼을 누르면 href로 준 id값을 가진 곳으로 이동합니다.

나무위키도 이런 방식을 통해 해당 프래그먼트로 이동합니다.