HTML의 핵심 Hyperlink

김석환·2020년 10월 11일
0

HTML

목록 보기
5/8
post-thumbnail

HyperText의 Hyper는 텍스트 등의 정보가 동일 선상이 아닌 다중으로 연결되어 있는 상태를 의미한다.

이것은 HTML의 가장 중요한 특징인 link와 연결된다. 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 대로 정보를 볼 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크라고 한다.

HTML에서는 a(anchor)태그가 그 역할을 담당한다.

<!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="http://www.naver.com">Naver</a>
</html>

1.href 속성

href속성은 이동하고자 하는 파일의 위치를 값으로 받는다.

2.디렉터리

디렉터리는 파일과 다른 디렉터리를 갖는 파일이다.

루트 디렉터리

파일 시스템 계층 구조 상의 최상위 디렉터리이다.

  • Unix:/
  • Windows:C:\

홈 디렉터리

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

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

작업 디렉터리

작업 중인 파일의 위치한 디렉터리이다.

  • ./

부모 디렉터리

작업 디렉터리의 부모 디렉터리이다.

  • ../

3.파일 경로

파일 경로는 파일 시스템에서 파일의 위치를 나타내는 방법이다.

절대경로

현재 작업 디렉터리와 관계없이 특정 파일의 절대적인 위치를 가리킨다.

상대경로

현재 작업 디렉터리를 기준으로 특정 파일의 상대적위치를 가리킨다.

  • ../css/main.css
  • ./image.jpg

이 외에도 href 속성에는 페이지 내의 특정 id를 갖는 요소에 링크 href="#top" , 메일 mailto: , script href="javascript:alert('Hello World')등이 들어갈 수 있다.

4.target 속성

target 속성 링크를 클릭했을때 윈도우를 어떻게 오픈할 지를 지정한다.

  • _self - 링크를 클릭했을 때 연결문서를 현재 탭에서 오픈한다.
  • _blank - 링크를 클릭했을 때 연결문서를 새로운 탭에서 오픈한다.

0개의 댓글