Data Scientist 옌

매일 발전하는 IT문제해결사

국비지원교육 (22.01-22.07)/강의노트

22-03-24(목) 039일차 [HTML, JavaScript]

옌炎 2022. 5. 14. 00:32
728x90

수업내용


1교시 (09:30-10:20)

  • form 태그
    웹문서(html 태그로 만든 문서)에서 웹 서버로
    데이터를 요청할 수 있는 유일한 태그

    웹 문서에서 웹 서버로 데이터를 요청할 수 있는 방법 : request
    1. form 태그
    2. XMLHttpRequest 객체
    3. Ajax (XMLHttpRequest 객체를 가지고 구글 엔지니어가 만든 형식)

    form 속성 attribute
    id form 태그의 유일한 이름
    name form 태그의 이름
    method 요청할 때 데이터 보내는 방식을 정하기
    get, post, put, delete, update ..
        get
            1. 사이즈 제한 있다.
                HTTP1.0: 500바이트 정도, HTTP1.1: 제한이 없음
        get 256~4096byte 서버로 전송 가능
        2. 요청 데이터를 header에 전송
        post
        1. 사이즈 제한 없음
            2. 요청 데이터를 header에 전송
            action 웹 서버의 파일 위치 및 파일의 이름 또는 별칭(앨리어스)

    HTTP 프로토콜
    request 요청
        헤더
        바디
    response 응답
        헤더
            서버에서 잘 동작을 해서 결과를 잘 만들어서 클라이언트에게 전달할 때: 200
            요청한 정보에서 요청한 파일을 찾지 못하면: 404
            요청한 정보를 파일을 잘 찾아서 일하다가 서버에서 에러가 나면 : 500
        바디
             헤더에서 200번일 때만
            바디 태그에서 응답 정보를 전송한다.

    서버에 요청 정보를 보낼 때
    form 태그에 있는 input 태그의 type 속성 정해서(선택해서)
    input 태그의 name 속성에 서버에 보내고자하는 정보를 담아서 보낸다.
    서버에서는 jsp인 경우
        request.getParameter("input 태그의 name 속성의 이름");
    리퀘스트의 객체에 있는 getParameter 함수의 인자로
    input 태그의 name 속성의 이름으로 받아온다.

2교시 (10:30-11:20)

  • 자바스크립트
    브라우저              렌더링 엔진                            자바스크립트 엔진
    -------------------------------------------------------------------------------
    Chrome                블링크(Blink) <- 웹킷(Webkit)      V8
    Firefox                 게코(Gecko)                             스파이더몽키(SpiderMonkey)
    Internet Explorer    트라이덴트                              차크라(Chakra)
    Safari                   웹킷(Webkit)                           자바스크립트코어(JavascriptCore)
    Opera                  블링크(Blink)                            V8

    자바스크립트는
    웹 브라우저에서 자바스크립트 소스 읽고 처리하는 해석기 javascript interpreter로 구동한다.
    자바스크립트는 웹 문서에서 <script> 태그를 이용해서 작성한다.

    =============================================
    https://www.ecma-international.org/

    ECMA 스크립트 ECMAScript 또는 ES
    Ecma International이 ECMA-262 기술 규칙에 따라
    정의하고 있는 표준화된 스크립트 프로그래밍 언어.

    넷스케이프가 표준화를 위해 자바스크립트 기술 규격을
    Ecma 인터내셔널에 제출하고, 이 규격에 대한 작업은
    ECMA-262의 이름으로 1996년 11월부터 시작
    ECMA-262의 초판은 1997년 6월에 채택

    ECMA-262 10개 판이 출판, 10판 표준은 2019년 6월 

    3판 1999년6월
    5.1판 2011년6월
    6판 2015년6월 ECMAScript 2015, ES2015, ES6
    ~~
    10판 2019년6월 ECMAScript 2019, ES2019, ES10
    매년 6월에 출판 2022년 버전도 나와있음
    =============================================

