티스토리 뷰

부산 ITWILL 학원 실습/Web

a 태그로 페이지 안에서 이동하는 링크

김뽀삐. 2018. 8. 14. 10:56
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<html>
    <head>
        <title>a 태그로 페이지 안에서 이동하는 링크</title>
    </head>
 
    <body>
        <h1>페이지 내부 링크</h1>
        <p>
            <b><a href="<mark>#abc123</mark>"> CONTENT </a></b><br>
            <b><TAG id="<mark>abc123</mark>"></b><br>
            이동하고자 하는 곳의 태그에 id 속성으로 id 값을 만들어준다.
            (id값은 영문과 숫자의 조합으로, 첫 글자는 반드시 영문이라야 함)<br>
            id값은 페이지 내에서 중복해서 사용 할 수 없는 고유의 값으로
            해당 태그를 특별하게 만들어준다.(링크나 css 등에서 활용)<br>
            id값을 불러와서 활용할 때는 id값 앞에 <mark>#</mark>을 붙여준다.
        </p>
 
        <h4>다른 문서의 특정한 곳으로 이동하는 링크</h4>
        <p>
            <a href="<mark>test08.htm#ph5</mark>">
        </p>
        <hr>
 
        <nav>
            <a href="#ph1">Photo - 1</a>
            <a href="#ph2">Photo - 2</a>
            <a href="#ph3">Photo - 3</a>
            <a href="#ph4">Photo - 4</a>
            <a href="#ph5">Photo - 5</a>
            <a href="#ph6">Photo - 6</a>
            <a href="#ph7">Photo - 7</a>
            <a href="#ph8">Photo - 8</a>
            <a href="#ph9">Photo - 9</a>
            <a href="#ph10">Photo - 10</a>
        </nav>
        <hr>
 
        <h2 id="ph1">Photo - 1</h2>
        <a href="img/dandelion.jpg" title="원본 이미지 보기" target="_blank">
            <img src="img/dandelion.jpg" alt="" width="600px" height="400px">
        </a>
        <br><br><a href="#">↑ TOP</a><br><br>
 
        <h2 id="ph2">Photo - 2</h2>
        <a href="img/field-of-poppies.jpg" title="원본 이미지 보기" target="_blank">
            <img src="img/field-of-poppies.jpg" alg="" width="600px" height="400px">
        </a>
        <br><br><a href="#">↑ TOP</a><br><br>
 
        <h2 id="ph3">Photo - 3</h2>
        <a href="img/forest.jpg" title="원본 이미지 보기" target="_blank">
            <img src="img/forest.jpg" alt="" width="600px" height="400px">
        </a>
        <br><br><a href="#">↑ TOP</a><br><br>
 
        <h2 id="ph4">Photo - 4</h2>
        <a href="img/message-in-a-bottle.jpg" title="원본 이미지 보기" target="_blank">
            <img src="img/message-in-a-bottle.jpg" alt="" width="600px" height="400px">
        </a>
        <br><br><a href="#">↑ TOP</a><br><br>
 
        <h2 id="ph5">Photo - 5</h2>
        <a href="img/brandy.jpg" title="원본 이미지 보기" target="_blank">
            <img src="img/brandy.jpg" alt="" width="600px" height="400px">
        </a>
        <br><br><a href="#">↑ TOP</a><br><br>
 
        <h2 id="ph6">Photo - 6</h2>
        <a href="img/flower.jpg" title="원본 이미지 보기" target="_blank">
            <img src="img/flower.jpg" alt="" width="600px" height="400px">
        </a>
        <br><br><a href="#">↑ TOP</a><br><br>
 
        <h2 id="ph7">Photo - 7</h2>
        <a href="img/mallard.jpg" title="원본 이미지 보기" target="_blank">
            <img src="img/mallard.jpg" alt="" width="600px" height="400px">
        </a>
        <br><br><a href="#">↑ TOP</a><br><br>
 
        <h2 id="ph8">Photo - 8</h2>
        <a href="img/market.jpg" title="원본 이미지 보기" target="_blank">
            <img src="img/market.jpg" alt="" width="600px" height="400px">
        </a>
        <br><br><a href="#">↑ TOP</a><br><br>
 
        <h2 id="ph9">Photo - 9</h2>
        <a href="img/hydrangea.jpg" title="원본 이미지 보기" target="_blank">
            <img src="img/hydrangea.jpg" alt="" width="600px" height="400px">
        </a>
        <br><br><a href="#">↑ TOP</a><br><br>
 
        <h2 id="ph10">Photo - 10</h2>
        <a href="img/frog.jpg" title="원본 이미지 보기" target="_blank">
            <img src="img/frog.jpg" alt="" width="600px" height="400px">
        </a>
        <br><br><a href="#">위로 가기</a><br><br>
    </body>
</html>
cs

























저작자표시 비영리 변경금지

'부산 ITWILL 학원 실습 > Web' 카테고리의 다른 글

a 태그로 링크 걸기  (0) 2018.08.14
이미지와 경로  (0) 2018.08.14
연습해보기 - 소스  (0) 2018.08.14
연습해보기  (0) 2018.08.14
form-2  (0) 2018.08.13
공지사항
최근에 올라온 글
링크
Total
Today
Yesterday