Please Enable JavaScript!
Gon[ Enable JavaScript ]

HTML 하이퍼링크 a 태그로 사이트 연결하기

웹 프로그래밍/HTML
반응형

하이퍼링크는 동영상, 이미지, 문서, HTML 페이지, 동영상 등 파일과 문서의 연결 고리 역할을 합니다. 파일이면 다운로드를 할 수 있고, HTML 페이지 라면 해당 페이지로 이동을 합니다. 아주 흔하게 쓰이는 태그로 속성 4가지에 대해 샘플을 통해서 사용법을 알아 보겠습니다. 

 

 

 

 

하이퍼링크는 연결된 개체를 말합니다. 인터넷의 가장 큰 장점으로 한정된 지면에 흩어져 있는 데이터들을 하나로 통합하는 역할을 합니다. 그래서 인터넷 웹 페이지에서는 <a> 태그를 많이 쓸 수 밖에 없습니다. <a> 태그의 주요 속성은 다음과 같습니다.

 

l  href : 연결하고 싶은 주소를 지정한다.

l  name : 연결하고 싶은 위치의 이름을 지정한다. HTML5 부터는 사용하지 않는다.

l  target : 링크를 클릭했을 때 창의 형태를 지정한다. _blank/_sef/_top/_bottom 4가지 종류가 있다.

l  title : 링크에 대한 설명이 들어간다.

 

그럼 각 속성별로 어떻게 적용되는지 샘플을 통해서 알아 보도록 하겠습니다.

 

 

 

href, title 속성

 

 

 

href Hypertext Reference 의 약자이며 속성의 값으로 이동 경로를 입력하면 됩니다. 문법은 간단합니다. <a href=”연결 주소”> 내용 </a> 이며 기본 값으로 파란색 밑줄이 적용됩니다. 내용을 클릭하면 연결 주소로 이동하게 되겠죠. title 속성은 링크에 대한 설명인데 마우스로 가져가면 <img> 태그의 title 속성처럼 설명이 나타납니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
</style>
</head>
<body>
	<a href="http://mainia.tistory.com" title="녹두장군 블로그">
		나의 블로그
	</a>
</body>
</html>

 

HTML 하이퍼링크 a 태그로 사이트 연결하기

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법
HTML 입력양식 input 태그 HTML5 추가된 type 타입 대한 설명
윈도우 메모장에 HTML 문서 작성하는 방법
HTML 단락 들여쓰기 blockquote 태그 사용하는 방법
HTML form 태그 사용하는 다양한

 

 

 

target 속성

 

 

 

링크한 창을 어떻게 열지 결정하는 속성입니다. 속성의 값은 아래와 같습니다. 주로 사용되는 속성은 _blank _self 입니다. 새로운 창으로 열 것인지 아니면 링크한 창에서 이동할 것인지 결정하는 값이죠.

 

l  _blank : 새 창 이나 탭이 열리게 됩니다. 

l  _self : 연결 문서를 클릭한 창에서 열리게 됩니다.

l  _parent : 부모 창에서 열리며 부모창이 없다면 _self 와 같습니다.

l  _top : 가장 상위 창에서 열립니다. 상위 창이 없다면 _self 와 같습니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
</style>
</head>
<body>
	<a href="http://mainia.tistory.com" target="_blank">
		녹두장군 블로그  
	</a>(_blan) <br/><br/>
	<a href="http://mainia.tistory.com" target="_self">
		녹두장군 블로그  
	</a>(_self)<br/><br/>
	<a href="http://mainia.tistory.com" target="_top">
		녹두장군 블로그 
	</a> (_top)<br/><br/>
	<a href="http://mainia.tistory.com" target="_parent">
		녹두장군 블로그  
	</a>(_parent)
</body>
</html>

 

HTML 하이퍼링크 a 태그로 사이트 연결하기

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법
HTML 입력양식 input 태그 HTML5 추가된 type 타입 대한 설명
윈도우 메모장에 HTML 문서 작성하는 방법
HTML 단락 들여쓰기 blockquote 태그 사용하는 방법
HTML form 태그 사용하는 다양한
반응형
Posted by 녹두장군1
,