Deve.haeri

[HTML/기본] anchorTag 본문

HTML-CSS

[HTML/기본] anchorTag

hhaeri 2020. 11. 6. 23:07


링크 생성 태그 : <a>


1. href 속성 : 링크할 경로를 작성한다.
2. title 속성 : 링크에 마우스를 가져다대면 보여주는 풍선 도움말을 작성한다.
3. target 속성 : 어떤 창으로 이동할 것인지 결정한다.
 1) _self : 현재 창으로 이동한다.(기본 값)
 2) _blank : 새 창을 열고 이동한다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h3>이미지 링크</h3>
	<a href = "http://www.daum.net"><img alt = "다음사이트" src = "assets/images/logo.png" width = 20%></a>
	
	<h3>비어 있는 링크(이동이 없는 링크)</h3>
	<ul>
		<li>
			<a href = "#">클릭해도 이동이 없습니다.</a>
		</li>
		<li>
			<a href = "javascript:void(0)">클릭해도 이동이 없습니다.</a>
		</li>
	</ul>
	
	<h3>포털 링크</h3>
	<ul>
		<li>
			<a href = "http://www.naver.com" target="_self">N사</a>
		</li>
		<li>
			<a href = "http://www.google.com" target="_blank">G사</a>
		</li>
	</ul>
	
	<!--같은 페이지의 다른 위치로 이동  -->
	<!--  
		1. 위치 정보를 지정하는 경우 id 속성을 사용한다.
		2. id 속성은 한 페이지 내에서 중복이 없다.
		3. id 속성을 선택하는 경우 #id 방식을 사용한다.
	-->
	
	<!--네비게이션 메뉴 (목차)-->
	<h3 id = "gnb">메뉴</h3>
	<ol>
		<li><a href = "#overview">제품 개요</a></li>
		<li><a href = "#content">본문</a></li>
		<li><a href = "#qna">Q&amp;A</a></li>
		<li><a href = "#hugi">사용자의견</a></li>
	</ol>
	
	<h3 id = "overview">제품 개요</h3>
	<div>
	제품개요입니다.<br/>
	제품개요입니다.<br/>
	제품개요입니다.<br/>
	제품개요입니다.<br/>
	제품개요입니다.<br/>
	제품개요입니다.<br/>
	제품개요입니다.<br/>
	제품개요입니다.<br/>
	제품개요입니다.<br/>
	</div>
	
	<h3 id = "content">본문</h3>
	<div>
	본문입니다.<br/>
	본문입니다.<br/>
	본문입니다.<br/>
	본문입니다.<br/>
	본문입니다.<br/>
	본문입니다.<br/>
	본문입니다.<br/>
	본문입니다.<br/>
	본문입니다.<br/>
	본문입니다.<br/>
	</div>
	
	<h3 id = "qna">Q&amp;A</h3><!-- & : &amp; -->
	<div>
	Q&A입니다.<br/>
	Q&A입니다.<br/>
	Q&A입니다.<br/>
	Q&A입니다.<br/>
	Q&A입니다.<br/>
	Q&A입니다.<br/>
	Q&A입니다.<br/>
	Q&A입니다.<br/>
	Q&A입니다.<br/>
	Q&A입니다.<br/>
	</div>
	
	<h3 id = "hugi">사용자의견</h3>
	<div>
	사용자의견입니다.<br/>
	사용자의견입니다.<br/>
	사용자의견입니다.<br/>
	사용자의견입니다.<br/>
	사용자의견입니다.<br/>
	사용자의견입니다.<br/>
	사용자의견입니다.<br/>
	사용자의견입니다.<br/>
	사용자의견입니다.<br/>
	사용자의견입니다.<br/>
	사용자의견입니다.<br/>
	<h1><a href = '#gnb'>위로 이동</a></h1>
	</div>
    
</body>
</html>
저작자표시

'HTML-CSS' 카테고리의 다른 글

[HTML/기본] Table 태그  (0) 2020.11.06
[HTML/기본] ImageMap 태그  (0) 2020.11.06
[HTML/기본] Image  (0) 2020.11.06
[HTML/기본] Font  (0) 2020.11.06
[HTML/기본] metadata  (0) 2020.11.06
'HTML-CSS' Related Articles more
Comments