3교시 (11:30-12:20)

  • 자바스크립트 객체
    자바스크립트가 브라우저를 바라볼 때 사용하는 객체 : screen navigator history location document

  • 자바스크립트
    자바 자료형 
    ------------------
    1. 기초 자료형 : 원시 자료형 : 원시 타입 : primitive type
    2. 참조 자료형 : 객체 자료형 : 객체 타입 : reference type

    자바스크립트 자료형 : var , let, const
    ---------------
    원시 타입
    -------
    숫자 정수, 실수 : 따옴표 없이 숫자로만 표시 
    var b = 2000;
    문자 작은따옴표 '2022' 큰따옴표 "Hello!" 
    a b 따옴표(쿼테이션)을 사용 않하면 null 을 구분자로 인식
    숫자를 따옴표로 묶으면 문자로 인식 : 문자 숫자
    var g = "Hello!";
    var n = '2022';
    논리 true, false
    var isEmpty = true;
    undefined 자료형이 지정되지 않았을 때의 상태
    변수를 선언하고 값을 할당하지 않은 변수
    없는 객체의 프로퍼티를 읽으려고 시도했을 때의 값
    없는 배열의 요소를 읽으려고 시도했을 때의 값
    아무것도 반환하지 않는 함수가 반환하는 값
    함수를 호출했을 때 전달받지 못한 인수의 값
    null 값이 유효하지 않은 상태

    객체 타입
    -------
    객체
    객체 리터럴로 객체 생성하기 
    var card = {suit:"하트", rank:"A"};
    var card1 = {"suit":"하트", "rank":"A"};
    객체 리터럴, 리터럴 객체 : {....}
    변수 card
    프로퍼티 이름 : suit, "suit"
    프로퍼티 값 : "하트", "A"
    배열
    배열 리터럴로 생성
    var evens = [2, 4 6, 8];
    var evens = new Array(2, 4, 6, 8);
    var empty = new Array();
    함수
    함수 선언문으로 정의하는 법
    function square(x) { return x*x; }
    함수 리터럴로 정의하는 법
    var square = function(x) { return x*x; }
    Function 생성자로 정의하는 방법
    var square = new Function("x", "return x*x");
    화살표 함수 표현식으로 정의하는 방법
    var square = x => x*x;


    변수 
    ----------
    var 예약어 사용 : "바" 라고 발음 : Variable 약자
    =====================================
    자바스크립트에서는 테이터 타입을 사용하지 않는다.
    =====================================
    var 데이터 타입에 변수명을 선언하고 데이터 타입을 대입하면
    자바스크립트 엔진이 알아서 데이터 타입을 맞추어서 생성해 준다. 

    var s = "abc"; 아 문자열 이구나 
    var i = 11; 아 숫자, 정수 구나 
    var f = {a:"a", b:"b"}; 리터럴 객체구나 
    var a = new Array[1, 2, 3]; 배열 객체구나 
    var fu = function(abc){ return abc;}: 함수 객체 구나 
    =============================================
    데이터 타입을 알고 싶으면 typeof() 함수를 사용하면 된다.
    =============================================

    지역변수 local variable
    함수 안에서 선언하고 
    함수 안에서만 사용
    전역변수 global variable
    스크립트 소스 코드 전체에서 사용
    함수 밖에서 선언
    함수 안에서 var 예약어 빼고 선언

    ES6 변수 추가
    let 함수 블럭에서만 사용 가능 
    const 상수 역활

    =====================================
    변수 사용은
    1. 전역변수는 최소한 사용
    2. var 변수는 함수의 시작 부분에서 선언
    3. for문 카운트 변수로 var 사용하지 말기
    let 으로 사용하기 
    =====================================

    함수 
    ------------
    함수를 선언할 때는 
    function 예약어와 중괄호 {} 을 사용한다.

    1. 함수 선언문
    ----------
    function 함수명() { 명령문; }
    function 함수명(변수) { 명령문; }

    함수 호출 또는 함수 실행
    함수명() 또는 함수명(변수)


    2. 익명 함수 선언
    --------------
    함수 이름이 없는 함수
    function(){}
    var 변수 = function(){} <-- 함수를 리터럴로 정의

    익명 함수 실행
    var sum = function(a, b){ return a+b; }
    document.write(sum(10, 20));


    3. 즉시 실행 함수
    ---------------
    한 번만 실행하는 함수 
    (function() { 명령 }());
    (function(매개변수) { 명령 }(인수));


    4. 화살표 함수 : ES6
    -----------------
    (매개변수) => { 함수 내용 }

    매개변수가 없는 경우
    const hi () => { return "안녕하세요" };
    매개변수가 1개인 함수
    let hi = user => { document.writer(user + "안녕하세요");}
    매개변수가 2개 이상인 경우
    let sum = (a,b) => a+b;


    이벤트 와 이벤트 처리기
    ------------------------

    마우스 이벤트
    click 사용자가 HTML 요소르 클릭할 때 이벤트가 발생
    mousedown 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생
    .....

    키보드 이벤트
    keydown 사용자가 키를 누르는 동안 이벤트가 발생
    keypress 사용자가 키를 눌렀을 때 이벤트가 발생
    keyup 사용자가 키에서 손을 뗄 때 이벤트가 발생

    문서로딩 이벤트
    load 문서 로딩이 끝나면 이벤트가 발생
    resize 문서 화면 크기가 바뀌었을 때 이벤트가 발생
    scroll 문서 화면이 스크롤되었을 때 이벤트가 발생

    폼 이벤트
    blur 폼 요소에 포커스를 잃었을 때 이벤트가 발생
    change <input>, <select>, <textarea> 태그에서
    목록이나 체크 상태들이 변경되면 이벤트가 발생
    focus 폼 요소에 포커스가 놓였을 때 이벤트가 발생
    <label>, <select>, <textarea>, <button> 태그에서 사용
    reset 폼이 리셋되었을 때 이벤트가 발생
    submit submit 버튼을 클릭했을 때 이벤트가 발생


    이벤트 처리기 이벤트 핸들러 
    HTML 태그 안에서 'on' 다음에 '이벤트명'을 붙여서 속성이름을 만들고
    실행할 이벤트 처리기의 함수명을 작성한다.
    <태그 on이벤트명 = "함수명">

    이벤트 처리방법
    HTML 요소의 이벤트 처리기 속성에 설정하는 방법
    <input type="button" onclick="changeColor();">
    DOM 요소 객체의 이벤트 처리기 프로퍼티에 설정하는 방법
    vat btn = document.getElementById("button");
    btn.onclick = changeColor();
    addEventListener 메서드를 사용하는 방법
    vat btn = document.getElementById("button");
    btn.addEventListener("click", changeColor, false);
  • js_1.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript</title>
		<script type="text/javascript">
			// 자바스크립트 주석
			/* 자바스크립트 주석 */
			window.document.write("헤드 태그에서 자바스크립트 함수로 브라우저에 출력하기");
		</script>
		<style type="text/css">
			* {
				margin: 0;
			}
		</style>
	</head>
	<body>
		<h3>자바스크립트를 공부하기 ....</h3>
		<h3>html, css, javascript는 파싱 parsing이 된다.</h3>
		<hr>
		<script type="text/javascript">
			window.document.write("바디 태그에서 자바스크립트 함수로 브라우저에 출력하기");
		</script>
	</body>
