5월 ~ 7월) 웹/web

39Day - 08_anchor / 09_map/ 10_iframe & left & right / 11_audio / 12_video / 13_action & form / 14_input

첼로그 2023. 5. 25. 18:14

08_anchor 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1 id = "top"> a 태그</h1>
	<hr>
	<!-- a 태그의 href 속성값으로 URL 주소를 설정하면 클릭 이벤트에 의해 페이지 이동 -->
	<!-- = URL 주소 뒤에 # 기호를 사용하여 태그 식별자(id 속성값)를 설정하면 해당 식별자의
	태그로 출력위치를 이동 - 앵커 -->
	<!-- 앵커(Anchor) : 출력 페이지에서 특정 태그의 위치로 스크롤을 이동하는 기능 -->
	<a href = "/web/html/08_anchor.html#product">제품소개</a>&nbsp;&nbsp;&nbsp;
	<a href = "08_anchor.html#review">구매후기</a>&nbsp;&nbsp;&nbsp;
	<!-- 동일한 웹문서에서 스크롤을 이동할 경우 요청 웹문서의 URL 주소 생략 가능 -->
	<a href = "#message">주의사항</a>
	<hr>
	<!-- id 속성 : 태그를 구분하기 위한 식별자(고유값)를 속성값으로 설정 -->
	<h3 id = "product">제품소개</h3>
	<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>
	<hr>
	<h3 id = "review">구매후기</h3>
	<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>
	<hr>
	<h3 id ="message">주의사항</h3>
	<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>
</body>
</html>

 

 

 

09_map

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>map 태그</h1>
	<hr>
	<!-- usemap 속성 : map 태그의 이름을 속성값으로 설정 -->
	<img alt="이미지 링크" src = "/web/html/images/map.png" usemap="#favorites">
	
	<!-- map 태그 : 하나의 이미지에서 영역을 구분해 하이퍼링크 기능을 제공하기 위한 태그 -->
	<!-- => 하위태그 : area -->
	<!-- name 속성 : 태그의 이름을 속성값으로 설정 -->
	<map name = "favorites">
		<!-- area 태그 : 이미지에서 영역을 구분하기 위한 태그 -->
		<!-- shape 속성 : 영역을 구분하기 위한 도형을 속성값으로 설정 - 속성값 : rect(기본), circle, poly 등 -->
		<!-- coords 속성 : 영역을 구분하기 위한 도형의 좌표값을 속성값으로 설정 -->
		<area alt = "트위터" shape="rect" coords="0,0,129,117" href="https://twitter.com" target="_blank">
		<area alt = "페이스북" shape="rect" coords="129,0,248,117" href="https://facebook.com" target="_blank">
	</map>
</body>
</html>

 

 

10_iframe & left & right 

 

iframe

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>iframe 태그</h1>
	<hr>
	<!-- iframe 태그 : 브라우저에 내장 브라우저를 생성하여 다른 웹문서를 출력하기 위한
	기능을 제공하기 위한 태그 -->
	<!-- src 속성 : 내장 브라우저로 요청할 웹문서(웹프로그램)의 URL 주소를 속성값으로 설정 -->
	<!-- width 속성 : 박스모델의 폭를 속성값으로 설정 -->
	<!-- height 속성 : 박스모델의 높이를 속성값으로 설정 -->
	<!-- <iframe src="https://www.daum.net" width="600" height="500"></iframe> -->
	
	<iframe src = "/web/html/10_left.html" width="600" height="500" name="left"></iframe>
	<iframe src = "10_right.html" width="600" height="500" name="right"></iframe>
</body>
</html>

left (왼쪽)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>왼쪽 페이지</h1>
	<hr>
	<p><a href = "https://www.daum.net" target="right">다음</a></p>
</body>
</html>

 

 

right  (오른쪽)

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>오른쪽 페이지</h1>
	<hr>
</body>
</html>

 

메인페이지
[왼쪽] 클릭할경우

 

