개념.log/Publishing

[HTML] 05. 링크 만들기

_2J 2020. 6. 13. 03:29

     INDEX


  1.   target 속성

 

  2.  anchor ( 앵커 만들기 )

 

  3. <map>,<area>,usemap속성

 

 

 

 

                       Index 항목을 클릭하면 해당 위치로 이동합니다.

                       게시물의 anchor 테스트를 위해 목록간의 간격을 넓게 설정하였습니다.

 

 

 

 

 

 

 

 

 

 

 

1. 링크 만들기

 

 

기본형

<a href="link" [속성="속성 값"]>  텍스트  </a>
<a href="link" [속성="속성 값"]> <img src="이미지 경로"> </a>

 

 

  <a> 태그?

 

텍스트와 함께 사용하면 텍스트 링크가 되고

이미지와 함께 사용하면 이미지 링크가 됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

     1-1 )  target 속성 - 새 탭에서 링크열기

 

 

저장된 이미지 파일 - 서버에 사진 파일까지 함께 업로드

 

웹 상의 링크 복사 이미지 - 인터넷에 접속가능하다면 표시

 

 

 

[ INDEX로 돌아가기 ]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

     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>

 

 

 

[ INDEX로 돌아가기 ]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

     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>

 

 

 

[ INDEX로 돌아가기 ]

저작자표시