</html>
<!-- 
html 엔진이 읽어간다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript</title>		
	</head>

	<body>
		<h3>자바스크립트를 공부하기 .... </h3>
		<hr>		
	</body>
</html>
 -->
 
<!-- 
자바스크립트 엔진이 읽어간다.

<script type="text/javascript">
	// 자바스크립트 주석 
	/* 자바스크립트 주석 */
	window.document.write("헤드 태그에서 자바스크립트 함수로 브라우저에 출력하기");
</script>
<script type="text/javascript">
			window.document.write("바디 태그에서 자바스크립트 함수로 브라우저에 출력하기");	
		</script>
-->
  
<!-- 
렌더링 엔진이 읽어간다.
<style type="text/css">
	* {
		marging: 0;
	}		
</style>
 -->

4교시 (12:30-13:20)

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

		<script type="text/javascript">
				window.alert("head 알럿메시지 1");
				alert("head 알럿메시지 2");
				console.log("head 콘솔 메시지");
		</script>
	</head>

	<body>
		<script type="text/javascript">
				window.alert("body 알럿메시지 1");
				alert("body 알럿메시지 2");
				console.log("body 콘솔 메시지")
		</script>
	</body>
</html>

  • js_3.html
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Variable</title> <script type="text/javascript"> // var var i = 2000; console.log("typeof(i) >>> : " + typeof(i)); console.log("i >>> : " + i); var s = "a"; console.log("typeof(s) >>> : " + typeof(s)); console.log("s >>> : " + s); var isEmpty = true; console.log("typeof(isEmpty) >>> : " + typeof(isEmpty)); console.log("isEmpty >>> : " + isEmpty); var u; console.log("typeof(u) >>> : " + typeof(u)); console.log("u >>> : " + u); var n = null; console.log("typeof(n) >>> : " + typeof(n)); console.log("n >>> : " + n); var card = {suit:"하트", rank:"A"}; var card1 = {"suit":"하트", "rank":"A"}; console.log("typeof(card) >>> : " + typeof(card)); console.log("typeof(card1) >>> : " + typeof(card1)); console.log("card.suit >>> : " + card.suit); console.log("card1.rank >>> : " + card1.rank); var evens = [2, 4, 6, 8]; console.log("typeof(evens) >>> : " + typeof(evens)); console.log("evens[0] >>> : " + evens[0]); console.log("evens.length >>> : " + evens.length); for (let i=0; i < evens.length; i++){ console.log("evens["+i+"] >>> : " + evens[i]); } </script> </head> <body> </body> </html>

