[HTML] Tag - Link

HOU·2022년 7월 1일

frontend

목록 보기

6/13

참조
킹포이마

Hypertext의 Hyper란 컴퓨터 용어로 텍스트 정보가 동일 선상에 있는 것이 아니라, 다중으로 연결 되어 있는 상태를 말한다.

이것은 HTML의 중요한 개념인 link와도 연관되는데, 기존 문서나 텍스트의 선형성이 아니라, 원하는 순서대로 원하는 정보를 사용자가 획득하게 하는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크 링크라고 한다.

HTML link는 Hyperlink를 의미하며 HTML에서는 a태그가 담당한다.

href

이동하고자 하는 파일의 위치를 경로로 받는다. 경로는 파일이 위치한 곳을 의미한다.

디렉토리(Directory)

루트 디렉토리
파일 시스템 계층 구조에서 최상단 경로를 의미한다.

window: C:
Unix: /

사용자 디렉토리
각 시스템의 사용자에게 할당한 디렉토리

Window: C:\Users{계정명}
Unix : /Users/{계정명}

작업 디렉토리

부모 디렉토리

파일 경로

파일 경로는 파일 시스템에서 파일 위치를 나나태는 방법이다. 절대경로와 상대경로가 존재

절대 경로(Absolute path)
루트 디렉토리 기준으로 파일의 위치 작성
상대 경로(Relative path)
작업 디렉토리 기준으로 파일 위치 작성

href attribute

value	Description
절대 URL	웹사이트 URL(href="http://www.naver.com"
상대 URL	자신의 데록토리 기준으로한 대상의 url(href="html/default.html")
fragment identifier	페이지 내의 특정 id를 갖는 요소에 링크(href="#top")
메일	mailto:
script	href="javascript:alert("Hello");"

예시

<!DOCTYPE html>
<html>
  <body>
    <a href="http://www.google.com">URL</a><br>
    <a href="html/my.html">Local file</a><br>
    <a href="file/my.pdf" download>Download file</a><br>
    <a href="#">fragment identifier</a><br>
    <a href="mailto:someone@example.com?Subject=Hello again">Send Mail</a><br>
    <a href="javascript:alert('Hello');">Javascript</a>
  </body>
</html>

자바스크립트와 메일투가 처음 보는 거라 신기하다.

target 어트리뷰트

값	설명
`_self`	링크를 클릭했을때 연결문서를 현재 윈도우에서 오픈(default)
`_blank`	링크를 클릭했을 때 새로운 윈도우나 탭에서 오픈

예시

<!DOCTYPE html>
<html>
  <body>
    <a href="http://www.google.com" target="_blank" rel="noopener noreferrer">Visit google.com!</a>
  </body>
</html>