INDEX
2. anchor ( ์ต์ปค ๋ง๋ค๊ธฐ )
|
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>