11_audio 

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>audio 태그</h1>
	<hr>
	<!-- audio 태그 : 음향파일을 제공받아 재생하는 태그 -->
	<!-- => embed 태그 : 플래시 재생, object 태그 : 멀티미디어 파일 재생 -->
	<!-- => 음향파일 : mp3 / ogg 파일 등 -->
	<!-- autoplay 속성 : 자동 재생 기능을 제공하는 속성 - 속성값 생략 가능 -->
	<!-- controls 속성 : 재생 관련 제어판을 제공하기 위한 속성 - 속성값 생략 가능 -->
	<!-- loop 속성 : 반복 재생을 제공하기 위한 속성 - 속성값 생략 가능 -->
	<!-- preload 속성 : none, metadata, auto(기본) 중 하나를 속성값으로 설정 -->
	<!--  
	<audio src="/web/html/audio/horse.mp3" autoplay="autoplay" controls="controls" 
		loop="loop" preload="auto"></audio>
	<audio src="/web/html/audio/horse.ogg" autoplay="autoplay" controls="controls" 
		loop="loop" preload="auto"></audio>
	-->	
	
	<audio controls = "controls">
		<!-- source 태그 : 멀티미디어 파일을 제공하기 위한 태그 -->
		<!-- type 속성 : 파일의 형태(MimeType)를 속성값으로 설정 -->
		<source src = "/web/html/audio/horse.ogg" type="audio/ogg">
		<source src = "/web/html/audio/horse.mp3" type="audio/mp3">
	</audio>	
</body>
</html>

 

 

12_video 

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>video 태그</h1>
	<hr>
	<!-- video 태그 : 동영상파일을 제공받아 재생하는 태그 -->
	<!-- > 동영상파일 : mp4 파일, ogg(ogv) 파일, webm 파일 등 -->
	<video src = "/web/html/video/movie.mp4" autoplay="autoplay" controls="controls" width="600"></video>
	
</body>
</html>

 

13_action & form

action 

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>form 태그</h1>
	<hr>
	<p>form 태그를 이용하여 요청한 웹프로그램 - 전달값(사용자 입력값)을 제공받아 처리</p>
	
	<!-- a 태그를 사용하면 클릭 이벤트를 이용해 웹프로그램을 GET 방식으로 요청 -->
	<!-- > href 속성값으로 요청한 웹프로그램의 URL 주소를 설정 -->
	<!-- > 요청 웹프로그램에 값을 전달하고자 할 경우 질의문자열을 작성하여 전달 -->
	<!-- URL 주소는 영문자,숫자,일부 특수문자로만 작성 가능하므로 질의문자열을 작성할
	경우 영문자,숫자,일부 특수문자을 제외한 문자값은 정상적인 전달이 불가능 -->
	<!-- > 영문자,숫자,일부 특수문자을 제외한 문자값은 부호화 처리하면 정상적인 전달 가능 - Java 또는 JavaScript -->
	<!-- <p><a href="13_form.html?name=홍길동">[입력페이지 이동]</a></p> -->
	<p><a href = "13_form.html?name=HongGilDong">[입력페이지 이동]</a></p>
</body>
</html>

 

