티스토리 뷰
728x90
HTML 링크
링크는 거의 모든 웹 페이지에서 찾을 수 있습니다. 링크를 통해 사용자는 페이지에서 페이지로 이동할 수 있습니다.
링크를 클릭하면 다른 문서로 이동할 수 있습니다.
링크 위로 마우스를 이동하면 마우스 화살표가 작은 손 모양으로 바뀝니다.
참고: 링크는 텍스트일 필요가 없습니다. 링크는 이미지 또는 기타 HTML 요소가 될 수 있습니다!
단원 요약
- <a> 요소를 사용하여 링크 정의
- href 속성을 사용 하여 링크 주소 정의
- target속성을 사용 target하여 연결된 문서를 열 위치 정의
- <img>요소(내부 )를 사용 <a>하여 이미지를 링크로 사용
- mailto:속성 내부의 체계를 사용 href하여 사용자의 이메일 프로그램을 여는 링크 생성
HTML 링크 - 구문
HTML <a>태그는 하이퍼링크를 정의합니다. 다음 구문이 있습니다.
<a href="url">link text</a>
<a href="http://www.naver.com">네이버</a>- 요소 의 가장 중요한 속성은 링크의 목적지를 나타내는 속성입니다.<a>
- <a>: anchor의 약자이며 하이퍼링크를 의미한다.
- href: <a> tag에서 가장 중요한 속성이며 Hypertext Refernce의 약자이다. 또한, 연결할 주소를 지정 한다.
- 링크 텍스트는 독자에게 표시되는 부분입니다 .
- 링크 텍스트를 클릭하면 리더가 지정된 URL 주소로 전송됩니다.
HTML 링크 - 대상 속성
기본적으로 링크된 페이지는 현재 브라우저 창에 표시됩니다. 이를 변경하려면 링크에 대해 다른 대상을 지정해야 합니다.
속성 은 target연결된 문서를 열 위치를 지정합니다.
속성 은 target다음 값 중 하나를 가질 수 있습니다.
- _self- 기본. 클릭한 것과 동일한 창/탭에서 문서를 엽니다.
- _blank- 새 창이나 탭에서 문서를 엽니다.
- _parent- 부모 프레임에서 문서를 엽니다.
- _top- 창의 전체 본문에서 문서를 엽니다.
<a href="https://www.naver.com" target="_blank">naver</a>링크 제목
- title속성 은요소에 대한 추가 정보를 지정합니다.
- 정보는 마우스가 요소 위로 이동할 때 도구 설명 텍스트로 가장 자주 표시됩니다.
<a href="https://www.naver.com" target="_blank" title="네이버바로가기">naver</a>
Link State(상태)
기본적으로 링크는 모든 브라우저에서 다음과 같이 표시됩니다.
- 방문하지 않은 링크는 밑줄과 파란색
- 방문한 링크는 밑줄과 보라색
- 활성 링크는 밑줄과 빨간색으로 표시됩니다.
팁: 링크는 물론 CSS로 스타일을 지정하여 다른 모습을 얻을 수 있습니다!
| state | explanation |
| link | 한번도 방문한적 없는 상태.(디폴트 값) |
| visited | 한번이라도 방문한 상태 |
| hover | 링크위에 마우스를 올려놓은 상태 |
| active | 링크를 마우스로 누른 상태 |
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>HTML Link를 이용한 Bookmarker
HTML 링크를 사용하여 책갈피를 만들 수 있으므로 독자가 웹 페이지의 특정 부분으로 이동할 수 있습니다.
- 웹 페이지가 매우 긴 경우 책갈피가 유용할 수 있습니다.
- 책갈피를 만들려면 - 먼저 책갈피를 만든 다음 링크를 추가하세요.
- 링크를 클릭하면 페이지가 책갈피가 있는 위치까지 아래 또는 위로 스크롤됩니다.
- 먼저 id속성을 사용하여 책갈피를 만듭니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>하이퍼링크의 이해</title>
</head>
<body>
<h1>하이퍼 링크</h1>
<a href="http://www.naver.com" target="_blank" title="네이버 바로가기">네이버</a>
<hr>
<h2>책갈피 태그 연습</h2>
<p><a href="#sub01">1문단<a> <a href="#sub02">2문단<a><a href="#sub03">3문단<a></p>
<p style="height:500px;background: #ff0000;" id="sub01"> 1문단</p>
<a href="#top">위로바로가기</a>
<hr>
<p style="height:500px;background: #ff00ff;" id="sub02"> 2문단</p>
<a href="#top">위로바로가기</a>
<hr>
<p style="height:500px;background: #ffff00;" id="sub03"> 3문단</p>
<hr>
<a href="#top">위로바로가기</a>
</body>
</html>절대 URL과 상대 URL
절대경로 : 페이지와 상관없이 절대 변하지 않은 경로 (ex : http://www.naver.com)
상대경로 : 페이지의 위치에 따른 상대적 경로 (ex: ../page.html, ./page.html, page.html)
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="ch04_1.html" target="_blank">제04강</a></p>
HTML 링크 - 이미지를 링크로 사용
이미지를 링크로 사용하려면 <img> 태그 안에 태그를 넣으면 됩니다 <a>.
<a href="http://www.naver.com" target="_blank">
<img src="https://i.pinimg.com/564x/fb/71/04/fb71048e03a5ada757f70d61b583d0bf.jpg">
</a>
<h2>이미지 링크</h2>
<a href="http://www.tu.ac.kr" target="_blank"><img src="https://portal.tu.ac.kr/images/login/logo2.png"></a>이메일 주소 링크
mailto:속성 내부 를 사용 href하여 사용자의 이메일 프로그램을 여는 링크를 생성합니다.(새 이메일을 보낼 수 있도록 하기 위해):
<a href="mailto:baejungsoo#gmail.com">Send email</a>
모바일에서 전화걸기 링크
tel:속성 내부 를 사용 href하여 사용자의 전화연결프로그램을 여는 링크를 생성합니다. 모바일에서는 바로 전화걸기로 연결됨.
<p><a href="tel:01044745974">전화걸기</a></p>
728x90
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
반응형