[HTML] 7. 하이퍼링크 관련 태그

1. 하이퍼링크 관련 태그

1) 하이퍼링크?

- 하이퍼링크 기능은 웹 문서에서 또다른 문서로 클릭만으로 이동될 수 있게끔 연결시켜놓은 html의 가장 핵심적인 기능

- 텍스트문구를 클릭해 이동하는 방법, 이미지를 클릭해 이동하는 방법, 현재페이지내에서도 링크를 통해 다른 요소의 위치에 접근도 가능함

 

 

 

2) a 태그를 이용한 하이퍼링크 테스트

① 내가 작성했던 html파일로 이동할 수 있음

<a href=""></a>

    <a href="5_입력양식 폼 관련태그.html">입력양식 폼 관련태그</a>
    <a href="5_form_homework.html">회원가입 폼</a>
    <a href="6_영역관련태그.html">영역관련태그</a>

=> 링크를 클릭하면  현재 페이지에서 이동한다!

 

 

 

② 인터넷이 연결된 상황이면 현재 서비스되고 있는 웹페이지도 링크 가능

- a herf 태그 안에 target 속성을 추가할 수 있는데 target 속성을 미작성시 _self가 기본값이다!

- 만약 현재 문서에서 이동하기가 아니라 새창을 열어 이동하고 싶다면 target = "_blank" 속성을 추가하여야 한다.

    <ul>
        <li><a href="https://naver.com">네이버로 이동</a></li>
        <!-- 현재 문서에서 naver로 이동 -->

        <li><a href="https://google.com" target="_blank">구글로 이동</a></li>
        <!-- target : _blank 새창 열기 속성 
            target 미작성시 _self 가 기본값이다!!
        -->

    </ul>

 

 

3) 이미지를 클릭해서 웹피이지 링크 연결하기

    <h3>이미지 클릭해서 웹페이지 링크 연결하기</h3>
    <a href="https://w3schools.com" target="_blank">
        <img src="image/cat.jpg" width="200">
    </a>

 

 

=> 이 고양이 이미지를 클릭하면....?

=> 새창을 열어 이 링크로 이동하게된다!(target = "_blank" 속성 추가)

 

 

 

 

4) 한 페이지 내에서 점프하는 앵커 만들기

- 시작 값으로 #이 오면 한페이지 기준으로 content1, 2, 3으로 이동하라라는 뜻이다.

- #은 id를 말한다.

    <h3 id="menu">한 페이지 내에서 점프하는 앵커 만들기</h3>

    <ul>
        <li><a href="#content1">본문내용1</a></li>
        <li><a href="#content2">본문내용2</a></li>
        <li><a href="#content3">본문내용3</a></li>
    </ul>

    <!-- 시작 값으로 #이 오면 현재페이지 기준으로 content1, 2, 3로 이동하라 라는 뜻 -->
     

    <h4 id="content1">본문내용1</h4>
    <div>
        모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 국회의원은 현행범인인 경우를 제외하고는 회기중 국회의 동의없이 체포 또는 구금되지 아니한다.

        지방의회의 조직·권한·의원선거와 지방자치단체의 장의 선임방법 기타 지방자치단체의 조직과 운영에 관한 사항은 법률로 정한다. 한 회계연도를 넘어 계속하여 지출할 필요가 있을 때에는 정부는 연한을 정하여 계속비로서 국회의 의결을 얻어야 한다.

        국회는 국정을 감사하거나 특정한 국정사안에 대하여 조사할 수 있으며, 이에 필요한 서류의 제출 또는 증인의 출석과 증언이나 의견의 진술을 요구할 수 있다.

        대한민국은 국제평화의 유지에 노력하고 침략적 전쟁을 부인한다. 외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다. 정당은 그 목적·조직과 활동이 민주적이어야 하며, 국민의 정치적 의사형성에 참여하는데 필요한 조직을 가져야 한다.
    </div>

    <h4 id="content2">본문내용2</h4>
    <div>
        모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 국회의원은 현행범인인 경우를 제외하고는 회기중 국회의 동의없이 체포 또는 구금되지 아니한다.

        지방의회의 조직·권한·의원선거와 지방자치단체의 장의 선임방법 기타 지방자치단체의 조직과 운영에 관한 사항은 법률로 정한다. 한 회계연도를 넘어 계속하여 지출할 필요가 있을 때에는 정부는 연한을 정하여 계속비로서 국회의 의결을 얻어야 한다.

        국회는 국정을 감사하거나 특정한 국정사안에 대하여 조사할 수 있으며, 이에 필요한 서류의 제출 또는 증인의 출석과 증언이나 의견의 진술을 요구할 수 있다.

        대한민국은 국제평화의 유지에 노력하고 침략적 전쟁을 부인한다. 외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다. 정당은 그 목적·조직과 활동이 민주적이어야 하며, 국민의 정치적 의사형성에 참여하는데 필요한 조직을 가져야 한다.
    </div>

    <h4 id="content3">본문내용3</h4>
    <div>
        모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 국회의원은 현행범인인 경우를 제외하고는 회기중 국회의 동의없이 체포 또는 구금되지 아니한다.

        지방의회의 조직·권한·의원선거와 지방자치단체의 장의 선임방법 기타 지방자치단체의 조직과 운영에 관한 사항은 법률로 정한다. 한 회계연도를 넘어 계속하여 지출할 필요가 있을 때에는 정부는 연한을 정하여 계속비로서 국회의 의결을 얻어야 한다.

        국회는 국정을 감사하거나 특정한 국정사안에 대하여 조사할 수 있으며, 이에 필요한 서류의 제출 또는 증인의 출석과 증언이나 의견의 진술을 요구할 수 있다.

        대한민국은 국제평화의 유지에 노력하고 침략적 전쟁을 부인한다. 외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다. 정당은 그 목적·조직과 활동이 민주적이어야 하며, 국민의 정치적 의사형성에 참여하는데 필요한 조직을 가져야 한다.
    </div>


    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#menu">맨 위로</a>

</body>
</html>

 

 

=> 여기서 본문내용1을 클릭하게되면 아래에 본문내용1로 이동을 하게되고, 본문내용2을 클릭하게되면 본문내용2로 이동한다. (설정한 id로 이동함)

=> "맨 위로" 버튼을 클릭하게 되면 앞서 코드에서 id = "#menu"로 지정하였던 부분으로 이동하게된다.