08_HTML 하이퍼링크 관련 태그

gotcha!!·2023년 2월 9일
0

HTML

목록 보기
8/9
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08_하이퍼링크 관련 태그</title>
</head>
<body>
    <h1>하이퍼링크 관련 태그 : a(anchor)</h1>

    <pre>
        a태그는 현재 HTML문서와 다른 HTML 문서를 연결해서
        페이지 이동을 할 수 있게 하는 기능을 제공.

        -> 이 때, a태그로 감싸진 문자열 == 하이퍼링크 역할

        * 하이퍼링크는 웹(HTML) 문서가 다른 문서와 구분될 수 있는
        핵심적인 기능
        텍스트 or 이미지를 클릭해서 페이지 이동
        * 페이지 내에서 이동 가능
    </pre>

    <hr>

    <h2>a태그를 이용한 하이퍼링크 구현</h2>

    <ul>
        <li>
            <a href="01_글자관련태그.html">01_글자 관련 태그</a>
        </li>

        <!-- target 속성 : 연결된 문서를 어디에서 열 것인지 지정하는 속성
                    기본값 : 같은 탭
                    blank : 새 탭 == 비어있는 탭
         -->
        <li>
            <a href = "02_목록관련태그.html" target="_blank">02_목록 관련 태그</a>
        </li>

        <li>
            <a href = "https://www.naver.com" target="_blank">네이버 연결</a>
        </li>

        <hr>

        <h2>이미지 클릭시 페이지 이동</h2>

        <a href = "https://www.naver.com" target="_blank">
            <img src = "이미지2/sample1.jpg"
        </a>
    </ul>


    <hr>



    <h2>한 페이지 내에서 이동하기(점프)</h2>

    <ul id = "list">
        <li><a href = "#ggul1">껄무새1</a></li>
        <li><a href = "#ggul2">껄무새2</a></li>
        <li><a href = "#ggul3">껄무새3</a></li>
    </ul>


    <h3 id="ggul1">껄무새1</h3>
    <img src = "이미지2/sample1.jpg" width = "15%"><br>
    <a href = "#list">목록으로 이동</a>

    <h3 id="ggul2">껄무새2</h3>
    <img src = "이미지2/sample1.jpg" width = "25%"><br>
    <a href = "#list">목록으로 이동</a>

    <h3 id="ggul3">껄무새3</h3>
    <img src = "이미지2/sample1.jpg" width = "35%"><br>
    <a href = "#list">목록으로 이동</a>


</body>
</html>
profile
ha lee :)

0개의 댓글