# 앵커와 하이퍼링크

## 하이퍼링크 (Hyperlink)

* `href` 속성은 다른 페이지 또 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다.
* 개발할 때 `href="#"` 처럼 `#` 값을 사용하는 경우가 간혹 있는데 이는 어디에도 연결되지 않는 기호라서 앵커 요소의 역할과 맞지 않는다. 

### 앵커(anchor)

앵커 요소는 [\<a>요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/a)를 말한다.&#x20;

### 속성

* `target` - `_blank`를 사용해서 새창으로 연결된 페이지를 열 것인지 설정 가능

### 예시

```markup
<!-- 같은 페이지 내에서 이동 -->
<ul>
  <li><a href="#intro">소개</a></li>
</ul>

<h3 id="intro">소개</h3>
```

### 각주에 사용하기 <a href="#using-footnote" id="using-footnote"></a>

각주를 사용할 때 해당 형태를 사용할 수 있다.&#x20;

```markup
<a id="이동위치이름">이동할 위치</a>
<a href="#이동위치이름"> 위치 이동 클릭</a>
```

## 절대 / 상대 / 루트 경로

웹 사이트는 폴더로 구성된 HTML 파일의 모음 일 뿐이. 다른 파일 내부에서 이들 파일을 참조하기 위해 인터넷은 URL(uniform resource locators)를 사용한다. URL은 웹 사이트의 리소스 위치 경로를 말하며 다음과 같이 구성된다.&#x20;

![URL 구성](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MPxvCqCM3ArsI_gO14g%2F-MPy0YdipdD9KGHO1KP7%2Fimage.png?alt=media\&token=9dad2f2a-80c2-42a1-a53f-f3a491c5fbfc)

### 웹 문서에 URL을 입력하는 방법

#### 절대 경로 (absolute path)

* 현재 HTML 문서와 상관없이 URL 주소를 사용해 리소스를 찾는 것을 말한다.
* `http://domain.com/resource.html`

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MPy2UZZ3RPB1Z0Qb3d5%2F-MPy42E3Vs77jBSIDuiV%2Fimage.png?alt=media\&token=7cd623bb-3349-40a2-9e5f-62a9814e5f96)

#### 상대 경로 (relative path)

* 현재 HTML 문서에서 상대적인 위치를 설정하는 것을 말한다.
* `../misc/extras.html`
* `../` , `./` 을 사용하지 않고도 상대경로와 똑같이 파일을 찾을 수 있다. 단 일관성을 위해 둘 중 하나의 방법을 선택해야 한다.&#x20;
* `misc/extras.html`

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MPy2UZZ3RPB1Z0Qb3d5%2F-MPy48lxvKGGz2XGp2Ww%2Fimage.png?alt=media\&token=90bc2e84-8c37-427d-885b-5a654ac104fc)

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MPy2UZZ3RPB1Z0Qb3d5%2F-MPy4TBda_HwId9LLSda%2Fimage.png?alt=media\&token=f96b663b-8539-4d97-a04e-022a5440e56e)

#### 루트 경로 (root relative path)

* 현재 HTML 문서가 존재하는 영역의 최상위 루트 경로에서 대상을 찾는 것을 말한다.
* `/images.html`
* 해당 경로는 ajax 비동기 통신을 할때 url 주소를 탐색할 때 사용한다. \
  예를 들어 페이지의 url 주소가 끝나는 지점에서 부터 경로를 찾음&#x20;

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRJ06eC5G3qt0MdO8lP%2F-MRJ0ZyUasHfxxcQ3Xxd%2Fimage.png?alt=media\&token=2ed81d94-23f9-4a80-a4d4-00641b2e123d)

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MPy2UZZ3RPB1Z0Qb3d5%2F-MPy4ak8fQXbgAKtBh_o%2Fimage.png?alt=media\&token=c6114293-c7c1-4a77-8545-f24ed73e1dcb)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/html-and-css/html/anchor-hyperlink.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.