3. 하이퍼링크

-<a> 태그

하이퍼링크로 이동하는 HTML 페이지의 url은 a태그의 href속성으로 지정한다. 화면상에는 <a>와 </a> 사이의 텍스트 혹은 이미지가 출력된다.

    <h3>하이퍼링크 만들기</h3>
    <a href="https://www.naver.com/" target="_blank">네이버</a><br><br>

 

 

-target속성

a에 사용할 수 있는 속성 중에서 target 속성에 따라 브라우저의 열리는 형식이 달라진다.

• _blank : 새 윈도우
• _self : 현재 윈도우
• _parent : 부모 윈도우
• _top : 전체 브라우저 윈도우

    <a href="https://www.naver.com/" target="_blank">네이버</a><br>
    <a href="https://google.com/" target="_self">구글</a><br>
    <a href="https://youtube.com/" target="_parent">유튜브</a><br>
    <a href="https://facebook.com/" target="_top">페이스북</a><br>

 

 

- 앵커

본문에서 id 속성을 부여해 앵커 이름을 지정하면, 그 부분에 앵커가 만들어진다. 이 앵커는 #앵커이름 형식으로 연결해서 하이퍼링크를 만들 수 있다.

    <h3>a 태그의 앵커이동 만들기</h3>
    <ul>
        <li><a href="#love">Love me tender</a></li>
        <li><a href="#can">Can't help falling in love</a></li>
        <li><a href="#it">It''s now or never</a></li>
    </ul>    
<h3 id="love">Love me tender</h3>
..
..
<h3 id="can">Can't help falling in love</h3>
..
..
<h3 id="it">It''s now or never</h3>

다음과 같이 지정해놓으면 본문의 앵커를 지정해놓은 곳으로 이동할 수 있다.

 

 

-<a>의 다운로드 링크 만들기

<a>의 내부에 파일 경로와 파일, download 속성을 걸어두면 파일을 다운로드 할 수 있는 링크를 만든다.

 <h3>a태그의 다운로드 속성(html5 지원)</h3>
    <hr>
    <ul>
        <li><a href="media/Elvis.png" download="download">앨비스 이미지 다운로드</a><br></li>
        <li><a href="media/chapter9.pdf" download>chapter9.pdf 다운로드</a><br></li>
        <li><a href="media/EmbraceableYou.mp3" download>mp3 다운로드</a><br></li>
        <li><a href="ex2.html" download>html다운로드</a><br></li>
        <li><a href="media/test.hwp" download>한글파일 다운로드</a></li>
    </ul>

이 때 일반 html파일일 때는 웹에서 지원하는 확장자는 실행하고, 지원하지 않는 확장자만 다운로드 한다. 전체 확장자에 다운로드 속성을 걸기 위해서는 웹서버를 열어야한다.