728x90
수업내용
1교시 (09:30-10:20)
- URI와 URL
URI vs URL
-------------
I : identifier
최종 자원, 차아야할 디렉토리 : 폴더
L : location
최종 자원, 찾아야할 자원 : 파일
빅데이터 : 데이터를 모은 것 : 매집
OPEN API
국가 -> 민간에 자원을 공유
data.go.kr : 회원 등록
민간인 사용하려 할 때 사용하는 기술 : OPEN Api
=====================================================
숙제 내용 URI 는 위치로 찾아가게 하는 것이 아니라, 아이디로 매핑시켜놓는것이다.
따라서 사용자에게 파일 이름, 위치 노출이 되지 않는다.
http://localhost:8088/firstWeb/I
<http://localhost:8088/I
URL은 자원을 '서버에 있는 폴더' 위치로 찾아간다.
URL은 URI지만 URI는 모두 URL은 아니다. (URI가 URL을 포함한다.)
http://localhost:8088/firstWeb/html/hello.html =====================================================
2교시 (10:30-11:20)
- HTML : Hyper Text Markup Language
---------------------------------------
태그 tag <html></html>
요소 element <시작태그 속성1="속성값1" 속성2="속성값2">내용</끝태그>
속성 attribute
내용 contents
웹문서
------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<titme>웹 문서</title>
</head>
<body>
<h1>웹 문서</h1>
<h1>form 태그</h1>
<hr>
<p>
<div class="abc">
<form>
<input type="text" name="id" />
<input type="text" name="pw" />
<input type="submit" value="보내기" />
</form>
</div>
<div id="a"></div>
</body>
</html>
------------------------------------------------
웹 문서를
|
| 브라우저 엔진
|
DOM Tree
------------------------------------------------
<html>
<head>
<title>
<body>
<h1>
<h1>
<hr>
<p>
<div class="abc">
<form>
<input>
<input>
<input>
<div id="a">
배열로 본다.
배열 인덱스 0 : html
배열 인덱스 1 : head, body
배열 인덱스 3 : h1_1, h1_2, h2, hr, p, div, divform
배열 인덱스 4 : form
배열 인덱스 5 : input_0, input_1, input_2
------------------------------------------------
웹문서 ---> document ---> DOM : Document Object Model
노드 node : 웹문서를 DOM으로 읽어서 DOM Tree를 만들 때
엘리먼트, 어트리뷰트, 컨텐츠
3교시 (11:30-12:20)
- form tag
<form> 폼 태그
웹 문서에서 HTML 태그를 이용해서
웹 서버로 데이터를 전송하는(요청하는) 유일한 방법이다.
-----------------------
<form [속성="속성값"]>
폼 요소
</form>
form 태그 속성
---------------------
name 자바스크립트, jQuery, CSS로 폼을 제어할 때 사용하는 폼 이름 지정
id 자바스크립트, jQuery, CSS자바스크립트로 폼을 제어할 때 사용하는 폼 이름 지정
method 폼 요소 내용을 서버 쪽 프로그램에 넘겨주는 방식 지정
get 256 ~ 3096byte 서버로 전송 가능
웹 브라우저 주소 표시줄에 사용자가 입력한 내용이 표시 됨
http://localhost:8088/firstWeb/html/formGetTest.html?id=%EB%B0%95%EA%B1%B4%EC%9B%90&pw=1234#
클라이언트가 요청한 정보가 http 프로토콜 요청 정보가
요청 Header 부분에 담아서 전송된다.
post 입력한 내용의 길이에 제한을 받지 않음
웹 브라우저 주소 표시줄에 내용 표시 안됨
http://localhost:8088/firstWeb/html/formPostTest.html#
클라이언트가 요청한 정보는 http 프로토콜 요청 정보의
요청 body 부분에 담아서 전송된다.
HTTP 프로토콜 요청 Request, 응답 Response
요청 GET Request
------------------------
Header
http://localhost:8088/firstWeb/html/formGetTest.html
id=%EB%B0%95%EA%B1%B4%EC%9B%90
&
pw=1234# <-- 쿼리 스트링 Query String key=value&key=value
------------------------
------------------------
Body
------------------------
요청 POST Request
------------------------
Header
http://localhost:8088/firstWeb/html/formPostTest.html#
------------------------
------------------------
Body
id=%EB%B0%95%EA%B1%B4%EC%9B%90
&
pw=1234#
------------------------
응답 Response
------------------------
Header
------------------------
------------------------
Body
------------------------
action form 태그 안의 내용을 처리해 줄 서버 프로그램을 지정
<input> 사용자 입력을 위한 태그
--------------------------
input 태그의 type 속성
--------------------------
텍스트와 비밀번호 type="text" type="password"
체크 박스와 라디오 type="checkbox", type="submit"
전송, 리셋 버튼 type="submit", type="reset"
이미지 버튼 type="image"
기본 버튼 type="button"
파일을 첨부하는 type="file"
히든 필드 type="hidden"
search 검색할 때 입력하는 필드
url URL 주소를 입력하는 필드
email 이메일 주소를 입력하는 필드
tel 전화번호를 입력하는 필드
number 숫자를 조절할 수 있는 스핀 박스
range 숫자를 조절할 수 있는 슬라이드 막대
date 사용자 지역을 기준으로 날짜(연,월,일)
month 사용자 지역을 기준으로 날짜(연,월)
week 사용자 지역을 기준으로 날짜(연,주)
time 사용자 지역을 기준으로 시간(시,분,초,분할초)
datetime 국제 표준시(UTC)로 설정된 날짜와 시간(연,월,일,시,분,초,분할초)
datetime-local 사용자가 있는 지역을 기준으로 날짜와 시간(연,월,일,시,분,초,분할초)
4교시 (12:30-13:20)
- formGetTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FORM TEST</title>
</head>
<body>
<h2>FORM TEST GET 방식</h2>
<hr>
<!--
http://localhost:8088/firstWeb/html/formGetTest.html?id=%EB%B0%95%EA%B1%B4%EC%9B%90&pw=1234# 아이디와 비밀번호가 다 보임
-->
<form method="GET" action="#">
아이디 : <input type="text" name="id"><br>
비밀번호 : <input type="text" name="pw"><br>
<input type="submit" value="GET방식"><br>
</form>
</body>
</html>- formPostTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FORM TEST</title>
</head>
<body>
<h2>FORM TEST POST 방식</h2>
<!--
http://localhost:8088/firstWeb/html/formPostTest.html# 가려짐
-->
<form method="POST" action="#">
아이디 : <input type="text" name="id"><br>
비밀번호 : <input type="text" name="id"><br>
<input type="submit" value="POST방식"><br>
</form>
</body>
</html>5교시 (14:30-15:20)
- hello.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Hello Jsp !!! <br>
<%
out.println("Hello JSP !!!");
out.println("<hr>");
java.util.Date d = new java.util.Date();
out.println("Date >>> : " + d + "<br>");
String id = request.getParameter("id");
String pw = request.getParameter("pw");
System.out.println("id >>> : " + id);
System.out.println("pw >>> : " + pw);
out.println("id >>> : " + id + "<br>");
out.println("pw >>> : " + pw + "<br>");
%>
</body>
</html>
- formGetTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FORM TEST</title>
</head>
<body>
<h2>FORM TEST GET 방식</h2>
<hr>
<!--
http://localhost:8088/firstWeb/html/formGetTest.html?id=%EB%B0%95%EA%B1%B4%EC%9B%90&pw=1234#
action="http://localhost:8088/firstWeb/jsp/hello.jsp"
-->
<form method="GET" action="/firstWeb/jsp">
아이디 : <input type="text" name="id"><br>
비밀번호 : <input type="text" name="pw"><br>
<input type="submit" value="GET방식"><br>
</form>
</body>
</html>6교시 (15:30-16:20)
- html5_5.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
<style>
#container {
width:600px;
margin:10px auto;
}
</style>
</head>
<body>
<div id="container">
<h1>회원 가입을 환영합니다</h1>
<form>
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li>
<label for="uid">아이디</label>
<input type="text" id="uid" autofocus placeholder="4자 ~ 10자 사이, 공백없이" required>
</li>
<li>
<label for="umail">이메일</label>
<input type="email" id=umail" required>
</li>
<li>
<label for="pwd1">비밀번호</label>
<input type="password" id="pwd1" placeholder="문자와 숫자, 특수 기호 포함" required>
</li>
<li>
<label for="pwd2">비밀번호 확인</label>
<input type="password" id="pwd2" required>
</li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type="radio" name="mailing" id="mailing_y" value="mailing_yes">
<label for="mailing_y">메일 수신</label>
<input type="radio" name="mailing" id="mailing_n" value="mailing_no" checked>
<label for="mailing_n">메일 수신 안 함</label>
</fieldset>
<div id="buttons">
<input type="submit" value="가입하기">
<input type="reset" value="취소">
</div>
</form>
</div>
</body>
</html>
- html5_5.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5_5 요청 데이터 받기</title>
</head>
<body>
<h3>html5_5 요청 데이터 받기</h3>
<hr>
<%
String uid = request.getParameter("uid");
String umail = request.getParameter("umail");
String pwd1 = request.getParameter("pwd1");
String mailing = request.getParameter("mailing");
System.out.println("html5_5.html 파일 form 태그에서 전송된 요청 정보를 ");
System.out.println("html5_5.jsp jsp 파일에서 받아서 콘솔에 출력하기");
System.out.println("uid >>> : " + uid);
System.out.println("umail >>> : " + umail);
System.out.println("pwd1 >>> : " + pwd1);
System.out.println("mailing >>> : " + mailing);
out.println("html5_5.html 파일 form 태그에서 전송된 요청 정보를 " + "<br>");
out.println("html5_5.jsp jsp 파일에서 받아서 브라우저에 출력하기" + "<br>");
out.println("uid >>> : " + uid + "<br>");
out.println("umail >>> : " + umail + "<br>");
out.println("pwd1 >>> : " + pwd1 + "<br>");
out.println("mailing >>> : " + mailing + "<br>");
%>
</body>
</html>
- html5_5.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
<style>
#container {
width:600px;
margin:10px auto;
}
</style>
</head>
<body>
<div id="container">
<h1>회원 가입을 환영합니다</h1>
<form name="" id=""
method="GET"
action="/firstWeb/jsp/html5_5.jsp">
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li>
<label for="uid">아이디</label>
<input type="text" id="uid" autofocus placeholder="4자 ~ 10자 사이, 공백없이" required>
</li>
<li>
<label for="umail">이메일</label>
<input type="email" id="umail" required>
</li>
<li>
<label for="pwd1">비밀번호</label>
<input type="password" id="pwd1" placeholder="문자와 숫자, 특수 기호 포함" required>
</li>
<li>
<label for="pwd2">비밀번호 확인</label>
<input type="password" id="pwd2" required>
</li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type="radio" name="mailing" id="mailing_y" value="mailing_yes">
<label for="mailing_y">메일 수신</label>
<input type="radio" name="mailing" id="mailing_n" value="mailing_no" checked>
<label for="mailing_n">메일 수신 안 함</label>
</fieldset>
<div id="buttons">
<input type="submit" value="가입하기">
<input type="reset" value="취소">
</div>
</form>
</div>
</body>
</html>
데이터를 넘겨 가입하기 누르기
7교시 (16:30-17:20)
- css_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
</head>
<body>
<h1>CSS Cascading style sheets</h1>
<h3>블록 레벨 block-level 요소 h1, div, p 태그</h3>
<h3>인라인 레벨 inline-level 요소 span, img, strong</h3>
<hr>
<div>내일 죽을 것처럼 <span class="accent">오늘</span>을 살고</div>
<p>영원히 살 것처럼 <br>내일을 꿈꾸어라. </p>
<p>
박스모델 box-model 요소<br>
-------------------------<br>
콘텐츠 영역<br>
박스와 콘텐츠 영역 사이의 여백 패딩 padding<br>
박스의 테두리 border<br>
박스 모델 사이의 여백이 마진 margin<br>
</p>
<img src="/firstWeb/images/box_model.PNG">
</body>
</html>
- css_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
* {
margin: 0;
}
</style>
</head>
<body>
<h1>CSS Cascading style sheets</h1>
<h3>블록 레벨 block-level 요소 h1, div, p 태그</h3>
<h3>인라인 레벨 inline-level 요소 span, img, strong</h3>
<hr>
<div>내일 죽을 것처럼 <span class="accect">오늘</span>을 살고</div>
<p>영원히 살 것처럼 <br>코딩을 하라. </p>
<p>
박스모델 box-model 요소<br>
-----------------------<br>
콘텐츠 영역<br>
박스와 콘텐츠 영역 사이의 여백 패딩 padding<br>
박스의 테두리 border<br>
박스 모델 사이의 여백이 마진 margin<br>
</p>
<img src="/firstWeb/images/box_model.PNG">
</body>
</html>
- css_3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
body * {
border:1px solid blue;
}
.accent {
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<h1>CSS Cascading style sheets</h1>
<h3>블록 레벨 block-level 요소 h1, div, p 태그</h3>
<h3>인라인 레벨 inline-level 요소 span, img, strong</h3>
<hr>
<div>내일 죽을 것처럼 <span class="accent">오늘</span>을 살고</div>
<p>영원히 살 것처럼 <br>코딩을 하라. </p>
<p>
박스모델 box-model 요소<br>
-----------------------<br>
콘텐츠 영역<br>
박스와 콘텐츠 영역 사이의 여백 패딩 padding<br>
박스의 테두리 border<br>
박스 모델 사이의 여백이 마진 margin<br>
</p>
<img src="/firstWeb/images/box_model.PNG">
</body>
</html>
8교시 (17:30-18:30)
- html_5_6.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5_6 요청 데이터 받기</title>
</head>
<body>
<h3>html5_6 요청 데이터 받기</h3>
<hr>
<%
String uid = request.getParameter("uid");
String umail = request.getParameter("umail");
String pwd1 = request.getParameter("pwd1");
String path = request.getParameter("path");
String memo = request.getParameter("memo");
String mailing = request.getParameter("mailing");
System.out.println("html5_6.html 파일 form 태그에서 전송된 요청 정보를 ");
System.out.println("html5_6.jsp jsp 파일에서 받아와 콘솔에 출력하기");
System.out.println("uid >>> : " + uid);
System.out.println("umail >>> : " + umail);
System.out.println("pwd1 >>> : " + pwd1);
System.out.println("path >>> : " + path);
System.out.println("memo >>> : " + memo);
System.out.println("mailing >>> : " + mailing);
out.println("html5_6.html 파일 form 태그에서 전송된 요청 정보를 " + "<br>");
out.println("html5_6.jsp jsp 파일에서 받아서 브라우저에 출력하기" + "<br>");
out.println("uid >>> : " + uid + "<br>");
out.println("umail >>> : " + umail + "<br>");
out.println("pwd1 >>> : " + pwd1 + "<br>");
out.println("memo >>> : " + memo + "<br>");
out.println("mailing >>> : " + mailing + "<br>");
%>
</body>
</html>- html_5_6.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
<style>
#container {
width:600px;
margin:10px auto;
}
</style>
<link rel="stylesheet" href="/firstWeb/css/register.css">
</head>
<body>
<div id="container">
<h1>회원 가입을 환영합니다.</h1>
<!--
http://localhost:8088/firstWeb/jsp/html5_6.jsp
-->
<form name="memForm" id="memForm"
method="get"
action="/firstWeb/jsp/html5_6.jsp">
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li>
<label for="uid">아이디</label>
<input type="text" name="uid" id="uid" value="aaaaa"
autofocus placeholder="4자 ~ 10자 사이, 공백없이" required>
</li>
<li>
<label for="umail">이메일</label>
<input type="text" name="umail" id="umail" required>
</li>
<li>
<label for="pwd1">비밀번호</label>
<input type="password" name="pwd1" id="pwd1"
placeholder="문자와 숫자, 특수 기호 포함" required>
</li>
<li>
<label for="pwd2">비밀번호 확인</label>
<input type="password" id="pwd2" required>
</li>
<li>
<label for="path">가입 경로</label>
<select name="path" id="path">
<option value="blog">블로그</option>
<option value="search">검색</option>
<option value="sns">SNS</option>
<option value="etc">기타</option>
</select>
</li>
<li>
<label for="memo">메모</label>
<textarea name="memo" cols="40" rows="4"
placeholder="남길 말씀이 있다면 여기에"></textarea>
</li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type="radio" name="mailing" id="mailing_y" value="mailing_yes">
<label for="mailiung_y">메일 수신</label>
<input type="radio" name="mailing" id="mailing_n" value="mailing_no" checked>
<label for="mailing_n">메일 수신 안 함</label>
</fieldset>
<div id="buttons">
<input type="submit" value="가입하기">
<input type="reset" value="취소">
</div>
</form>
</div>
</body>
</html>
정보를 입력한 후 가입하기 클릭
Notes
728x90
'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글
| 22-03-25(금) 040일차 [HTML, JavaScript, JSP] jsp와 jQuery 기초 (0) | 2022.05.14 |
|---|---|
| 22-03-24(목) 039일차 [HTML, JavaScript] (0) | 2022.05.14 |
| 22-03-22(화) 037일차 [HTML] HTML5의 작동과 태그 (0) | 2022.05.12 |
| 22-03-21(월) 036일차 [HTML, JSP] Tomcat 다운로드 및 플러그인, HTML (0) | 2022.05.12 |
| 22-03-18(금) 035일차 [Java, Oracle, Network] 웹이란 (0) | 2022.05.11 |