5교시 (14:30-15:20)

  • js_3.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Variable</title>
	<script type="text/javascript">
	
		// var 
		var i = 2000;	
		console.log("typeof(i) >>> : " + typeof(i));
		console.log("i >>> : " + i);
		
		var s = "a";
		console.log("typeof(s) >>> : " + typeof(s));
		console.log("s >>> : " + s);
		
		var isEmpty = true;
		console.log("typeof(isEmpty) >>> : " + typeof(isEmpty));
		console.log("isEmpty >>> : " + isEmpty);
		
		var u;
		console.log("typeof(u) >>> : " + typeof(u));
		console.log("u >>> : " + u);
		
		var n = null;
		console.log("typeof(n) >>> : " + typeof(n));
		console.log("n >>> : " + n);
		
		var card = {suit:"하트", rank:"A"};
		var card1 = {"suit":"하트", "rank":"A"};
		console.log("typeof(card) >>> : " + typeof(card));
		console.log("typeof(card1) >>> : " + typeof(card1));
		console.log("card.suit >>> : " + card.suit);
		console.log("card1.rank >>> : " + card1.rank);
		
		var evens = [2, 4, 6, 8];
		console.log("typeof(evens) >>> : " + typeof(evens));
		console.log("evens[0] >>> : " + evens[0]);
		console.log("evens.length >>> : " + evens.length);
		for (let i=0; i < evens.length; i++){
			console.log("evens["+i+"] >>> : " + evens[i]);
		}
	
	</script>
</head>
<body>

</body>
</html>

  • js_4.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>function</title>
	<script type="text/javascript">
		
		// 함수 선언
		function fun_1() {
			return 1 + 2;
		}
		var f_1 = fun_1();
		console.log("f_1 >>> : " + f_1);
		
		function fun_2(a, b) {
			return a + b;
		}
		var f_2 = fun_2(1, 2);
		console.log("f_2 >>> : " + f_2);
		
		// 익명 함수
		var f_3 = function(a, b) {
			return a + b;
		}
		document.write("f_3(1, 2) >>> : " + f_3(1, 2));
		
		// 즉시 실행 함수
		(function() { console.log("즉시 실행 함수")}());
		
		// 화살표 함수
		var hi = () => { return "안녕하세요 화살표 함수 ";}
		alert("hi() >>> : " + hi());
		
		let say = () => alert("hi!!");
		say();
		
		let d = n => n * 2;
		alert("d(3) >>> : " + d(3))
		/*
			let d = function(n) {
				return n * 2;
			}
		*/
		var sum = (a, b) => a + b;
		/*
			var sum = function (a, b) {
				return a + b;
			}
		*/
		alert("sum(1, 2) >>> : " + sum(1, 2))
	</script>
</head>
<body>
	<p id="name">강민주</p>
	<script>
		document.getElementbyId("name").innerHTML="강감찬 20대손";
	</script>
</body>
</html>

