Frontend/HTML

[HTML]07_a 태그

sukii 2023. 12. 25. 06:04
반응형

⚫a 태그 : 클릭 이벤트로 웹문서(웹프로그램)을 GET 방식으로 요청하기 위한 태그

=> 하이퍼링크(Hyper Link) 기능을 제공하는 태그 - 페이지를 연결하여 출력 처리(페이지 새로 고침) 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>a 태그</h1>
	<hr>
	<!-- href 속성 : 클릭 이벤트가 발생될 경우 요청할 웹문서(웹프로그램)의 URL 주소를 속성값으로 설정 -->
	<!-- => 태그내용(텍스트 또는 이미지)을 클릭한 경우 클라이언트 브라우저 주소창의 URL 주소가
	변경되어 웹문서(웹프로그램)을 요청하여 결과(HTML 문서)를 응답받아 출력 처리 -->
	<a href="https://www.daum.net">다음</a>&nbsp;&nbsp;&nbsp;
	<a href="https://www.naver.com">네이버</a>&nbsp;&nbsp;&nbsp;
	<a href="https://www.google.com">구글</a>
	<hr>
	<!-- target 속성 : _self(현재 브라우저 - 기본), _blank(새로운 브라우저), _top(최상위 브라우저), 
	_parent(부모 브라우저), _child(자식 브라우저), iframe 태그(내부 브라우저)의 name 속성값
	 중 하나를 속성값으로 설정 -->
	<a href="/web/html/07_kor.html" target="_blank"><img alt="한글" src="/web/html/images/kor.png"></a>
	<a href="07_eng.html" target="_blank"><img alt="영어" src="images/eng.png"></a>
</body>
</html>

 

실행결과⬇️

 

 

🔘a태그를 이용하여 이동할 페이지를 만들기 위해 kor.html 과 eng.html 문서 작성

eng.html 문서👩‍💻 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>Hello</h1>
	<hr>
	<a href="/web/html/07_a.html">[home]</a>
</body>
</html>

 

'영어로' 버튼 클릭시 이동페이지⬇️

kor.html 문서👩‍💻

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>안녕</h1>
	<hr>
	<a href="/web/html/07_a.html">[home]</a>
</body>
</html>

 

'한글로' 버튼 클릭시 이동페이지 ⬇️

반응형