07 링크요소

정보

📁 리소스파일 다운로드

01. figure

정보

👁️‍🗨️ 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용

1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <title> 이미지 캡션 달기 </title>
5
  <meta charset="UTF-8" />
6
</head>
7

8
<body>
9
  <header>
10
    <h1>이미지 캡션 달기</h1>
11
  </header>
12
  <hr>
13
  <section>
14

15
    <figure>
16
      <figcaption>무한 커피 리필과 빵을 제공하는 책이 있는 카페에서. </figcaption>
17
      <img src="images/cafe1.jpg" width="316" height="241" alt="북 카페" />
18
    </figure>
19
    <figure>
20
      <figcaption>동물을 주제로한 카페에서. </figcaption>
21
      <img src="images/cafe2.jpg" width="316" height="241"  alt="동물 테마 카페" />
22
    </figure>
23
  </section>
24
</body>
25
</html>

02. 이미지맵

정보

👁️‍🗨️ 이미지 하나에 여러개의 링크걸기

1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <title> 이미지맵 </title>
5
  <meta charset="UTF-8" />
6
</head>
7

8
<body>
9

10
  <h1>이미지맵을 이용한 하이퍼링크 연결</h1>
11
  <div>
12
    <img src="images/banner_map.gif" width="200" height="200" alt="배너" usemap="#bannerImg" />
13
  </div>
14
  <map name="bannerImg">
15
    <area shape="rect" href="http://www.maroniebooks.com" coords="0,0,100,100" alt="마로니에 북스" title="마로니에 북스 http://www.maroniebooks.com" />
16
    <area shape="rect" href="http://blog.naver.com/ilovetaschen" coords="100,100,200,200" alt="마로니에 북스" title="타센  http://blog.naver.com/ilovetaschen" />
17
    <area shape="rect" href="http://daum.net" coords="100,0,200,100" target="_blank" alt="다음" title="다음 http://www.daum.net"/>
18
    <area shape="rect" href="http://google.com" coords="0,100,100,200" target="_blank" alt="구글" title="구글 http://www.google.net"/>
19
  </map>
20

21
</body>
22
</html>

1
<!DOCTYPE html>
2
<html lang="ko">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
    <style>
9
        body {
10
            text-align: center;
11
            padding-top:100px;
12
        }
13
    </style>
14
</head>
15

16
<body>
17
    <img src="./images/usemap.png" alt="map" usemap="#usemap">
18
    <map name="usemap">
19
        <area shape="rect" coords="0,0,300,150" href="http://naver.com" alt="">
20
        <area shape="rect" coords="300,0,600,300" href="http://daum.net" alt="">
21
        <area shape="rect" coords="0,150,300,300" href="http://google.com" alt="">
22
    </map>
23
</body>
24

25
</html>

03. 네임앵커

정보

👁️‍🗨️ 페이지 내에서 링크 하기

1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <title> 네임앵커를 이용하기 </title>
5
  <meta charset="UTF-8" />
6
</head>
7

8
<body>
9

10
  <h1>네임앵커 이용하기</h1>
11
  <hr>
12
  <ul>
13
    <li><a href="#Model1">Model1</a></li>
14
    <li><a href="#Model2">Model2</a></li>
15
    <li><a href="#Model3">Model3</a></li>
16
  </ul>
17
  <hr />
18
  <h2 id="Model1">오피스룩</h2>
19
  <img src="images/01.png" width="800" alt="오피스룩" />
20
  <hr />
21
  <h2 id="Model2">페미닌룩</h2>
22
  <img src="images/02.png" width="800" alt="페미닌룩" />
23
  <hr />
24
  <h2 id="Model3">씨티룩</h2>
25
  <img src="images/03.png" width="800" alt="씨티룩" />
26
  <hr />
27
  <p><a href="#">위로 이동하기</a></p>
28
</body>
29
</html>