다연이네

[days02] a 태그 역할 - 링크 외 책갈피, 경고창 띄우기, 메일 보내기 본문

Web/HTML

[days02] a 태그 역할 - 링크 외 책갈피, 경고창 띄우기, 메일 보내기

　다연　 2020. 12. 1. 17:39
반응형

1. <a href=""> </a>의 기능

 

  ① 링크 걸기

  ② 책갈피

  ③ 경고창

  ④ 메일 연결

 

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

<h3 id= "top">html 링크- 하이퍼링크</h3><!-- id라는 것은 모든 태그의 고유한값  -->
링크 - 다른 문서로 이동. <br>

<a href="https://www.naver.com" target="_blank" title="네이버">naver</a><br>

	 
	 
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>

<a href="javascript:window.alert('경고창 띄움')">자바스크립트 처리</a><br>
<!-- mailto: 사용자의 이메일 프로그램을 여는 링크 -->
<a href="mailto:hong@naver.com">send mail</a>

<h3 id="URL"> URL 설명</h3>
<pre >
URL(Uniform Resource Locators)
- 웹 주소 ipaddress 192.168.0.8
- URL 구성
	scheme://prefix.domain:port/path/filename
	예) http://localhost/webPro/html/days02/ex01.html
	
	ㄱ. scheme : (프로토콜) 일반적[ http, https ], ftp, file 인터넷 서비스 유형을 정의
	ㄴ. prefix 	: 도메인 접두사, http 기본값은 : www
	ㄷ. domain : ip 주소 대신에 사용할 인터넷 이름(도메인)
	ㄹ. port		: http 기본 port : 80 (도메인 주소 뒤에 80 생략된 것 )
	ㅁ. path		: 서버의 경로 webPro/html/days02 (있을수도 있고 없을수도 있죠)
	ㅂ. filename : ex01.html
	
	http://localhost/webPro/ 이렇게 주고 엔터 쳐보자
	=> 파일명이 없는데도 파일이 하나 뿌려진다 왜?
	=>WEB_INF 안의 web.xml의 welcome-file 중에 있는 파일 아무거나 하나 응답한다.
	
	
	네이버에 홍길동 검색, 갖다 붙힌후 ?와 query사이 지우기
	https://search.naver.com/search.naver?query=%ED%99%8D%EA%B8%B8%EB%8F%99
	아까는 "홍길동""이라고 나왔는데 여기는 %ED%99%8D%EA%B8%B8%EB%8F%99라고 나온다.
	(기억하자)
	- URL은 ASCII 문자 집합만 사용해서 인터넷을 통해서만 보낼 수 있다.
		그래서 ASCII 문자 셋에 없는 이외의 문자는 변환이 필요하다. 어떻게?
		%16진수값으로 변환해서 전송
		
	네이버에 ken ik 검색, 갖다 붙히기
	https://search.naver.com/search.naver?query=ken+ik
		ken공백ik -> ken+ik 전송
		->URL은 공백을 포함할 수 없다. 그래서 공백이 + 기호 또는 %20값으로 대체되어 전송된다.
</pre>



<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<a href="#top">맨 위로</a> <br>
<!-- a 링크태그의 2번째 용도(책갈피) 
			#top == id가 top인 곳으로 보내겠다-->
<a href="#URL">URL설명</a> <br>

<hr>
<!-- 버튼을 사용해서 링크 + javascript 코드 추가 -->
<!-- 클릭할때 click 이벤트를 javascript로 처리 -->
<button onclick="document.location='ex01.html'">ex0.html</button>
<!--button on이벤트명 -->
<!-- [암기] "document.location='ex01.html'"  해당 페이지로 이동-->


</body>
</html>

1 클릭시 네이버로 연결된다.

2 클릭시 경고창을 띄운다.

3 클릭시 이메일로 연결된다.

4 클릭시 맨 위로 이동한다.

5 클릭시 URL 설명 부분으로 이동한다.

6 클릭시 ex01.html로 이동한다.

반응형
저작자표시 비영리

'Web > HTML' 카테고리의 다른 글

[days02] 이미지 플로팅(Image Floating)  (0) 2020.12.01
[days02] a 태그를 사용해 네모 박스 클릭 / 이미지 올리기  (0) 2020.12.01
[days02] &땡땡땡;  (0) 2020.12.01
[days01] html 링크 - 페이지 간에 이동, 다른 문서로 이동  (0) 2020.11.30
[days01] <style type="text/css">  (0) 2020.11.30
'Web/HTML' Related Articles more
Comments