[HTML] 06_하이퍼링크 관련 태그

bbsm·2023년 2월 12일
0

학원 수업 복습

목록 보기
28/36

하이퍼링크 관련 태그 : a(anchor)태그

: a 태그는 현재 HTML문서와 다른 HTML문서를 연결해서 페이지 이동을 할 수 있게 하는 기능을 제공
=> 이 때, a태그로 감싸진 문자열 == 하이퍼링크

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

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

<a href="02_목록관련태그.html" target="_blank">02_목록 관련 태그</a>
* target 속성 : 연결된 문서를 어디에서 열 것인지 지정하는 속성 (기본값 : 같은 탭)
		_blank : 새 탭 == 비어있는 탭
 
<a href="https://www.naver.com" target="_blank">네이버로 이동</a>

이미지 클릭 시 페이지 이동
<a href="https://www.naver.com">
        <img src="./images/flowers/flower1.jpg" width="120px">
    </a>
    
    
한 페이지 내에서 이동하기(점프)

    <ul id="list">
        <li><a href="#cat1">고양이1</a></li>
        <li><a href="#cat2">고양이2</a></li>
        <li><a href="#cat3">고양이3</a></li>
    </ul>

    <h3 id="cat1">고양이1</h3>
    <img src="./images/cats/cat1.jpg"><br>
    <a href="#list">목록으로 이동</a>

    <h3 id="cat2">고양이2</h3>
    <img src="./images/cats/cat2.jpg"><br>
    <a href="#list">목록으로 이동</a>

    <h3 id="cat3">고양이3</h3>
    <img src="./images/cats/cat3.jpg"><br>
    <a href="#list">목록으로 이동</a>

0개의 댓글