form

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>form 태그</h1>
	<hr>
	<!-- form 태그 : 웹프로그램을 요청하여 사용자로부터 입력받은 값을 전달하는 태그 -->
	<!-- => 하위태그로 반드시 사용자로부터 값을 입력받기 위한 입력태그와 제출 이벤트을
	발생하는 태그를 반드시 작성 -->
	<!-- 제출 이벤트(Submit Event) : form 태그를 사용하여 웹프로그램을 요청하기 위한 이벤트 -->
	
	<!-- action 속성 : form 태그를 사용하여 요청할 웹프로그램의 URL 주소를 속성값으로 설정 -->
	
	<!-- method 속성 : 웹프로그램을 요청하는 요청방식(GET - 기본 또는 POST)을 속성값으로 설정 -->
	<!-- > 웹프로그램의 요청방식에 따라 사용자 입력값을 전달하는 방법이 상이 -->
	
	<!-- GET : 사용자 입력값을 URL 주소의 질의문자열(QueryString)으로 전달 -->
	<!-- > 보안을 필요로 하지 않는 소량의 값을 전달할 때 사용하는 요청방식 -->

	<!-- POST : 사용자 입력값을 리퀘스트 메세지의 몸체부에 저장하여 전달 -->

	<!-- > 보안을 필요로 하거나 대량의 값을 전달할 때 사용하는 요청방식 -->
	<!-- 리퀘스트 메세지(Request Message) : 클라이언트의 모든 정보를 담아 웹프로그램에게 전달하기 위한 객체 -->
	<!-- > 머릿부(Header)와 몸체부(Body)로 구성되어 있으며 GET 방식으로 웹프로그램을 요청한 경우 리퀘스트 메세지의 몸체부 미사용 -->
	
	<!-- enctype 속성 : [application/x-www-form-urlencoded] - 기본, [multipart/form-data],[text/plain] 중 하나를 속성값으로 설정 -->
	<!-- > application/x-www-form-urlencoded : 사용자 입력값을 문자값으로 전달 -->
	<!-- > multipart/form-data : 사용자 입력값을 원시값으로 전달 - 파일을 입력받아 전달 -->
	<!-- > text/plain : 사용자 입력값을 문자값으로 전달 -->
	<form action="13_action.html" method="get" enctype="application/x-www-form-urlencoded">
		<!-- 입력태그 : 사용자로부터 값을 입력받기 위한 태그 - input, textarea, select 등 -->
		아이디 : <input type="text" name="id"><br>
		비밀번호 : <input type="password" name="passwd"><br>
		
		<!-- 제출 이벤트(Submit Event)를 발생하는 태그 - input, button 등 -->
		<!-- > 제출 이벤트가 발생되면 form 태그가 동작되어 브라우저의 주소창이 action 속성값으로
		설정된 URL 주소로 변경되어 웹프로그램을 요청하며 입력태그에 입력된 값을 전달하여 처리
		결과를 응답받아 출력 - 페이지 이동 -->
		<!-- button 태그 : 버튼을 출력하는 태그 -->
		<!-- type 속성 : button, submit(기본), reset 중 하나를 속성값으로 설정 -->
		<!-- > type 속성값을 [submit]으로 설정한 경우 버튼을 클릭하면 제출 이벤트 발생 -->
		<button type="submit">로그인</button>
	</form>
</body>
</html>

 

 

