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값을 가진 곳으로 이동합니다.
나무위키도 이런 방식을 통해 해당 프래그먼트로 이동합니다.
해당 해쉬값을 추출하고 싶으면 window객체의 location 객체를 이용하면 됩니다.
location.hash
프래그먼트에 대한 더 자세한 내용은 아래 MDN을 참고합시다
번외) Hashbang(#!)
해시뱅(#!)에 대해서... :: Outsider's Dev Story
해시뱅을 처음 본 것은 작년에 트위터가 새로운 웹사이트를 선보였을 때입니다.제 트위터 계정인 http://twitter.com/outsideris로 접속하면 http://twitter.com/#!/outsideris로 리다이렉트 되는데 URL의 중간에...
blog.outsider.ne.kr
'웹 전반, 브라우저 > HTML, CSS' 카테고리의 다른 글
| video, audio 태그의 속성, 메서드 (0) | 2020.06.21 |
|---|---|
| svg (0) | 2020.06.17 |
| CSS 심화 (나름?) (0) | 2020.04.02 |
| form, input 태그 + etc (0) | 2020.03.27 |
| box-shadow에 대해서 (0) | 2020.03.16 |
