HTML, CSS
HTML 앵커,이미지맵 만들기
병호네
2024. 4. 12. 16:07
한 페이지 안에서 점프하기 - 앵커
- 앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만듦.
- <a> 태그의 href 속성을 사용해 링크함. 단, 앵커 이름 앞에 #을 붙여 앵커 표시.
코드작성
<body>
<h1>앵커 만들기</h1>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을붙여놓고
그 위피로 한번에 이동하는 링크를 만들 수 있는데,이 기능을
앵커(anchor)라고 합니다.
</p>
<ul id="menu">
<!-- herf="#contrnt" -> id="content1"로 찾아감-->
<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><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을붙여놓고
그 위피로 한번에 이동하는 링크를 만들 수 있는데,이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을붙여놓고
그 위피로 한번에 이동하는 링크를 만들 수 있는데,이 기능을
앵커(anchor)라고 합니다.
</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용3</h2>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을붙여놓고
그 위피로 한번에 이동하는 링크를 만들 수 있는데,이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을붙여놓고
그 위피로 한번에 이동하는 링크를 만들 수 있는데,이 기능을
앵커(anchor)라고 합니다.
</p>
<p><a href="#menu">[메뉴로]</a></p>
</body>
출력
<area> 태그, usemap 속성 이미지맵
- 이미지맵 : 한 이미지 상에 여러 다른 링크를 만드는 것
<area> 태그의 속성들
코드 작성
출력
