반응형
HTML Links - Hyperlinks
HTML 링크는 하이퍼링크를 사용한다.
만약 링크를 클릭하게되면 링크에 해당하는 페이지로 넘어간다.
링크에 마우스를 가까이대면 클릭표시가 손표시로 바뀌는것을 볼 수 있다.
HTML Links - Syntax
HTML은 <a>를 사용해 하이퍼링크를 이용한다.
<a href="url">link text</a>여기서 중요한것은 href(하이퍼링크)를 받는 태그는 <a>이 url의 링크 위치를 나타낸다.
예시코드
<!DOCTYPE html>
<html>
<body>
<a href="https://naver.com">click this</a>
</body>
</html>
HTML Links - 링크에 이미지넣기
<a> 태그안에 <img>태그를 넣으면 된다.
아래와 같이 코드를 만들 경우 이미지를 클릭하면 내가 지정해둔 페이지로 넘어가게된다.
-> 즉 아래에서 사진을 클릭할 경우 네이버 홈페이지로 넘어간다.
<!DOCTYPE html>
<html>
<body>
<h2>Images as a Link</h2>
<p>The image below is a link. Try click on it</p>
<a href="http://naver.com"><img src="eximage.jpg"
alt="fish images" style="width:400px; height:800px;"> </a>
</body>
</html>->이미지 파일은 사용자가 직접 위치를 정해줘야 한다.
HTML Links - 이메일 주소 넣기
<a> 태그 안에 mailto를 통해 이메일 주소를 넣을 수 있다.
예를 들어 <a href="mailto:example@naver.com">로 작성할 경우 이 하이퍼링크를 누르면 이메일을 보낼 수 있게 나타나진다.
<!DOCTYPE html>
<html>
<body>
<h2>mail to address</h2>
<p>can send e-mail</p>
<a href="mailto:example@naver.com">Send email</a>
</body>
</html>
HTML Links - 버튼 안에 링크 넣기
HTML 버튼안에 링크안에 넣을 수 있다.
자바스크립트를 사용하면 버튼 클릭같은 특정 이벤트에서 발생할 수 있게 만들 수 있다.
<아래 코드는 아직 자바스크립트를 작성하지 못해 클릭을 해도 어떠한 이벤트 발생이 없다>
<!DOCTYPE html>
<html>
<body>
<h2>Button as a Links</h2>
<p>Click the button to go to the HTML tutorial.</p>
<button onclick="document.location='default.asp'">HTML Tutorial</button>
</body>
</html>
HTML Links - 타겟 속성
기본값으로 연결된 페이지는 현재의 윈도우 브라우 안에서 나타난다.
이것을 바꾸기위 link를 타겟할 수 있다.
target 속성은 링크된 페이지의 위치를 지정해준다.
target의 속성들은 다음과 같이 존재한다.
_self: 기본값으로 클릭한 곳과 동일 창/텝에서 페이지를 방문한다.
_blank: 새 창이나 탭에서 문서를 연다.
_parent: 상위 프레임에서 문서를 연다.
_top: 창 전체에 문서를 연다.
<!DOCTYPE html>
<html>
<body>
<h2>Example target Attribute</h2>
<p>This is example</p>
<a href="https://naver.com" target="_blank">target: _blank</a>
<br>
<a href="https://naver.com" target="_parent">target: _parent</a>
<br>
<a href="https://naver.com" target="_top">target: _top</a>
<br>
<a href="https://naver.com" target="_self">target: _self</a>
</body>
</html>반응형
'웹프로그래밍 > HTML' 카테고리의 다른 글
| HTML 이미지 스타일 우선순위 (0) | 2023.09.04 |
|---|---|
| HTML 속성(예제코드) (0) | 2023.09.03 |
| HTML Styles - CSS (0) | 2023.09.03 |
| HTML Styles 속성(텍스트, 배경색, 폰트, 폰트크기) (0) | 2023.09.03 |
| HTML 주석 (1) | 2023.09.03 |
댓글