Anchor
- 인라인 레벨
<a></a>
주요 속성
href: 링크 경로 작성
title: 풍선 도움말 (마우스를 대면 나타나는 메시지)
target: 어떤 창으로 이동할 것인가?
_self: 현재 창으로 이동 (디폴트)_blank: 새 창으로 이동
비어 있는 링크
<a>태그와href속성을 이용하여 링크를 지정해준다.
<a href="#">비어 있는 링크1</a>
<br>
<a href="javascript:void(0)">비어 있는 링크2(완전 아무일도 없음)</a>
→ 클릭하면 비어 있는 링크1은 색이 변하지만, 비어 있는 링크2는 색이 변하지 않는다.
웹 링크
_self: 현재 창으로 이동 (default)_blank: 새 창으로 이동
<a href="https://www.google.com" target="_self">구글</a>
<br>
<a href="https://www.naver.com" target="_blank">네이버</a>
이미지 링크
<a href="https://www.naver.com">
<img src="../../images/naver.png" width="200px">
</a>이미지를 클릭하면 네이버 홈페이지로 이동한다.
파일 링크
<a href="01_overview.html">오버뷰</a>오버뷰를 클릭하면 01_overview.html 에 있는 웹페이지가 열린다.
같은 문서 안에서 이동하기
id: HTML 구성요소를 식별하기 위한 속성, 중복이 없다.id속성을 이용해서 같은 문서 안에서 이동할 수 있다.
<p>
<a href="#image">이미지</a><br>
<a href="#content">내용</a><br>
<a href="#description">세부사항</a><br>
</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>
</p>
<p id="description">
원산지 : 청송 사과<br>
품종 : 부사<br>
</p>각 id를 설정한 곳으로 이동한다.
이미지 맵 (Image Map)
- 이미지 일부에 링크를 생성
<img>태그와<map>태그를 사용
사용방법
<img src="이미지경로" usemap="#map이름">
<map name="맵이름">
<area shape="모양" href="링크경로" coords="좌표">
</map>속성
- shape 속성 : rect(사각형 링크), circle(원 링크)
- coords 속성
<area shape="rect" coords="시작x, 시작y, 종료x, 종료y">
<area shape="circle" coords="중심x, 중심y, 반지름">예제. 도미노피자 이미지
<img usemap="#domino_event" src="../../images/dominopizza.jpg">
<map name="domino_event">
<area shape="rect" href="https://web.dominos.co.kr/goods/list?dsp_ctgr=C0101" coords="300, 2015, 900, 2170">
<area shape="circle" href="http://web.dominos.co.kr/main" coords="820, 640, 80">
</map>이미지 좌표 구하는 방법
방법1
- 이미지를 그림판으로 열면 마우스를 가져다 대는 곳의 좌표가 좌측 아래에 표시된다.
방법2
- 이미지 좌표 구해주는 사이트
사이트에서 이미지를 등록하고, 설정하면 좌표를 구해준다.
rect 를 이용해서 하늘색 네모 안에 링크 연결하고,
circle 을 이용해서 이미지의 하늘색 원 안에 링크를 연결했다.
출처 : 도미노피자 홈페이지 (https://web.dominos.co.kr/main)