14_input

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>input 태그</h1>
	<hr>
	<!-- input 태그 : 사용지로부터 값을 입력받기 위한 태그 - 입력태그 -->
	<!-- type 속성 : 값을 입력받기 위한 형태를 속성값으로 설정 -->
	<!-- name 속성 : 태그의 이름을 속성값으로 설정 - 전달값을 구분하기 위한 식별자 -->
	<!-- value 속성 : 입력태그의 초기값을 속성값으로 설정 -->
	<!-- size 속성 : 입력태그의 크기를 속성값으로 설정 -->
	<!-- maxlength 속성 : 최대 입력 가능한 문자의 갯수를 속성값으로 설정 -->
	<!-- autofocus 속성(HTML5) : 입력태그에 입력촛점(Focus)을 제공하는 속성 - 속성값 생략 가능 -->
	
	<!-- required 속성(HTML5) : 필수 입력값을 설정하기 위한 속성 - 속성값 생략 가능 -->
	<!-- > required 속성이 구현된 입력태그에 입력값이 없는 경우 form 태그 미동작 -->
	
	<!-- placeholder 속성(HTML5) : 입력태그의 입력값에 대한 설명을 속성값으로 설정 -->
	<!-- > placeholder 속성이 구현된 입력태그에 입력값이 입력되면 설명문 자동 소멸 -->
	
	<!-- readonly 속성 : 입력태그를 읽기 전용으로 사용하기 위한 속성 - 속성값 생략 가능 -->
	<!-- disabled 속성 : 입력태그를 비활성화 처리하기 위한 속성 - 속성값 생략 가능 -->
	<!-- checked 속성 : 우선 선택을 제공하기 위한 속성 - 속성값 생략 가능 -->
	<!-- min 속성 : 입력 가능한 최소값을 속성값으로 설정 -->
	<!-- max 속성 : 입력 가능한 최대값을 속성값으로 설정 -->
	
	<!-- type 속성값 -->
	<!-- > hidden : 입력태그를 숨겨 사용자로부터 값을 입력받지 않고 요청 웹프로그램에게 필요한 값 전달 -->	
	<!-- > text : 문자값을 입력받아 전달 -->	
	<!-- > password : 문자값을 입력받아 전달 - 입력값이 특정문자로 변환되어 표시 -->	
	<!-- > radio : name 속성값이 같은 입력태그 중 하나를 선택하여 전달 -->	
	<!-- > checkbox : name 속성값이 같은 입력태그 중 한개 이상을 선택하여 전달 -->	
	<!-- > file : 파일을 입력받아 전달 -->	
	<!-- > email(HTML5) : 이메일을 입력받아 전달 - 이메일 형식에 검증 처리 -->	
	<!-- > number(HTML5) : 숫자 형식의 문자값을 입력받아 전달(증가 또는 감소 버튼 제공) 
		- 숫자 형식의 문자값만 입력 가능하여 최소값 및 최대값 검증 가능 -->	
	<!-- > tel(HTML5) : 전화번호 형식의 문자값을 입력받아 전달 - 스마트기기의 입력패드로 변경 -->	
	<!-- > url(HTML5) : URL 형식의 문자값을 입력받아 전달 - 스마트기기의 입력패드로 변경 -->	
	<!-- > search(HTML5) : 검색 관련 문자값을 입력받아 전달 - 스마트기기의 자동 완성기능 시용 -->	
	<!-- > color(HTML5) : 색을 선택하여 색상값(#RRGGBB)을 전달 -->	
	<!-- > range(HTML5) : 등급을 선택하여 등급값 전달 - min 속성과 max 속성으로 등급의 범위 설정 -->
	<!-- > date(HTML5) : 날짜 형식의 문자값을 입력받아 전달 - 날짜를 선택할 수 있는 박스모델 제공 -->
	<!-- > time(HTML5) : 시간 형식의 문자값을 입력받아 전달 - 시간를 선택할 수 있는 박스모델 제공 -->
	<!-- > datetime-local(HTML5) : 날짜와 시간 형식의 문자값을 입력받아 전달 - 날짜와 시간를 선택할 수 있는 박스모델 제공 -->
		
	<form action = "#" method = "post">
		<input type ="hidden" name ="num" value = "1000">
		<p>아이디 : <input type = "text" name = "id" size = "10" maxlength = "20" autofocus = "autofocus" required = "required"></p>
		<p>비밀번호 : <input type ="password" nam e= "passwd" placeholder = "형식에 맞는 비밀번호 입력"></p>
		<p>이름 : <input type = "text" name = "name"  value = "홍길동" readonly="readonly"></p>
		<p>성별 : <input type = "radio" name = "gender"  value = "M">남자
			<input type ="radio" name ="gender" value ="W" checked ="checked">여자</p>
		<p>취미 : <input typ ="checkbox" name="hobby" value =" 독서">독서
			<input type ="checkbox" name ="hobby" value ="게임">게임
			<input type = "checkbox" name ="hobby" value ="등산">등산
			<input type ="checkbox" name ="hobby" value ="낚시">낚시</p>
		<p>사진 : <input type ="file" name ="profile"></p>	
		<p>이메일 : <input type ="email" name ="email"></p>
		<p>나이 : <input type ="number" name ="age" min ="1" max ="100"></p>			
		<p>전화번호 : <input type ="tel" name ="phone"></p>
		<p>SNS : <input type ="url" name ="sns"></p>			
		<p>검색 : <input type ="search" name ="keyword"></p>
		<p>좋아하는 색 : <input type ="color" name ="color"></p>
		<p>실력 : 하<input type ="range" name ="grade" min ="1" max = "3">상</p>
		<p>생년월일 : <input type ="date" name ="birthday"></p>
		<p>기상시간 : <input type ="time" name ="uptime"></p>
		<p>알람 : <input type ="datetime-local" name ="alram"></p>
			
		<button type = "submit">회원가입</button>		
	</form>
</body>
</html>

 

저작자표시 (새창열림)