하이퍼링크 관련 태그 (23.06.07)

·2023년 6월 7일
0

HTML

목록 보기
8/9
post-thumbnail

📝 a

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

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

📌 a 태그를 이용한 하이퍼링크 구현

💡 target 속성

연결된 문서를 어디에서 열 것인지 지정하는 속성

  • 기본값 : 같은 탭
  • _blank : 비어있는 탭 == 새 탭
   <ul>
        <li>
            <a href="01_글자관련태그.html">01_글자 관련 태그</a>
        </li>

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

        <li>
            <a href="https://www.naver.com" target="_blank">네이버로 이동</a>
        </li>
    </ul>


📌 이미지 클릭 시 페이지 이동

    <a href="https://iei.or.kr/main/main.kh">
        <img src="https://iei.or.kr/resources/images/main/logo.svg">
    </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>

profile
풀스택 개발자 기록집 📁

0개의 댓글