앵커와 하이퍼링크

하이퍼링크 (Hyperlink)

• href 속성은 다른 페이지 또 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다.

• 개발할 때 href="#" 처럼 # 값을 사용하는 경우가 간혹 있는데 이는 어디에도 연결되지 않는 기호라서 앵커 요소의 역할과 맞지 않는다.

앵커(anchor)

앵커 요소는 <a>요소를 말한다.

속성

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

예시

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

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

각주에 사용하기

각주를 사용할 때 해당 형태를 사용할 수 있다.

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

절대 / 상대 / 루트 경로

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

URL 구성

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

절대 경로 (absolute path)

• 현재 HTML 문서와 상관없이 URL 주소를 사용해 리소스를 찾는 것을 말한다.

• http://domain.com/resource.html

상대 경로 (relative path)

• 현재 HTML 문서에서 상대적인 위치를 설정하는 것을 말한다.

• ../misc/extras.html

• ../ , ./ 을 사용하지 않고도 상대경로와 똑같이 파일을 찾을 수 있다. 단 일관성을 위해 둘 중 하나의 방법을 선택해야 한다.

• misc/extras.html

루트 경로 (root relative path)

• 현재 HTML 문서가 존재하는 영역의 최상위 루트 경로에서 대상을 찾는 것을 말한다.

• /images.html

• 해당 경로는 ajax 비동기 통신을 할때 url 주소를 탐색할 때 사용한다. 예를 들어 페이지의 url 주소가 끝나는 지점에서 부터 경로를 찾음