HTML [a 태그와 하이퍼링크, 앵커, 다운로드 링크]

pexe99·2021년 3월 21일
0

HTML

목록 보기
4/6

📚<a> 태그

📝하이퍼링크란?

**하이퍼링크(Hyperlink)**는 다른 html 페이지로의 연결 고리이다. 같은 웹 사이트의 다른 html 페이지는 물론이고, 다른 웹 사이트의 html페이지도 연결이 가능하다.

하이퍼링크는 <a></a> 태그와 href 속성으로 만들 수 있다. a는 anchor, href는 hyperlink reference의 줄임말이다.

또한 target 속성으로 어디에 하이퍼링크로 연결한 문서가 나타날지 지정해줄 수 있다.

👉예시 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>하이퍼 링크</title>
    </head>
    <body>
        <a href="www.naver.com">네이버</a>
        <a href="https://www.apple.com/kr/">
        <img src="이미지 경로"></a>
    </body>
</html>

a 태그 사이에 텍스트나 이미지를 넣어 텍스와 이미지에 하이퍼링크를 걸 수 있다.

👉target 속성

target 속성에 지정할 수 있는 값에 따른 결과는 아래와 같다.

  • target="_blank" : 새로운 웹 브라우저 창에 열기
  • target="_self" : 현재 웹 브라우저 창에 열기
  • target="_parent" : 부모 창에서 열기
  • target="_top" : 전체 웹 브라우저 창에서 가장 상위의 창에서 열기

여기서 parent와 top은 부모 창이 존재하지 않을 경우 _self 속성으로 처리된다.
또한 target 속성을 따로 지정하지 않았을 경우의 디폴트 값은 _self이다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>하이퍼 링크 target 속성</title>
    </head>
    <body>
        <a href="www.naver.com" target="_blank">새 창에서 열기</a>
        <a href="www.naver.com" target="_self">현재 창에서 열기</a>
        <a href="www.naver.com" target="_parent">부모 창에서 열기</a>
        <a href="www.naver.com" target="_top">상위 창에서 열기</a>         
    </body>
</html>

📝앵커

앵커란 한 페이지 내에 특정 위치의 링크를 만드는 기능을 말한다. 앵커 기능은 id 속성과 href 속성을 이용해 구현한다.

id 속성은 고유한 식별을 목적으로 사용하는 태그다. 쉽게 말해 특정 태그에 id를 달아준다고 생각하면 된다. 형태는 아래와 같다.

<h1 id="아이디 이름">텍스트</h>

앵커는 위와 같이 만들 수 있다. 이 앵커로 이동할 수 있는 방법은 하이퍼링크를 만들 때와 비슷하다. 위의 앵커로 이동할 수 있는 하이퍼링크는 아래와 같다.

<a href="#아이디 이름">앵커 하이퍼링크</a>

👉예시 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>앵커 예시</title>
    </head>
    <body>
        <ul>
        <li><a href="#제목">제목으로 이동</a></li>
        <li><a href="#1장">1장으로 이동</a></li>
        <li><a href="#2장">2장으로 이동</a></li>
        <li><a href="#3장">3장으로 이동</a></li>
        </ul>

        <h1 id="제목">앵커 예시</h1>
        <p>
            적당한 텍스트
        </p>
        <h1 id="1장">1장</h1>
        <p>
            적당한 텍스트
        </p>
        <h1 id="2장">2장</h1>
        <p>
            적당한 텍스트
        </p>
        <h1 id="3장">3장</h1>
        <p>
            적당한 텍스트
        </p>
    </body>
</html>

📝다운로드 링크

우리가 흔히 파일을 다운로드 받는 그 링크가 맞다. 하이퍼링크에서 href 속성의 주소값을 파일의 경로로, 그 뒤에는 download 속성을 추가해주기만 하면 된다

👉예시 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>다운로드 링크</title>
    </head>
    <body>
        <ul>
        <li><a href="week2/media/apple.jpeg" download>사과 이미지 다운</a></li>
        <li><a href="week2/media/banana.jpg" download>바나나 이미지 다운</a></li>
        </ul>
    </body>
</html>

download 속성에 아래와 같이 값을 정해주면 다운로드 파일의 이름도 변경할 수 있다.

<a href="week2/media/apple.jpeg" download="사과.jpeg">사과 이미지 다운</a>
profile
INHA UNIV. COMPUTER ENGINEERING STUDENT

관심 있을 만한 포스트

0개의 댓글