[Html] 하이퍼링크 A태그 사용법 (색상변경,링크설명,창 형태)
- Web/HTML, CSS
- 2018. 6. 16.
하이퍼링크란 "연결된 개체"를 뜻합니다. 특정 부분을 클릭해 다른 페이지로 이동을 시켜주는 기능이며 여러 개의 HTML 문서를 하나의 고리처럼 연결할 수 있습니다. 인터넷의 특성상 모든 정보를 한 페이지에서 띄울 수 없어 정보가 여러페이지로 분산될 수 밖에 없는데 하이퍼링크를 사용하면 여러페이지를 하나의 고리처럼 엮을 수 있어 굉장히 다양하게 사용되고 있습니다. 이러한 하이퍼링크를 HTML의 A태그를 활용하여 간단하게 구현할 수 있습니다.
하이퍼링크 만들기
| 태그 | 속성 | 비고 |
| 하이퍼링크 <A>태그 | link | 방문하지 않은 하이퍼링크의 색상 |
| alink | 마우스로 클릭한 하이퍼링크의 색상 | |
| vlink | 이미 방문한 하이퍼 링크의 색상 | |
| href | 클릭시 이동시킬 페이지 | |
| title | 마우스 Over시 나올 링크의 설명 | |
| target | 이동시킬 페이지의 형태(새창,현재창에서 열기 등등) |
A태그에는 다양한 속성이 있는데 위에있는 속성들이 대표적입니다.
1. link는 아직 방문하지 않은 링크의 색상을 지정해줄 수 있습니다.
2. alink는 마우스로 클릭시 나타내는 링크색상을 지정해주는 속성입니다.
3. vlink는 방문한적이 있었던 사이트의 색을 지정해주는 속성입니다.
4. href는 그 태그를 클릭할 시 이동시킬 페이지의 주소입니다.
5. title은 마우스를 대고 있을때 팝업창으로 뜨는 간략한 메시지박스를 의미합니다.
6. target은 클릭시 전환되는 페이지가 띄워지는 방식인데 _blank(새창), _self(현재창), _top(부모의 창), _parent(가장 상위창) 이렇게 4가지 방식이 있습니다.
예제
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE>
<html>
<head>
<meta charset="EUC-KR">
<title>하이퍼링크 사용법</title>
</head>
<body link ="blue" vlink ="red" alink = "darkgreen"> <!-- 처음엔 파란색 그담엔 빨간색 -->
<a href = "http://www.naver.com">네이버 바로가기</a><br><br>
<!-- 페이지전환 -->
<a href = "http://coding-factory.tistory.com" title="코딩팩토리">코딩팩토리 바로가기</a><br><br>
<!-- 마우스 Over시 나올 내용 -->
<a href="http://coding-factory.tistory.com" target="_blank">코딩팩토리 바로가기</a>(_blan)<br><br>
<!-- 새창으로 열림 -->
<a href="http://coding-factory.tistory.com" target="_self">코딩팩토리 바로가기</a>(_self)<br><br>
<!-- 현재창에서 열림 -->
<a href="http://coding-factory.tistory.com" target="_top">코딩팩토리 바로가기</a>(_top)<br><br>
<!-- 부모의 창에서 열림 부모가 없으면 현재창에서 열림 -->
<a href="http://coding-factory.tistory.com" target="_parent">코딩팩토리 바로가기</a>(_parent)<br><br>
<!-- 가장 상위 창에서 열림 상위창이 없으면 현재창에서 열림 -->
<a href = "http://coding-factory.tistory.com">
<img src="C:/Users/user/Desktop/flower.jpg"> <!-- 이미지 경로 -->
</a>
<!-- 이미지에 하이퍼링크 걸기 -->
</body>
</html>
[Html] Font 속성/스타일 (굵기,기울기,밑줄,취소선)등등
[Html] 옆으로 움직이는 텍스트 만들기 (MarQuee)
'Web > HTML, CSS' 카테고리의 다른 글
| [Html] 일정시간 후 다른페이지로 보내기 (메타태그 활용) (0) | 2018.06.19 |
|---|---|
| [Html] 옆으로 움직이는 텍스트 만들기 (MarQuee) (5) | 2018.06.18 |
| [Html] 수평선 긋기 HR태그 사용법 (1) | 2018.06.15 |
| [Html] Font 속성/스타일 (굵기,기울기,밑줄,취소선)등등 (1) | 2018.06.14 |