링크는 거의 모든 웹 페이지에서 찾을 수 있습니다. 링크를 통해 사용자는 페이지간에 클릭 할 수 있습니다.
| syntax |
| <a href="url">link text</a> |
| <a href="www.naver.com/">Visit Naver!</a> |
속성 attribute
| href | |
| 절대경로 | www.naver.com/ |
| 상대경로 | sub.html |
| 문서내 이동 | #content #만 작성한 경우 문서의 최상단으로 이동 javascript:; 를 작성하면 최상단 이동을 막을 수 있다. |
| 메일주소 링크 | mailto:aaa@naver.com |
| target | |
| _self | 기본. 클릭 한 것과 동일한 창 / 탭에서 문서를 엽니다. |
| _blank | 새 창 또는 탭에서 문서를 엽니다. |
| _parent | 상위 프레임에서 문서를 엽니다. |
| _top | 창 전체에 문서를 엽니다. |
※ target="_blank"로 작성하면, 스크린 리더에서 링크된 문서가 새탭에 표시된다는 것을 미리 알려주기도 한다.
※ 자바스크립트로 새 창을 경우 title 속성을 이용하여 미리 알려주어야 한다.
<a href="#" onclick="window.open('http://www.naver.com')"; return false" title="새 창">클릭</a>
※ 절대경로와 상대경로
| 절대경로 | 언제나 변하지 않는 경로로서, 사이트의 url주소를 사용하는 경우이다. <a href="https://www.w3schools.com/">Visit </a> |
| 상대경로 | 현재 파일의 위치를 기준으로 - 상위로 이동시 ../../.../파일명.html 로 접근 - 하위로 이동시 폴더명/파일명.html 로 접근 |
※ 앵커링크(skip navigation)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{color:#333; font-size:2.0em;}
header, footer, #container{border:1px solid #777;height:500px;}
</style>
</head>
<body>
<div id="skipNavigation">
<a href="#container">컨테이너로 바로가기</a>
</div>
<div id="wrap">
<header></header>
<div id="container">이곳은 컨테이너</div>
<footer></footer>
</div>
</body>
</html>
'UIUX Web Standard > COA Lab's HTML' 카테고리의 다른 글
| form 요소 (0) | 2021.01.20 |
|---|---|
| 기본태그연습 (0) | 2021.01.19 |
| 텍스트 요소 (0) | 2021.01.19 |
| a태그와 table태그 연습 (0) | 2021.01.19 |
| table tag (0) | 2021.01.19 |
