하이퍼링크

맹뿌·2021년 5월 26일
0

HTML5

목록 보기
5/9

Link Tag 참고

한 텍스트에서 다른 텍스트로 건너 뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link) 라고 한다. HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <a href="http://www.google.com">Visit google.com!</a>
      // Visit google.com!을 클릭하면 구글 홈페이지로 이동하게 한다.
  </body>
</html>

② href 속성

hypertext reference의 약자고, 이동하고자 하는 파일의 위치(경로)를 값으로 받는다.
경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다.

1. 디렉토리 (Directory)

루트 디렉토리 : 파일 시스템 계층 구조 상의 최상위 디렉토리이다.

  • Unix : /
  • Windows : C:\

홈 디렉토리 : 시스템의 사용자에게 각각 할당된 개별 디렉토리이다.

  • Unix : /Users/{계정명}
  • Windows : C:\Users{계정명}

작업 디렉토리 : 작업 중인 파일이 위치한 디렉토리이다.

  • ./

부모 디렉토리 : 작업 디렉토리의 부모 디렉토리이다.

  • ../

2. 파일 경로 (File path)

HTML 시리즈의 네번째 글에서 언급한 것처럼 파일 경로는 파일 시스템에서 파일의 위치를 나타내는 방법이다. 경로에는 절대경로상대경로가 있다.

절대경로(Absolute Path)
루트 디렉토리를 기준으로 파일의 위치를 나타낸다.

상대경로(Relative Path)
현재 작업 디렉토리를 기준으로 특정 파일의 상대적인 위치를 가리킨다.

  • ./index.html
  • ../dist/index.js
  • html/index.html (현재 작업 디렉토리의 하위 디렉토리인 html로 가서, index.html)

href 속성에 사용 가능한 값은 아래와 같다.

<a href="#top">은 페이지 내에 top이라고 하는 id를 갖는 요소로 바로 이동이 가능하게 한다.

③ target 속성

target 어트리뷰트는 링크를 클릭했을 때 윈도우를 어떻게 오픈할지를 지정한다.

  • _self (기본값) : 링크를 클릭했을 때, 연결 문서를 현재 페이지에서 오픈한다.
  • _blank : 링크를 클릭했을 때, 연결 문서를 새로운 탭에서 오픈한다.
<body>
  <a href="http://www.google.com" target="_blank">Visit google.com!</a>
</body>

이 경우, 결과창에서 Visit google.com!을 클릭하면 google.com이 새로운 탭으로 열리는 것을 확인할 수 있었다.

🎁 참조 및 출처

profile
무엇이든 할 수 있고, 무엇이든 될 수 있는

0개의 댓글