[Html] 하이퍼링크 A태그 사용법 (색상변경,링크설명,창 형태)

하이퍼링크란 "연결된 개체"를 뜻합니다. 특정 부분을 클릭해 다른 페이지로 이동을 시켜주는 기능이며 여러 개의 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] 수평선 긋기 HR태그 사용법

[Html] 옆으로 움직이는 텍스트 만들기 (MarQuee)

[Html] 일정시간 후 다른페이지로 보내기 (메타태그 활용)

[Html] UI 태그, OL태그, DI태그, LI태그 사용법

 

댓글

Designed by JB FACTORY