6교시 (15:30-16:20)

  • js_5.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>window</title>
	<script type="text/javascript">

		var userAgent = navigator.userAgent;
		console.log("userAgent >>> : \n" + userAgent);
		document.write("userAgent >>> : \n" + userAgent + "<br>");
		document.write("Mozilla/5.0 >>> : " + "기본 플랫폼<br>");
		document.write("(Windows NT 10.0; Win64l x64) >>> : " + "운영체제정보<br>");
		document.write("Chrome/99.0.4844.82 >>> : " + "사용중인 브라우저 이름, 자동 업데이트 다운로드된다.<br>");
		document.write("Safari/537.36 >>> : " + "깉은 엔진을 사용 중이며 호환가능한 다른 브라우저<br>");

		document.write("현재 브라우저 코드명 >>> : " + navigator.appCodeName + "<br>");
		document.write("현재 브라우저 이름 >>> : " + navigator.appName + "<br>");
		document.write("현재 브라우저 버전 정보 >>> : " + navigator.appVersion + "<br>");
		document.write("현재 브라우저가 사용하는 언어 >>> : " + navigator.language + "<br>");
		document.write("현재 브라우저의 엔진이름 >>> : " + navigator.product + "<br>");
		document.write("현재 컴퓨터의 운영체제 정보 >>> : " + navigator.platform + "<br>");
		document.write("온라인 상태여부 인터넷 정상연결 true >>> : " + navigator.onLine + "<br>")
	</script>
</head>
<body>
	
</body>
</html>

  • js_6.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript">

		// [운영 체제 정보] 버튼을 누를 때마다 실행되는 함수입니다.
		function info1() {
			// 브라우저 및 운영체제 종합정보를 반환 후 모두 소문자로 바꿉니다.
			var os = navigator.userAgent.toLowerCase();

			// 요소 중 id의 값이 "info_wrap"은 요소 객체를 가져옵니다.
			var info_wrap = document.getElementById("info_wrap");

			/*
				navigator 객체를 이용해 반환받은 정보와 다음과 같은 문자가 포함되어 있으면
				운영체제 명을 지정한 요소 사이에 텍스트로 출력합니다.
			*/
			if (os.indexOf('windows') >= 0) {

				info_wrap.innerHTML = "윈도우";

			} else if (os.indexOf("macintoshi") >= 0) {

				info_wrap.innerHTML = "매킨토시";

			} else if (os.indexOf("iphone") >= 0) {

				info_wrap.innerHTML = "아이폰";

			} else if (os.indexOf("android") >= 0) {

				info_wrap.innerHTML = "안드로이드";
			}

			// 3초 후에 운영체제 정보를 지웁니다.
			setTimeout("info_wrap.innerHTML = '' ", 3000); // 3000 -> 3초
		}

		// [스크린 정보] 버튼을 누를 때마다 실행되는 함수입니다.
		function info2() {

			// 스크린 너비와 높이 값을 가져와 각각의 변수에 저장합니다.
			var sc_w = screen.width;
			var sc_h = screen.height;

			// 요소 중 id의 값이 "info_wrap"은 요소 객체를 가져옵니다.
			var info_wrap = document.getElementById("info_wrap");

			// 스크린 너비와 높이 값을 지정한 요소에 텍스트로 출력합니다.
			info_wrap.innerHTML = sc_w + " X " + sc_h;

			// 3초 후에 스크린 정보를 지웁니다.
			setTimeout("info_wrap.innerHTML = '' ", 3000);
		}

	</script>
</head>
<body>
	<h1>운영체제 및 스크린 정보</h1>
	<p id="info_wrap"></p>

	<!-- 아래 버튼을 누를 때마다 info1 함수의 중괄호 사이의 자바스크립트 실행문 코드가 실행됩니다. -->
	<button onclick="info1();">운영체제 정보</button> <br />

	<!-- 아래 버튼을 누를 때마다 info2 함수의 중괄호 사이의 자바스크립트 실행문 코드가 실행됩니다. -->
	<button onclick="info2();">스크린 정보</button> <br />
</body>
</html>

  • js_7.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HISTORY LOCATION</title>
</head>
<body>
	<h3>history & location</h3>
	<hr>
	<script>

			var userName = window.prompt("당신의 영문 이름은 ?? " , "");
			var upperName = userName.toUpperCase();
			console.log("upperName >>> : " + upperName);

			if ("PGW" == upperName) {
				alert("안녕하세요 박가연 님 >>> 구글로 초대합니다. ");
				location.href="http://www.google.com";
			} else {
				alert("박가연님이 아니네요 >>> : ");
				history.go(-1);
			}

	</script>
</body>
</html>

 

 

구글로 이동

