HTML - <a> 다른문서로 이동하는 태그

웹언어/HTML 2017. 4. 30. 18:53

HTML - <a> 다른문서로 이동하는 태그

이전글 :

HTML이란? - http://server-talk.tistory.com/1

HTML - 기본 구조의 HTML 문서 만들기 - http://server-talk.tistory.com/101

HTML - 문법과 주의사항 - http://server-talk.tistory.com/102

HTML - 목록을 만드는 태그 - http://server-talk.tistory.com/103

HTML - <br>태그, <p>태그 - - http://server-talk.tistory.com/104

HTML - <div>, <span> 태그 - - http://server-talk.tistory.com/105

HTML 기본구조 - 시멘틱 태그 - http://server-talk.tistory.com/106

<a> 태그 다른문서로 이동하는 태그

<a> 태그는 anchor '정박지' 또는 '닻'의 약자이며 <a>태그는 혼자만 사용하지 않고 속성을 함께 사용하여야 합니다.

herf 속성

hypertext reference 약자로 연결할 주소를 지정하는 속성입니다.

<html>
	<head>
		<meta charset="utf-8">
		<title>다른문서로 이동하는 태그</title>
	</head>

	<body>
		
		<a href="https://www.google.co.kr/">구글</a>

	</body>

</html>

주의 : href에서 따옴표(" ")를 빠트리면 링크가 정상적으로 나오지 않습니다.

target 속성

target : 링크된 페이지가 나타날 창을 정하며, 기본적으로 지정해 주지 않으면 현재페이지를 다른곳으로 넘어갑니다.

target의 종류 및 기능

1) target="_top" : 링크시킨 html 문서를 프레임 구조의 형태를 완전히 벗어나서 Open 된 브라우저 화면을 열도록 합니다.

2) target="_blank" : 링크시킨 html 문서를 기존 프레임 구조의 브라우저는 그대로 놔두고 새로운 브라우저(새창)에서 열게 합니다.

3) target="parent" : 기본의 프레임 구조(frameset)를 완전히 벗어나서, 현재의 프레임구조로 들어오기 이전의 한 단계 상위 페이지로 올라가도록 링크합니다.

4) target_self : 하이퍼링크 시킨 문서를 같은 프레임에서 열게 합니다. 기본으로 설정 되어 있는 속성입니다.

이미지로 링크걸기

그림에 마우스를 클릭하면 그림에 걸려있는 링크로 이동시킵니다.

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>이미지로 링크 걸기</title>
	</head>

	<body>
		<a href="https://google.com"><img src="img/google.png" border="0"></a>
	</body>
</html>

* 이미지의 링크에서 위의 border="0" 속성은 반드시 필요합니다. 링크시킬 때 그림에 태두리를 0으로 속성이기 때문입니다.