06 _HTML (하이퍼링크관련태그)

하이퍼링크

하이퍼링크 기능은 웹 문서의 가장 핵심적인 기능이다
클릭을 통해 연결된 곳으로 이동하여 사용을 편리하게 해주는 기능이다.

 

텍스트를 클릭해 링크를 이동하는 방법과
이미지를 클릭해서 넘어가는 방법
페이지 내에서의 링크를 통한 이동 방법 (상위로 올라가는 탑버튼) 이 존재한다.

 

사용태그

<a href=""></a>

기본적으로 a태그의  href속성으로 링크를 만들 수 있다.

 

1)텍스트 클릭 > 링크 이동 방식

<ul>

        <li><a href="01_글자관련태그.html">글자관련태그</a></li>

        <li><a href="02_목록관련태그.html">목록관련태그</a></li>

        <li><a href="http://www.naver.com">네이버</a></li>

 </ul>

*target 속성 ㅣ 연결된 페이지를 어떤 탭에서 열껀지 지정

 

(기본값) _self -  해당 페이지에서 바로 연결되어 링크 호출

              _blank - 해당 페이지가 아닌 새로운 탭을 열어 링크 호출

 

 

2)이미지 클릭 > 링크 이동 방식

 

a 태그 사용 하여 링크 추가 후 > img 태그로 경로 이미지 경로를 지정해주면 된다.

<a href="https://www.w3schools.com" target="_blank"><img src="resources/image/flower3.PNG" width="150" height="150" alt=""></a>

 

 

3)페이지 내 링크를 통한 이동 방법 

   1) 처음으로 돌아갈 태그의 위치에 id 값 부여

   2)  클릭시 돌아갈 링크 생성 및 1) 의 id 값 href 값에 넣기