Web/Html_Css

태그 앵커 만들기 (페이지 내에서 이동)

Jaybon 2020. 3. 3. 15:33
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>a 태그 앵커 이동 만들기</h3>
    <!-- 링크를 누르면 페이지 내의 해당 앵커 id 위치로 화면이 이동된다. -->
    <ul>
        <li><a href="#love">Love me tender</a></li>
        <li><a href="#can">Can't help falling in love</a></li>
        <li><a href="#it">It''s now or never</a></li>
    </ul>
    <h3 id="love">Love me tender</h3>
        Love me tender, Love me sweet, Never let me go.<br>
        You have made my life complete, <br>
        And I love you so.<br>
        Love me tender, Love me true, <br>
        All my dreams fulfilled.<br>
        For my darling I love you, And I always will.<br>
        <h3 id="can">Can't help falling in love</h3>
        Love me tender, Love me sweet, Never let me go.<br>
        You have made my life complete, And I love you so.<br>
        Love me tender, Love me true, All my dreams fulfilled.<br>
        For my darling I love you, And I always will.<br>
        <h3 id="it">It''s now or never</h3>
        It's now or never, Come hold me tight<br>
        Kiss me my darling, Be mine tonight<br>
        Tomorrow will be too late,<br>
        It's now or never. My love won't wait.<br>
</body>
</html>
cs