[ HTML ] 링크 만들기

duck-ach·2022년 9월 15일

HTML

목록 보기

5/7

⚓ Anchor

인라인 레벨

<a>

주요 속성

1) href : 링크 경로 작성
2) title : 풍선 도움말(마우스를 대면 나타나는 메시지)
3) target : 어떤 창으로 이동할 것인가?

(1) _self : 현재 창으로 이동(default)

(2) _blank : 새 창으로 이동

비어 있는 링크

<a> 태그와 href 속성을 이용하여 링크를 지정해준다.

 <a href="#">비어 있는 링크1</a>
 <br>
 <a href="javascript:void(0)">비어있는 링크2(완전 아무일도 없음)</a>

클릭하면 비어 있는 링크1은 색이 변하지만, 비어 있는 링크2는 색이 변하지 않는다.

웹 링크

_self : 현재 창으로 이동(default)

_blank : 새 창으로 이동

target 속성 뒤에 _self를 지정해주면 현재 창에서 링크 이동이 되고, _blank을 지정해주면 새 창에서 링크가 열린다.

<a href="https://www.google.com" target="_self">구글</a>
<a href="https://www.naver.com" target="_blank">네이버</a>

이미지 링크

이미지를 클릭하면 해당 링크로 이동하는 것을 구현해보자.

<a href="https://www.naver.com">
   <img src="../../images/naver.png" alt="네이버이미지" width="200px">
</a>

<a> </a> 태그로 감싸서 이미지를 저장해주고, 링크를 지정해주면 이미지를 클릭하면 해당 링크로 이동이 된다.

를 누르면

네이버 홈페이지로 이동하도록 설정이 됐다.

파일 링크

클릭하면 해당 파일을 여는 링크를 구현해보자.

<a href="01_overview.html">오버뷰</a>

링크를 누르면

미리 만들어둔 파일인 html파일이 열린다.

같은 문서 안에서 이동하기

id속성을 이용해서 같은 문서 안에서 이동할 수 있다.

id : HTML 구성요소를 식별하기 위한 속성, 중복이 없다.

 <p>
        <a href="#image">이미지</a><br>
        <a href="#content">내용</a><br>
        <a href="#description">세부사항</a>
     </p>

     <p id="image">
        <img src="../../images/apple.jpg" alt="사과이미지" width="1000px">
     </p>
     <p id="content">
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
        맛있는 사과가 한 개 1000원<br>
     </p>
     <p id="description">
        원산지 : 청송 사과<br>
        품종   : 부사<br>
     </p>

각 id를 설정해둔 곳으로 이동한다.

Image Map(이미지 맵)

이미지 일부에 링크를 생성하는 것을 말한다.

<img>태그와 <map> 태그를 사용한다.

이미지맵 사용방법

<img src-"이미지경로" usemap="#map이름">
        <map name="맵이름">
            <area shape="모양" href="링크경로" coords="좌표">
        </map>

주요속성

1) shape 속성 : rect(사각형 링크), circle(원 링크)
2) coords 속성
<area shape="rect"  coords="시작x, 시작y, 종료x, 종료y">
<area shape="circle" coords="중심x, 중심y, 반지름">

예제

 <img usemap="#domino_event" src="../../images/dominopizza.jpg" alt="도미노피자이미지">
      <map name="domino_event">
        <area target="_self" alt="ㅇㅇ" title="ㅇㅇ" href="https://web.dominos.co.kr/goods/list?dsp_ctgr=C0101" coords="299,2014,906,2175" shape="rect">
        <area target="_self" alt="onlinedomino" title="onlinedomino" href="https://web.dominos.co.kr/main" coords="818,640,80" shape="circle">
      </map>