하이퍼링크 태그 (Hyper Link)

1. Hyper Link - a 태그

<a href="이동할 경로" target=""> contents </a>

<a href="https://www.naver.com" target="_blank"> Go Naver</a>

 

​

2. href 속성

1) 절대 경로 방식 : 최상위 디렉터리 부터의 위치

- Web (Front)에서는 프로젝트명이 최상위 디렉터리명.(root)

- /로 시작하면 절대경로로 인식

절대 경로 예시​

- HTML에서 절대 경로 지정

실행 시 최상위 위치 ( "/" 만 작성 시 위치) : apache-tomcat-9.0.33\webapps

WebContent는 배포될때 사라지는 폴더이기 때문에 경로 지정 시 생략

<!-- 절대 경로로 지정하여 test.html 실행 -->
<a href="/TestProject/test.html">Go Test</a>
<!-- 절대 경로로 text1.html 실행 -->
<a href="/TestProject/text/text1.html">Go text1</a>

 

 

2) 상대 경로 방식 : 현재 디렉터리 부터의 위치

- 현재 디렉터리 나타내기 ./ 또는 ./를 생략

- 상위 디렉터리로 이동 ../

상대 경로 예시 ​

​

- HTML에서 상대 경로 지정

<h3>상대 경로 방식</h3>
<!-- 같은 디렉터리 내의 다른 파일 열기 -->
<!-- 현재 디렉터리를 나타내는 방법 : ./ 또는 아무것도 적지 않기 -->
<a href="./result_1.html">Go Result1</a>
<a href="result_1.html">Go Result1</a>
<!-- 현재 디렉터리에서 상위로 올라갈 때 ../ -->
<a href="../test.html">Go Test</a>
<a href="../text/text1.html">Go Text</a>

 

 

3) 아이디 경로 방식

# 기호를 이용하여 웹페이지 내에서 해당 아이디의 위치로 이동

​

 

4) 메일 경로 방식

해당 주소로 메일 전송

​

​

3. target 속성

- 링크 클릭시 윈도우창을 어떻게 열지 결정

- 속성값: _self(현재 위치에서 열기) / _blank(새 창에서 열기)

<!-- 새 창에서 띄우기 -->
<a href="../text/text1.html" target="_blank">Go Text1</a>

 

​