HTML Eclipse 하이퍼링크, 앵커, area

 

 

하이퍼링크

: 다른 문서, 혹은 다른 사이트로 바로 연결해 주는 기능

 

외부 사이트나 외부 페이지로도 연결
메뉴 뿐만 아니라 원하는 곳에 링크를 만들 수 있다


<a></a> 태그
- 하이퍼링크
- 반드시 href속성을 함께 사용해서 어떤 대상으로 연결하는지 알려주어야 한다.

속성
- href - 링크한 문서나 사이트의 주소를 입력
- target - 링크한 내용이 표시될 위치를 지정.
- download - 링크한 내용을 보여주는것이 아니라 다운로드함.
- rel - 현재 문서와 링크한 문서의 관계를 알려줌.
- hreflang - 링크한 문서의 언어를 지정.
- type - 링크한 문서의 파일 유형을 알려줌.

target 속성 – 새 탭에서 링크 열기
다른 사이트로 링크하거나 현재 페이지를 유지한 상태에서 링크 페이지를 표시할 때
현재 페이지는 그대로 유지하면서 새 창이나 새 탭에 표시
- _blank - 링크내용이 새창이나 새탭에 열린다.
- _self - 기본값, 링크가 있는 화면에서 열림.
- _parent - 프레임사용시 링크내용을 부모프레임에 표시..x
- _top - 프레임 사용시 프레임을 벗어나 링크내용을 전체화면에 표시.

<a href="https://www.naver.com" target="_blank">네이버</a>
<a href="/HTML/hello.html"><img src="images/CapeReinga.jpg"></a>
<a href="/HTML/hello.html"><img src="images/CapeReinga.jpg" alt="Cape Reinga" width="300" height="200"></a>

 

 

---

 

 

앵커

: 한 페이지 안에서 점프하기

이동하고 싶은 위치마다 id 속성을 이용해 앵커 생성
<a> 태그의 href 속성을 사용해 링크함. 단, 앵커 이름 앞에 #을 붙여 앵커 표시

 

ex.
<h1>앵커 만들기</h1>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<ul id="menu">
<li><a href="#content1">메뉴1</a></li>
<li><a href="#content2">메뉴2</a></li>
<li><a href="#content3">메뉴3</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용3</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>

 

 

출력화면

 

 

---

 

 

<area> 태그, usemap 속성

: 이미지맵

 

 

이미지맵 : 한 이미지 상에 여러 다른 링크를 만드는 것

 

기본형
<map name="맵이름">
    <area >
    <area >
</map>
<img src="이미지경로"  alt="" usemap="#맵이름">

 

<area>태그의 속성

- alt - 대체 텍스트를 지정
- coords - 링크로 사용할 영역을 시작 좌표와 끝좌표를 이용해 지정.
- download - 링크한 내용을 보여주는것이 아니라 다운로드함.
- href - 링크문서의 경로 지정
- media - 링크 문서를 어떤 미디어에 최적화 시킬지 지정
- rel - 현재 문서와 링크한 문서의 관계를 알려줌.
- shape - 링크로 사용할 영역의 형태를 지정.
  - default , rect , circle , poly
- target - 링크한 내용이 표시될 위치를 지정.
  - _black , _parent , _self , _top , 프레임 이름.
- type - 링크한 문서의 미디어 유형을 알려줌.


<img src="/HTML/images/CapeReinga.jpg" alt="" usemap="#favorites">
<map name="favorites">
    <area shape="rect" coords="10,10,160,200" href="https://section.cafe.naver.com/ca-fe/" alt="" target="_blank">
    https://www.facebook.com/campaign/landing.php?&campaign_id=1662308814&extra_1=s%7Cc%7C514638008096%7Ce%7C%ED%8E%98%EC%9D%B4%EC%8A%A4%20%EB%B6%81%7C&placement=&creative=514638008096&keyword=%ED%8E%98%EC%9D%B4%EC%8A%A4%20%EB%B6%81&partner_id=googlesem&extra_2=campaignid%3D1662308814%26adgroupid%3D69637362208%26matchtype%3De%26network%3Dg%26source%3Dnotmobile%26search_or_content%3Ds%26device%3Dc%26devicemodel%3D%26adposition%3D%26target%3D%26targetid%3Dkwd-303215285480%26loc_physical_ms%3D1009871%26loc_interest_ms%3D%26feeditemid%3D%26param1%3D%26param2%3D&gclid=EAIaIQobChMI0djB2t2K9gIVxBd9Ch087QHNEAAYASAAEgLv7_D_BwE" alt=""></area shape="rect" coords="220,10,380,200" href="
</map>