[HTML 2-3] 🌟alink 태그

임승현·2022년 11월 8일

HTML

목록 보기

4/9

🌟a 태그

📍a 태그 : 클릭 이벤트로 웹프로그램(웹문서)을 요청하기 위한 정보를 제공하는 태그

→ 클릭 이벤트를 이용하여 페이지 이동을 위해 사용 - 하이퍼 링크(Hyper Link) 기능

◈ href 속성 : 클릭 이벤트 발생시 요청할 웹프로그램(웹문서)의 URL 주소를 속성값으로 설정
→ a 태그의 내용(텍스트 또는 이미지)을 클릭한 경우 웹브라우저 주소창의 URL 주소가 href 속성값으로
변경되고 URL 주소의 웹프로그램(웹문서)을 실행하여 응답결과를 제공받아 출력 - 페이지 이동

◈ 요청 URL 주소에 뒤에 ? 기호를 붙이고 [이름=값&이름=값&...] 형식으로 요청 웹프로그램에게
값 전달 가능 - 질의문자열(QueryString)을 이용한 값 전달
◈ target 속성 : 웹자원을 요청하는 브라우저를 속성값으로 설정
→ 속성값 : _self(현재 브라우저 - 기본), _blank(새로운 브라우저), _top(최상위 브라우저)
, _parent(부모 브라우저), _child(자식 브라우저), iframe 태그의 name 속성값(내장 브라우저) 등

📃07_alink.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>a 태그</h1>
	<hr>
	<!-- a 태그 : 클릭 이벤트로 웹프로그램(웹문서)을 요청하기 위한 정보를 제공하는 태그 -->
	<!-- → 클릭 이벤트를 이용하여 페이지 이동을 위해 사용 - 하이퍼 링크(Hyper Link) 기능 -->
	<!-- href 속성 : 클릭 이벤트 발생시 요청할 웹프로그램(웹문서)의 URL 주소를 속성값으로 설정 -->
	<!-- → a 태그의 내용(텍스트 또는 이미지)을 클릭한 경우 웹브라우저 주소창의 URL 주소가 href 속성값으로 
	변경되고 URL 주소의 웹프로그램(웹문서)을 실행하여 응답결과를 제공받아 출력 - 페이지 이동 -->
	<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>&nbsp;&nbsp;&nbsp;
	<hr>
	<!-- 요청 URL 주소에 뒤에 ? 기호를 붙이고 [이름=값&이름=값&...] 형식으로 요청 웹프로그램에게
	값 전달 가능 - 질의문자열(QueryString)을 이용한 값 전달 -->
	<!-- target 속성 : 웹자원을 요청하는 브라우저를 속성값으로 설정 -->
	<!-- → 속성값 : _self(현재 브라우저 - 기본), _blank(새로운 브라우저), _top(최상위 브라우저)
	, _parent(부모 브라우저), _child(자식 브라우저), iframe 태그의 name 속성값(내장 브라우저) 등 -->
	<a href="/web/html/07_kor.html?name=kim" 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>

───────────────────────────────────────
※ 한글로 이미지 클릭

───────────────────────────────────────
※ 영어로 이미지 클릭

📃07_kor.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>안녕하세요.</h1>
</body>
</html>

📃07_eng.html

<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>Hello.</h1>
</body>
</html>

[HTML 2-3] 🌟alink 태그

HTML

🌟a 태그

📍a 태그 : 클릭 이벤트로 웹프로그램(웹문서)을 요청하기 위한 정보를 제공하는 태그

📃07_alink.html

📃07_kor.html

📃07_eng.html

[HTML 2-2] img•li•dl•table•body 태그

[HTML 3-1] anchor•map•iframe•details 태그

0개의 댓글