7교시 (16:30-17:20)

  • js_8_winpopup.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>win pop up</title>
	<style type="text/css">
		* {
			margin: 0; padding: 0;
		}
	</style>
</head>
<body>
	<h3>윈도우 팝업 화면</h3>
	<hr>
	<button onclick="window.close();">닫기</button>	
</body>
</html>
  • js_8.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>window open</title>
	<script type="text/javascript">
	window.open("js_8_winpopup.html","pop1","width=300,height=400,left=300,top=10,scrollbars=no,toolbars=no,location=no");
	</script>
</head>

<body>

</body>
</html>

  • js_8_1.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>window open</title>
	<script type="text/javascript">
		var pop = window.open("js_8_winpopup.html","pop1","width=300,height=400,left=300,top=10,scrollbars=no,toolbars=no,location=no");
	</script>
</head>

<body>
	<p>
		<button onclick="pop.moveTo(200,300); pop.focus();">브라우저 창 위치 변경</button>
	</p>
	<p>
		<button onclick="pop.resizeTo(200,300); pop.focus();">브라우저 창 크기 변경</button>
	</p>
</body>
</html>

 

  • js_9.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>setTimeout</title>
	<script type="text/javascript">

		var i = 0;
		setTimeout("console.log(++i);", 3000); // 3000 -> 3초
		var auto = setInterval("console.log(i++);", 1000); // 1000 -> 1초
	</script>
	
</head>
<body>
	<button onclick="clearInterval(auto)">정지 버튼</button>
</body>
</html>

8교시 (17:30-18:30)

  • form_1.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>
	<h3>form 테스트</h3>
	<hr>
</body>
</html>
  • form_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cgiForm Test</title>
<!-- 디바이스에 최적화된 크기로 출력됨 -->
<meta name="viweport" content="width=device-width, iitail-scale=1">
<style type="text/css">
	div {
			margin: 50px 0px 0px 100px;
		}	
</style>
<script type="text/javascript">

	
	function formTestCheck() {
		alert("formTestCheck()함수 진입");
		// http://localhost:8088/firstWeb/jsp/form_1.jsp
		document.form_1.action="/firstWeb/jsp/form_1.jsp";
		document.form_1.method="GET";
		document.form_1.enctype="application/x-www-form-urlencoded";	// key=value			
		document.form_1.submit();		
	}
</script>
</head>

<body>
<div>
	<form name="form_1" id="form_1">
		<table border="1">
			
			<tr>
				<td>이름</td>
				<td><input type="text" name="mname" /></td>
			</tr>
			<tr>
				<td>아이디</td>
				<td>	
					<input type="text" name="mid" value="아이디" />
					<input type="button" name="midCheck" value="아이디중복확인" />
				</td>
			</tr>
			<tr>
				<td>패스워드</td>
				<td>
				<input type="text" name="mpw" />
				</td>
			</tr>
			<tr>
				<td>핸드폰</td>
				<td>
				<input type="text" name="mhp" />
				</td>
			</tr>
			<tr>
				<td>성별</td>
				<td> 
					<input type="radio" name="mgender" value="M" checked="checked" />남자
					<input type="radio" name="mgender" value="F" /> 여자
				</td>
			</tr>
			<tr>
				<td>취미</td>
				<td> 
					<input type="checkbox" name="mhobby" value="book" />독서		      
					<input type="checkbox" name="mhobby" value="sports" />운동
					<input type="checkbox" name="mhobby" value="mugic" />음악감상
					<input type="checkbox" name="mhobby" value="trable" />여행
				</td>
			</tr>
			<tr>
				<td>지역</td>
				<td> 
					<!-- drop down box -->
					<select name="mlocal">
						<option value="seoul">서울</option>
						<option value="gunggido">경기도</option>
						<option value="junju">전주</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>소개글</td>
				<td>
					<textarea name="mmsg" rows="5" cols="50"></textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2"> 
					<!-- 
						hidden 타입은 화면에 display 되지는 않는다.value 는 서버로 전송이 된다. 
					-->
					<input type="hidden" id="isudtype" name="isudtype" value="I">		
					<input type="button" value="jsp_보내기" id="jspBtn" onclick="formTestCheck()"/>	
					<input type="reset" value="취소" />
				</td>				
			</tr>
		</table>				 		        		     
	</form>	
</div>		
</body>
</html>


Notes


728x90