[HTML] 하이퍼링크 태그 <a>, href, title, target
2021. 6. 21. 02:17
728x90
01 하이퍼링크 태그
- 클릭시 원하는 페이지 (웹주소) 로 이동시키는 태그.
01-1 문법
<a href="링크주소">HTML 링크</a>href: 이동할 웹사이트 주소.title: 툴팁, 웹 접근성 스크린리더가 읽는 부분. 영향을 미치지 않음, 자세하기 쓰기를 권장.target: 이동할 페이지가 나타낼 탭, iframe을 선택.
01-2 target 속성
이동할 페이지가 나타낼 탭.
| target 속성값 | 설명 |
| _blank | 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. |
| _self | 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정) |
| _parent | 링크로 연결된 문서를 부모 프레임(frame)에서 오픈. |
| _top | 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈. |
| 프레임(frame) 이름 | 링크로 연결된 문서를 지정된 프레임(frame)에서 오픈. |
01-3 링크의 상태
| 링크의 상태 | 설명 |
| link | 아직 한 번도 방문한 적이 없는 상태 (기본설정) |
| visited | 한 번이라도 방문한 적이 있는 상태 |
| hover | 링크 위에 마우스를 올려놓은 상태 |
| active | 링크를 마우스로 누르고 있는 상태 |
02 코딩
02-1 기본 코딩
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>하이퍼 링크 태그</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<!--구글, 네이버 이동하는 링크-->
<a href="https://www.google.co.kr" target="_blank">구글로 이동</a><br>
<a href="https://www.naver.co.kr" title="네이버 웹사이트로 이동">네이버로 이동</a>
<hr>
<a href="/Step03/img.html">이미지 태그 예제 페이지</a><br>
<a href="../Step03/img.html">이미지 태그 예제 페이지</a>
</body>
</html>
02-2 download / tel: / sms: / mailto:
download: 파일 다운로드.tel:: 전화번호.sms:: 문자.mailto:: 이메일.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Download</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<a href="0617tag.txt" download="">텍스트 파일 다운로드</a><br>
<a href="/images/cat_cute.jpg" download="">이미지 파일 다운로드</a><br>
<a href="/Step03//Cat-64547.mp4" download="">동영상 파일 다운로드</a>
<hr>
<a href="tel:01000001234">전화걸기</a><br>
<a href="sms:01000001234">문자 보내기</a><br>
<a href="mailto:test@gmail.com">메일 보내기</a>
</body>
</html>728x90
'HTML > Study' 카테고리의 다른 글
| [HTML] 테이블 태그 <table>, <tr>, <td>, <th>, colspan, rowspan (1) | 2021.06.21 |
|---|---|
| [HTML] 하이퍼링크 태그 (HTML 책갈피) <a> 태그의 name 속성 (1) | 2021.06.21 |
| [HTML] 이미지 태그 <img>, src, alt / 멀티미디어 태그 <video>, <audio> (1) | 2021.06.21 |
| [HTML] 목록 태그 <ul>, <ol>, <li>, <dl>, <dt>, <dd> (1) | 2021.06.19 |
| [HTML] 텍스트 태그 <br>, <b>, <strong>, <u>, <i>, <em>, <mark>, <hr> (1) | 2021.06.19 |
