반응형
|
INDEX
|
Index 항목을 클릭하면 해당 위치로 이동합니다.
게시물의 anchor 테스트를 위해 목록간의 간격을 넓게 설정하였습니다.
1. 링크 만들기
기본형
<a href="link" [속성="속성 값"]> 텍스트 </a>
<a href="link" [속성="속성 값"]> <img src="이미지 경로"> </a>
<a> 태그?
텍스트와 함께 사용하면 텍스트 링크가 되고
이미지와 함께 사용하면 이미지 링크가 됩니다.
1-1 ) target 속성 - 새 탭에서 링크열기
저장된 이미지 파일 - 서버에 사진 파일까지 함께 업로드
웹 상의 링크 복사 이미지 - 인터넷에 접속가능하다면 표시
1-2 ) anchor ( 앵커 만들기 )
한 페이지 안에서 점프하는 앵커 만들기
페이지가 긴 웹문서에서 특정 요소를 클릭하면 그 위치로 한번에 이동하도록 도와준다.
<태그 id="앵커이름"> 텍스트 또는 이미지 </태그>
<a href="#앵커이름"> 텍스트 또는 이미지 </a>
예시 코드 )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<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><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
<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><a href="#menu">[메뉴로]</a></p>
</body>
</html>
1-3 ) <map> , <area> , usemap 속성 - 이미지 맵 지정하기
map 태그는 이미지의 특정 부분을 지정하여 링크를 걸 때 사용하는 태그이며, img 태그와 함께 사용한다.
이미지를 마치 지도처럼 사용한다 하여, 이미지맵이라 부른다.
이미지의 일부분을 클릭하면, 그 부분에 링크된 주소로 이동하게 된다.
그리고 map 태그 안에는, 반드시 area 태그가 들어있어야 한다. ( 즉, <area>는 <map>의 자식 요소이다. )
<img src="https://t1.daumcdn.net/cfile/tistory/2701464354D660BC0A" width="403" height="39" alt="블로그 메뉴" usemap="#favorites" />
<map name="favorites">
<area title="Home" alt="첫화면" coords="11,13,56,24" shape="rect" href="http://ljg960730.tistory.com/" target="_blank" />
<area title="Tag" alt="태그 목록" coords="85,11,114,29" shape="rect" href="../tag" target="_blank" />
<area title="Media" alt="미디어 로그" coords="148,11,204,24" shape="rect" href="../media" target="_blank" />
<area title="Location" alt="위치 로그" coords="236,12,307,24" shape="rect" href="../location" target="_blank" />
<area title="Guestbook" alt="방명록" coords="338,12,390,30" shape="rect" href="../guestbook" target="_blank" />
</map>