하이퍼링크 태그 a / 속성 href, target, title, download

하이퍼 링크 태그 - a

href : 이동할 페이지 경로, 첨부파일 경로

target : 페이지 이동시 출력할 창

title : 툴팁 표시, 어떤 태그에서도 사용이 가능

download : 첨부파일 처럼 다운로드 설정

href

이동할 페이지 경로

절대경로, 상대경로 / 이미지, 비디오, 오디오 삽입 태그

이미지, 동영상(비디오), 오디오 삽입 태그 절대경로 / 상대경로 절대경로 root folder(최상위 폴더)를 기준, 고유한(절대적인) 경로로 접근하는 방법 상대경로 현재 파일을 기준으로 접근하는 방법

jinaon.tistory.com

target

_blank	링크로 연결된 문서를 새 창이나 새 탭에서 연다.
_self	링크로 연결된 문서를 현재 프레임에서 연다. (default)
_parent	링크로 연결된 문서를 부모 프레임에서 연다.
_top	링크로 연결된 문서를 현재 창의 가장 상위 프레임에서 연다.
frame 이름	링크로 연결된 문서를 지정된 프레임에서 연다.

<a href = "/Step01/person_info.html" target="_blank> person_info.html 페이지 이동 </a> <br>

새탭에서 열도록 지정했다.

<a href="/Step02/video/구름.mp4" target="view">동영상 링크</a>
    <hr>
    <iframe src="" frameborder="0" width="1280" height="640" name="view"></iframe>

iframe이름을 view로 지정했고, 하이퍼링크 target을 view로 지정했다.

하이퍼링크가 view 자리에 열린다.

download

<a href="/Step02/video/구름.mp4" download>동영상 파일</a>

download 속성 넣으면, 링크 클릭시 첨부파일로 동영상이 다운로드 된다.

title

<a href="/Step02/video.html" target="_blank" title="동영상 페이지 이동"> 비디오 파일로 이동</a>

링크에 마우스를 대면 "동영상 페이지 이동" 이라는 툴팁이 표시된다.

<body>
    <a href = "/Step01/person_info.html"> person_info.html 페이지 이동 </a> <br>
    <a href="/Step02/video.html" target="_blank" title="동영상 페이지 이동"> 비디오 파일로 이동</a><br>
    <a href="/Step02/img/cat.jpg">이미지 링크</a><br>
    <a href="/tag_list.txt"> 텍스트 파일</a><br>
    <a href="/Step02/video/구름.mp4" download>동영상 파일</a>
</body>

html, 이미지, 텍스트, 동영상 파일로 이동할 수 있는 하이퍼링크를 만들었다.

 <a href="/Step02/img/cat.jpg">
        <img src="/Step02/img/cat.jpg" width="100">
    </a>

하이퍼링크는 글씨 외의 것들에도 걸 수가 있다. a 태그 사이에 이미지태그를 넣어 이미지에 하이퍼링크를 연결했다.

'WEB > HTML' 카테고리의 다른 글

HTML input 태그 : form / input / label / select / textarea (1)	2022.05.27
HTML 표(Table) 만들기 - table, tr, th, td 태그 (1)	2022.05.26
하이퍼링크로 북마크 연결하기 (2)	2022.05.25
절대경로, 상대경로 / 이미지, 비디오, 오디오 삽입 태그 (0)	2022.05.25
HTML 샘플 / 텍스트 태그 / 목록 태그 (li, ul, ol) (1)	2022.05.25

Develop Me