//Google AdSense

자바스크립트 논리 연산자 / 삼항 조건 연산자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 논리 연산자</title>
<script type="text/javascript">
	/* 
		논리 연산자 - 비교 연산자를 결합하여 and, or 로 판단하여 논리 타입으로 결과값 반환
		
		키워드
		&& - and
		|| - or
		! - not
		
		true && true : true
		true && false : false
		true || false : true
		false || false : false
		!true : false
	*/
	
	var n1 = 10;
	var n2 = 20;
	var n3 = 30;
	
	console.log('n1 < n2 and n1 < n3 : ', n1 < n2 && n1 < n3);
	console.log('n1 < n2 and n1 > n3 : ', n1 < n2 && n1 > n3);
	console.log('n1 < n2 or n1 < n3 : ', n1 < n2 || n1 < n3);
	console.log('n1 < n2 or n1 > n3 : ', n1 < n2 || n1 > n3);
	console.log('n1 > n2 or n1 > n3 : ', n1 > n2 || n1 > n3);
	console.log('n1 < n2 not : ', !(n1 < n2) );

	if (n1 < n2 && n1 < n3){
		console.log('n1 < n2 and n1 < n3 : ','참입니다');
	}else{ console.log('n1 < n2 and n1 < n3 : ','거짓입니다');
		
	}
	
	/*
		삼항 조건 연산자
		조건식 ? 값 : 값;
		간단한 조건식을 표현할 때 주로 쓰인다.
	*/
	var str = 10 == 10? '참입니다' : '거짓입니다'; // var str = (10 == 10? '참입니다' : '거짓입니다'); 선(연산) 후대입
		
	console.log('삼항 조건문에 의한 결과값 : ', str);
			
</script>

</head>
<body>

</body>
</html>

 


 

자바스크립트 비교연산자 + 논리연산자 실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 비교연산자+논리연산자 실습</title>

<script type="text/javascript">
	var n1 = 11;
	var n2 = 1;
	var n3 = 12;
	var n4 = 13;
	
	/*  
		실습2. n1 + n2가 n3과 같고 n2 + n3이 n4가 같을 경우 콘솔에 '조건이 참입니다.'
		아닐경우 '조건이 거짓입니다.' 라고 출력 시키시오.
	*/
	
	if(n1 + n2 == n3 && n2 + n3 == n4){
		console.log('n1 + n2 == n3 && n2 + n3 == n4', '조건이 참입니다.');
	}else {
		console.log('n1 + n2 == n3 && n2 + n3 == n4', '조건이 거짓입니다.');		
	}
	
</script>
</head>
<body>

</body>
</html>

<코딩해보세요>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>적정 체중 테스트</title>
<script>
	var name = prompt("당신의 이름은?","");		//이름입력
	var height = parseInt(prompt("당신의 신장은?","0"));	//신장입력
	var weight = Number(prompt("당신의 몸무게는?","0"));	//체중입력
			
	var normal_w = (height - 100)*0.9		//평균체중
	var result = weight >= normal_w - 5 && weight <= normal_w + 5;	//오차범위 +-5
	result = result ? "적정 체중입니다." : "적정 체중이 아닙니다.";

	document.write(name + " 님은 " + result)
</script>


</head>
<body>

</body>
</html>

prompt는 문자열만 반환하게 되어있다.

 

data type을 변환(형변환)

string data type을 int data type으로 변환 > parseInt() / Number()

 

 

문자열에 숫자 외의 문자 이전의 숫자만 반환

 

 

문자열에 숫자가 아닌 문자가 포함되어있으면 반환 x

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>반복문 - while</title>
<script type="text/javascript">
	/*
		while : 조건식이 true 일 경우 반복 실행.
		
	*/
	
	var num = 0;
	while(num < 100){ //조건식이 true일 경우 반복, false면 정지.
		console.log(num);
		num++;		
	}
</script>

</head>
<body>

</body>
</html>

 


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>confirm을 이용한 조건 처리</title>
<script type="text/javascript">
	/*
		confirm은 내장 함수로 사용자에게 확인 혹은 취소를 선택하게 만들고,
		결과에 따라 true, false 값을 반환하도록 만드는 함수.
	*/
	var check = confirm('정말 게시글을 삭제하시겠습니까?');
	if(check){
		console.log('삭제 시작');
	}else {
		console.log('삭제 취소');
	}
</script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>반복문 - while</title>
<script type="text/javascript">
	/*
		while : 조건식이 true 일 경우 반복 실행.
		
	*/
	
	var num = 0;
	
	while(num < 100){ //조건식이 true일 경우 반복, false면 정지.
		console.log(num);
		num++;		
	}
	
	
	while (num>0) {
		console. log (num);
		num--;		
	}
	
</script>

</head>
<body>

</body>
</html>

산술연산자 + while 실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>산술 연산자 + while</title>
<script type="text/javascript">
	
	var num = 0;
	/*  
		실습4. while을 활용하여 반복문 100번을 실행하고 
		100실행될 때 짝수만 출력시켜라.
		(짝수만 조건문으로  판단하여 출력)
	*/
	
	while(num < 100){
		if(num % 2 == 0){
			console.log(num);
		}
		num++;
	}
	
</script>

</head>
<body>

</body>
</html>



조건문 + 반복문 + 증감연산자 실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>조건문 + 반복문 + 증감연산자</title>
<script type="text/javascript">
	/*
		실습5. 1~100까지 반복 시키고 3의 배수만 result라는 변수에 합산시켜
		최종 결과물만 콘솔에 출력시켜주세요.
		(1~100사이에 출력되는 3의 배수만 result에 합산 3..6..9)
	*/
	
	var num = 1;
	var result = 0;
	while ( num <= 100){
		if( num % 3 == 0 ) {
			result += num;
		}
		num++;
	}
	console.log(result);
	
</script>

</head>
<body>

</body>
</html>

 

prompt + 반복문 실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prompt + 반복문</title>
<script type="text/javascript">
	/*  
		실습6. prompt 명령어로 숫자를 받아 구구단을 출력시켜주세요.
	*/

	var n = 1;
	var result = 0;
	result = parseInt(prompt("구구단을 외자", 0));
	
	while (n <= 9) {
		console.log(result * n);			
		n++;
	}
	
</script>
</head>
<body>

</body>
</html>

 

반복문 for + 조건식 실습


	
	/*
		실습7. for문을 활용하여 0~99 까지 반복하고 
		5의 배수만 콘솔창에 출력하세요.
	*/
	
	for(var n=0; n<100; n++){
		if (n % 5 == 0) {
			console.log(n);
		}		
	}
	

 



반복문, 이중반복문


	/*
		반복문 for : for문 안에 초기값, 조건식, 증감식이 포함되어 있다.
		for(초기값; 조건식; 증감식){}
	*/
	
	for(var i = 0; i < 100; i++) {
		console.log('반복문 for i 값 출력 : ', i);
	}
	for(var i = 100; i > 0; i--) {
		console.log('반복문 for i 값 출력 : ', i);
	}
	
	
	/*  
		이중 반복문
		for(초기값; 조건식; 증감식){
			for(초기값; 조건식; 증감식){
				
			}
			
		}
	*/
	
	for(var i = 0; i < 10; i++){
		if( i %2 ==0){
			for(var n=0; n <10; n++){
				console.log('이중반복문 i :', i,'n : ', n );
				
			}
		}
	}
	

 


이중반복문 실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이중반복문 실습</title>
<script type="text/javascript">
	/*  
		실습8. 이중반복문을 활용하여 구구단 1단부터 9단까지 출력하여라.
		(출력 포맷 : 1 x 1 = 1)
	*/
	
	for(var a=1; a <= 9; a++){
			console.log('=== 구구단 '+a+' 단 ===')
		for(var b=1; b <=9; b++){
			console.log(a+' x '+b+' = '+(a*b));
		}
	}
</script>
</head>
<body>

</body>
</html>

break

/*
	break : 반복문이 break 키워드를 만나면 더 이상 반복을 수행하지 않는다.
*/

for( var i = 0; i <100 ; i++){
	if(i>10) break;
	console.log('break i > 10 확인 : ',i);
}	


continue

/*  
	continue : 반복수행 중 continue를 만나면 아래의 로직을 수행하지 않고 다음 반복을 진행한다.
*/
	
for(var i = 0 ; i <100; i++){
	if(i % 2 == 0) continue;
	console.log('i % 2 == 0 >> continue 실행 : ', i);
}



'JavaScript' 카테고리의 다른 글

[JavaScript] 함수  (1) 2020.03.10
[JavaScript] 객체 Object  (0) 2020.03.10
[JavaScript] 배열 객체  (0) 2020.03.09
[JavaScript] JavaScript 기초문법 ①  (1) 2020.03.05

브라우저의 개발자모드를 통해 자바스크립트로 화면을 제어할 수 있음을 확인

 

 

변수명으로 예약어를 사용할 경우

변수 선언과 데이터 저장

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 변수 선언</title>
<script type="text/javascript">
	var box; //box라는 명칭으로 메모리 공간 할당;
	box = 10;
	box = 30;
	document.write(box);
	
	/* 
		자료형은 변수의 값에 의해 지정된다.
		자료형에는 문자형, 숫자형, 논리형, null, undefined가 있다.
		typeof는 자료형을 확인할 때 사용하는 키워드.
		
		
		undefined : 기본적으로 메모리는 할당되었지만 값이 없을 경우. (자바에서의 null)
		null : 자바스크립트에서는 강제로 값을 비울 때 사용.
		값의 존재 확인> 공백/null/undefined 체크
	*/
	
	var ex01 = '홍길동';
	var ex02 = 10;
	var ex03 = true;
	var ex04 = undefined;
	var ex05 = null;
	
	/*
		브라우저 내에서 함수 로그를 확인할 수 있도록 제공되는 메서드
		console 객체의 log 메서드를 활용하여 확인가능
		
		log 출력시 %라는 키워드가 붙어 인수값이 작성될 경우
		순차적으로 추가된 인수값이 치환되어 출력된다.
		%s 문자열 
		%d 숫자
	*/
	
	console.log('ex01 - type : %s - %s', ex01, typeof ex01);
	console.log('ex02 - type : %d - %s', ex02, typeof ex02);
	console.log('ex03 - type :', ex03, typeof ex03);
	console.log('ex04 - type :', ex04, typeof ex04);
	console.log('ex05 - type :', ex05, typeof ex05);

</script>
</head>
<body>

</body>
</html>

document.write(box); 출력

 

consol 객체의 log 메서드를 통해 브라우저 내에서 함수 로그를 확인


자바스크립트 연산자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 연산자</title>
<script type="text/javascript">
	/*
		산술 연산자 : -, +, *, /, %
	*/	
	
	var num1 =15;
	var num2 =2;
	
	console.log('+ 연산자 : ', num1 + num2);
	console.log('- 연산자 : ', num1 - num2);
	console.log('* 연산자 : ', num1 * num2);
	console.log('/ 연산자 : ', num1 / num2);
	console.log('% 연산자 : ', num1 % num2);
	
	/*
		문자열 연산자
	*/
	var str1 = '한국스마트';
	var str2 = "정보교육원";
	var num3 = 10;
	var num4 = '1000';
	var result = str1 + str2;
	console.log('문자열 연산자1 : ', result);
	console.log('문자열 연산자2 : ', str1 + '정보교육원');
	console.log('문자열 연산자3 : ', '한국스마트' + str2);
	console.log('문자열 연산자4 : ', '한국스마트' + '정보교육원');
	console.log('문자열 연산자5 : ', str1 + str2);
	console.log('문자열 연산자6 : ', result + num3); 
	console.log('문자열 연산자7 : ', num3 + num4); //숫자+문자열 => 문자열
	
	/*
		대입 연산자	
		값을 대입
		=, -=, +=, *=, /=, %=
	*/
	var n1 = 10; //기본적인 대입 방식
	var n2 = 20;
		n2 += n1;//n2= n1+ n2 
				//n2= 20 + 10
		
	
	console.log('대입 연산자1 : ', n1);
	console.log('대입 연산자2 : ', n2);
	
	/*  
		증감 연산자
		증감 연산자는 선증가, 후증가, 선감소, 후감소가 있다.
		이 연산자는 해당 기호를 만났을 시 1씩 감소 혹은 증가시킨다.
	*/
		
	var a = 10;
	var b = 20;
	var c = b++;
	var d = ++b;
	
	console.log('증감연산자 후 증가', c); // c=20 대입후 b=21증가
	console.log('증감연산자 선 증가', d); // b=21 증가후 대입 d=22
	
	a++ ; // a+1증가;
	console.log('증감연산자 후 증가', a);
	a++ ;
	a++ ;
	a++ ;
	console.log('증감연산자 후 증가', a);	
</script>

</head>
<body>

</body>
</html>

 

산술연산자와 문자열연산자를 console.log를 이용해 브라우저 내에서 확인

 

 

연산자가 누락되어 연산이 되지 않았거나 인수값이 분리되지 않아 에러

 

연산자를 이용하거나 인수값을 ,로 분리해주기


자바스크립트 연산자 실습1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 연산자 실습1</title>
<script type="text/javascript">
	var str1 = '한국스마트';
	var str2 = '교육원';
	var n1 = 20;
	var n2 = 2;
	/*
		실습1. 위 변수에 지정된 값을 연산시켜 아래의 최종 결과물을 만들어 콘솔에 출력시켜라.
		완료 결과물 : 한국스마트정보교육원23
		사용 연산자 : 문자열 결합연산자, 증감연산자, 대입연산자
	*/
	
	n1 += ++n2;
	var re = str1+'정보'+str2+n1;
	
	console.log('완료 결과물 : ',re);
	
</script>

</head>
<body>

</body>
</html>

 


 

자바스크립트 연산자2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 연산자2</title>
<script type="text/javascript">
	/*
		비교 연산자 - 비교 연산자는 참 또는 거짓의 결과값을 반환한다.
		true or false 의 논리형 데이터 반환 (boolean type)
		
		>, <, >=, <=, ==, !=, ===, !==
			
		A > B : A는 B보다 크다.
		A < B : A는 B보다 작다.
		A >= B : A는 B보다 크거나 같다.
		A <= B : A는 B보다 작거나 같다.
		A == B : A와 B는 같다.
		A != B : A와 B는 같지 않다.
		A === B : A와 B는 값과 자료형이 모두 같다.
		A !== B : A와 B는 값과 자료형이 같지 않다.
		
	*/
	
	/* 문자열 비교하기 */
	var str1 = '한국';
	var str2 = '한국';
	var str3 = '교육원';
	var str4 = '한국교육원';
	
	console.log( 'str1 == str2 : ' , str1 == str2);
	console.log( 'str1 != str2 : ' , str1 != str2);
	console.log( 'str1 == str3 : ' , str1 == str3);
	console.log( 'str1 + str3 == str4 : ' , str1 + str3 == str4);
	
	if(str1 + str3 == str4){
		console.log('위의 문자열 연산자의 값이 같습니다.');
		
	}else {
		console.log('위의 문자열 연산자의 값이 다릅니다.');
	}
	
	console.log( 'str1 === str4 : ', str1 === str4);
	console.log( 'str1 !== str4 : ', str1 !== str4);	
	
	
	
	/* 숫자 비교하기 */
	var n1 = 10;
	var n2 = 20;
	var n3 = 30;
	var n4 = 11;
	var result = 0; //result변수 선언시 변수의 초기값을 0으로 초기화 시킴.
	
	console.log('n1 > n2 : ', n1 > n2);
	console.log('n1 < n2 : ', n1 < n2);
	console.log('n1 + n2 == n3 : ', n1 + n2 == n3);
	console.log('n1 <= n4 : ', n1 <= n4);

	if(n1 < n2){ //우선 순위 조건 판단.
		result = n1 + n2;		
	} else if ( n1 + n2 == n3) { //우선 순위 조건이 맞지 않을 시 조건 판단.
		result = n1 + n2 + n3;				
	} else { //위의 조건이 모두 거짓일 때
		result = n1 - n2;	
	}
	
	console.log('숫자 비교 후 연산 결과 : ', result);
	
</script>

</head>
<body>

</body>
</html>

'JavaScript' 카테고리의 다른 글

[JavaScript] 함수  (1) 2020.03.10
[JavaScript] 객체 Object  (0) 2020.03.10
[JavaScript] 배열 객체  (0) 2020.03.09
[JavaScript] JavaScript 기초문법 ②  (0) 2020.03.05

어제 혼자서 다시 공부해보았지만 복습이 미숙했던것 같다. 전체적으로 함께 해보고 혼자서 다시 실습해보니 복습의 어느 부분이 미숙했는지 어느 부분까지 이해 하였는지 알게되었다. 퍼센트는 사실 상관없다고 하셨지만 이것만 알면 70%라니 열심히 해야겠다~ 주말에 배운 내용을 종합해서 정리하는 시간을 가져야겠다.

 

** 복습을 할 때에는 응용이 가능하도록 꼼꼼하게 **

 

*5 6 7 8*

 

아직 공부하기 힘든 내용
상속 / 추상 / 인터페이스

 

(배운 것만 복습해보자) 

 

'Diary' 카테고리의 다른 글

200413  (0) 2020.04.13
[Database] 요구사항분석해보기  (0) 2020.04.06
200324  (0) 2020.03.24
JAVA 기초문법 ①, ② 복습해보기  (0) 2020.03.04

복습해보기

①하나의 패키지 하나의 클래스
②하나의 패키지 서로다른 클래스
 (1) 리턴 없고 입력 없는 메서드 선언 및 호출
 (2) 리턴 없고 입력 있는 메서드 선언 및 호출
 (3) 리턴 있고 입력 없는 메서드 선언 및 호출
 (4) 리턴 있고 입력 있는 메서드 선언 및 호출

 

 

 

8 return o 입력 o

 

구매자 > 상품주문
    주문내역출력


AA04 class

한명의 회원을 등록
판매자면
하나의 상품 등록
order insert 호출 후 리턴받기
판매자아니면 
상품등록불가

주문내역을 TotalPrint class 내 출력 메서드를 활용해서 출력

 

 

-주말동안 ①② 복습 다시 하기

'Diary' 카테고리의 다른 글

200413  (0) 2020.04.13
[Database] 요구사항분석해보기  (0) 2020.04.06
200324  (0) 2020.03.24
20200304  (0) 2020.03.04

1 - ② - ⑶ 하나의 패키지  서로다른 클래스에서 리턴 있고 입력 없는 메서드 선언 및 호출

서로다른 클래스에서 변수의 접근지정자가 private으로 지정되어 접근 불가할 때
어떻게 변수의 값을 setting / getting 할 수 있을까?
전역변수 하나에 setting method/ getting method를 선언

ex) private String uid;

<setting method>
return data type void
method name setUid
입력개수 1
매개변수 data type String
매개변수 name a
처리 과정 : 입력받은 값을 전역변수uid에 setting

<getting method>
return data type String
method name getUid
입력개수 0
매개변수 data type -
매개변수 name -
처리 과정 : data 영역의 전역변수uid에 담겨있는 값을 리턴

 

 

세팅이 된 모습

 

지역변수 (매개변수) 이름과 전역변수 이름이 같으면 어떻게 될까?

null이 출력된다.

메서드 내부의 지역변수들은 처리 후 데이터가 휘발된다.

 

this.를 붙이면 세팅이 된다.

 

 

1 - ② - ⑷ 하나의 패키지  서로다른 클래스에서 리턴 있고 입력 있는 메서드 선언 및 호출

 

 

package kr.or.ksmart.A;

public class User {
	
	private String uid;
	private String upw;
	private String uphone;
	private char ugender;
	private int uage;
	private String ulevel;
	
	
	public String getUid() {
		return uid;
	}
	public void setUid(String uid) {
		this.uid = uid;
		
	}
	public String getUpw() {
		return upw;
	}
	public void setUpw(String upw) {
		this.upw = upw;
	}
	public String getUphone() {
		return uphone;
	}
	public void setUphone(String uphone) {
		this.uphone = uphone;
	}
	public char getUgender() {
		return ugender;
	}
	public void setUgender(char ugender) {
		this.ugender = ugender;
	}
	public int getUage() {
		return uage;
	}
	public void setUage(int uage) {
		this.uage = uage;
	}
	public String getUlevel() {
		return ulevel;
	}
	public void setUlevel(String ulevel) {
		this.ulevel = ulevel;
	}

	
}

 

package kr.or.ksmart.A;

public class AA01 {

	public static void main(String[] args) {
				
		User u01 = new User();
		u01.setUid("id001");
		System.out.println(u01.getUid());
		
		u01.setUid("id001");
		u01.setUpw("pw001");
		u01.setUphone("010-001");
		u01.setUgender('남');
		u01.setUage(20);
		u01.setUlevel("구매자");
	
		uPrint(u01);
		
		
	
		User u02 = new User();
		
	
		u02.setUid("id002");
		u02.setUpw ("pw002");
		u02.setUphone ("010-002");
		u02.setUgender ('여');
		u02.setUage (30);
		u02.setUlevel ("판매자");
		
		uPrint(u02);
		
		
		
	
		User u03 = new User();

		
		u03.setUid ("id003");
		u03.setUpw ("pw003");
		u03.setUphone ("010-003");
		u03.setUgender ('여');
		u03.setUage (31);
		u03.setUlevel ("판매자");

		uPrint(u03);

		
	
		User u04 = new User();

		
		u04.setUid ("id004");
		u04.setUpw ("pw004");
		u04.setUphone ("010-004");
		u04.setUgender ('여');
		u04.setUage (32);
		u04.setUlevel ("관리자");

		uPrint(u04);
	

	}
	

	public static void uPrint (User getu){
		System.out.println("--- 회원가입 내역 ---");
		System.out.println(getu+"<-getu");
		System.out.println(getu.getUid() + "<- 아이디");
		System.out.println(getu.getUpw() + "<- 비밀번호");
		System.out.println(getu.getUphone() + "<- 전화번호");
		System.out.println(getu.getUgender() + "<- 성별");
		System.out.println(getu.getUage() + "<- 나이");
		System.out.println(getu.getUlevel() + "<- 권한");
		System.out.println("--- 회원가입 내역 End ---");
		
	}

	
}

흐름

 


 

AA01 Class ← Class 3가지 (User, Goods, Order) 호출

User class code

더보기
package kr.or.ksmart.A;

public class User {
	
	private String uid;
	private String upw;
	private String uphone;
	private char ugender;
	private int uage;
	private String ulevel;
	
	
	public String getUid() {
		return uid;
	}
	public void setUid(String uid) {
		this.uid = uid;
		
	}
	public String getUpw() {
		return upw;
	}
	public void setUpw(String upw) {
		this.upw = upw;
	}
	public String getUphone() {
		return uphone;
	}
	public void setUphone(String uphone) {
		this.uphone = uphone;
	}
	public char getUgender() {
		return ugender;
	}
	public void setUgender(char ugender) {
		this.ugender = ugender;
	}
	public int getUage() {
		return uage;
	}
	public void setUage(int uage) {
		this.uage = uage;
	}
	public String getUlevel() {
		return ulevel;
	}
	public void setUlevel(String ulevel) {
		this.ulevel = ulevel;
	}

	
}

 

Goods class code

더보기
package kr.or.ksmart.A;

public class Goods {

	private String pcode ;
	private String uid;
	private String pname;
	private int pjungsang ;
	private int phalin;
	private String psangse;
	
	public String getPcode() {
		return pcode;
	}
	public void setPcode(String pcode) {
		this.pcode = pcode;
	}
	public String getUid() {
		return uid;
	}
	public void setUid(String uid) {
		this.uid = uid;
	}
	public String getPname() {
		return pname;
	}
	public void setPname(String pname) {
		this.pname = pname;
	}
	public int getPjungsang() {
		return pjungsang;
	}
	public void setPjungsang(int pjungsang) {
		this.pjungsang = pjungsang;
	}
	public int getPhalin() {
		return phalin;
	}
	public void setPhalin(int phalin) {
		this.phalin = phalin;
	}
	public String getPsangse() {
		return psangse;
	}
	public void setPsangse(String psangse) {
		this.psangse = psangse;
	}
	
	
	
}

Order class code

더보기

 

package kr.or.ksmart.A;

public class Order {
	
	private String ocode;
	private String pcode;
	private String uid;
	private int ocount;
	private int oprice;
	private int ototal;
	private String oaddress;

	public String getOcode() {
		return ocode;
	}
	public void setOcode(String ocode) {
		this.ocode = ocode;
	}
	public String getPcode() {
		return pcode;
	}
	public void setPcode(String pcode) {
		this.pcode = pcode;
	}
	public String getUid() {
		return uid;
	}
	public void setUid(String uid) {
		this.uid = uid;
	}
	public int getOcount() {
		return ocount;
	}
	public void setOcount(int ocount) {
		this.ocount = ocount;
	}
	public int getOprice() {
		return oprice;
	}
	public void setOprice(int oprice) {
		this.oprice = oprice;
	}
	public int getOtotal() {
		return ototal;
	}
	public void setOtotal(int ototal) {
		this.ototal = ototal;
	}
	public String getOaddress() {
		return oaddress;
	}
	public void setOaddress(String oaddress) {
		this.oaddress = oaddress;
	}
	
	

}

AA01 class code

더보기
package kr.or.ksmart.A;

public class AA01 {

	public static void main(String[] args) {
				
		User u01 = new User();
		
		u01.setUid("id001");
		u01.setUpw("pw001");
		u01.setUphone("010-001");
		u01.setUgender('남');
		u01.setUage(20);
		u01.setUlevel("구매자");
	
		uPrint(u01);
		
		
	
		User u02 = new User();
		
	
		u02.setUid("id002");
		u02.setUpw ("pw002");
		u02.setUphone ("010-002");
		u02.setUgender ('여');
		u02.setUage (30);
		u02.setUlevel ("판매자");
		
		uPrint(u02);
		
		Goods g01 = new Goods();
		
		System.out.println(g01);
		
		g01.setPcode ("p001");
		g01.setUid (u02.getUid());
		g01.setPname ("노트북");
		g01.setPjungsang (2000000);
		g01.setPhalin (1000000);
		g01.setPsangse ("SW개발용");
		
		gPrint(g01);
		
		
		
		Order o01 =new Order();
		
		System.out.println(o01);
		
		o01.setOcode ("o001");
		o01.setPcode (g01.getPcode());
		o01.setUid (u02.getUid());
		o01.setOcount (3);
		o01.setOprice (g01.getPjungsang());
		o01.setOtotal (o01.getOcount() * o01.getOprice());
		o01.setOaddress ("금암동");
		
		oPrint(o01);
		
		
		
	
		User u03 = new User();

		
		u03.setUid ("id003");
		u03.setUpw ("pw003");
		u03.setUphone ("010-003");
		u03.setUgender ('여');
		u03.setUage (31);
		u03.setUlevel ("판매자");

		uPrint(u03);
		
		Goods g02 = new Goods();
		g02.setPcode ("p002");
		g02.setUid (u03.getUid());
		g02.setPname ("선풍기");
		g02.setPjungsang (50000);
		g02.setPhalin (40000);
		g02.setPsangse ("시원해");
		gPrint(g02);
		
		Order o02 =new Order();
		o02.setOcode("o002");
		o02.setPcode (g02.getPcode());
		o02.setUid (u03.getUid());
		o02.setOcount(5);
		o02.setOprice(g02.getPjungsang());
		o02.setOtotal(o02.getOcount() * o02.getOprice());
		o02.setOaddress ("서신동");
		oPrint(o02);

		
	
		User u04 = new User();

		
		u04.setUid ("id004");
		u04.setUpw ("pw004");
		u04.setUphone ("010-004");
		u04.setUgender ('여');
		u04.setUage (32);
		u04.setUlevel ("관리자");

		uPrint(u04);
		
		Goods g03 = new Goods();
	
		g03.setPcode ("p003");
		g03.setUid (u04.getUid());
		g03.setPname ("사과박스");
		g03.setPjungsang (100000);
		g03.setPhalin (80000);
		g03.setPsangse ("SW개발용");
	
		gPrint(g03);
		
		Order o03 =new Order();
		
		o03.setOcode ("o003");
		o03.setPcode(g03.getPcode());
		o03.setUid(u04.getUid());
		o03.setOcount(2);
		o03.setOprice (g03.getPjungsang());
		o03.setOtotal (o03.getOcount() * o03.getOprice());
		o03.setOaddress("덕진동");
	
		oPrint(o03);
	

	}
	

	public static void uPrint (User getu){
		System.out.println("--- 회원가입 내역 ---");

		System.out.println(getu.getUid() + "<- 아이디");
		System.out.println(getu.getUpw() + "<- 비밀번호");
		System.out.println(getu.getUphone() + "<- 전화번호");
		System.out.println(getu.getUgender() + "<- 성별");
		System.out.println(getu.getUage() + "<- 나이");
		System.out.println(getu.getUlevel() + "<- 권한");
		System.out.println("--- 회원가입 내역 End ---");
		
	}
	
	public static void gPrint (Goods getp) {
		System.out.println("--- 상품관리 내역 ---");

		System.out.println(getp.getPcode());
		System.out.println(getp.getUid());
		System.out.println(getp.getPname());
		System.out.println(getp.getPjungsang());
		System.out.println(getp.getPhalin());
		System.out.println(getp.getPsangse());
		System.out.println("--- 상품관리 내역 End ---");
	}

	public static void oPrint (Order geto) {

		
		System.out.println("--- 주문관리 내역 ---");
		System.out.println(geto.getOcode());
		System.out.println(geto.getPcode());
		System.out.println(geto.getUid());
		System.out.println(geto.getOcount());
		System.out.println(geto.getOprice());
		System.out.println(geto.getOtotal());
		System.out.println(geto.getOaddress());
		System.out.println("--- 주문관리 내역 End ---");
	}
	
}

천방지축 얼렁뚱땅 빙글빙글 돌아가는 흐름 ..

 

응용 - uPrint, pPrint, oPrint를 다른 TatlaPrint class로 분리하여보기

package kr.or.ksmart.A;

public class TotalPrint {
	
	
	public void uPrint (User getu){
		System.out.println("--- 회원가입 내역 ---");

		System.out.println(getu.getUid() + "<- 아이디");
		System.out.println(getu.getUpw() + "<- 비밀번호");
		System.out.println(getu.getUphone() + "<- 전화번호");
		System.out.println(getu.getUgender() + "<- 성별");
		System.out.println(getu.getUage() + "<- 나이");
		System.out.println(getu.getUlevel() + "<- 권한");
		System.out.println("--- 회원가입 내역 End ---");
		
	}

	public void gPrint (Goods getp) {
		System.out.println("--- 상품관리 내역 ---");

		System.out.println(getp.getPcode());
		System.out.println(getp.getUid());
		System.out.println(getp.getPname());
		System.out.println(getp.getPjungsang());
		System.out.println(getp.getPhalin());
		System.out.println(getp.getPsangse());
		System.out.println("--- 상품관리 내역 End ---");
	}

	public void oPrint (Order geto) {

		
		System.out.println("--- 주문관리 내역 ---");
		System.out.println(geto.getOcode());
		System.out.println(geto.getPcode());
		System.out.println(geto.getUid());
		System.out.println(geto.getOcount());
		System.out.println(geto.getOprice());
		System.out.println(geto.getOtotal());
		System.out.println(geto.getOaddress());
		System.out.println("--- 주문관리 내역 End ---");
	}
		
	

}

 

package kr.or.ksmart.A;

public class AA02 {


	public static void main(String[] args) {
		
		TotalPrint prnt = new TotalPrint();
		
		User u01 = new User();
		
		u01.setUid("id001");
		u01.setUpw("pw001");
		u01.setUphone("010-001");
		u01.setUgender('남');
		u01.setUage(20);
		u01.setUlevel("구매자");
		
		prnt.uPrint(u01);
	
	
		User u02 = new User();
		
	
		u02.setUid("id002");
		u02.setUpw ("pw002");
		u02.setUphone ("010-002");
		u02.setUgender ('여');
		u02.setUage (30);
		u02.setUlevel ("판매자");
		
		prnt.uPrint(u02);
		
		Goods g01 = new Goods();
		
		System.out.println(g01);
		
		g01.setPcode ("p001");
		g01.setUid (u02.getUid());
		g01.setPname ("노트북");
		g01.setPjungsang (2000000);
		g01.setPhalin (1000000);
		g01.setPsangse ("SW개발용");
		
		prnt.gPrint(g01);
				
		
		Order o01 =new Order();
		
		System.out.println(o01);
		
		o01.setOcode ("o001");
		o01.setPcode (g01.getPcode());
		o01.setUid (u02.getUid());
		o01.setOcount (3);
		o01.setOprice (g01.getPjungsang());
		o01.setOtotal (o01.getOcount() * o01.getOprice());
		o01.setOaddress ("금암동");
			
		prnt.oPrint(o01);
	
		User u03 = new User();

		
		u03.setUid ("id003");
		u03.setUpw ("pw003");
		u03.setUphone ("010-003");
		u03.setUgender ('여');
		u03.setUage (31);
		u03.setUlevel ("판매자");

		prnt.uPrint(u03);
		
		Goods g02 = new Goods();
		g02.setPcode ("p002");
		g02.setUid (u03.getUid());
		g02.setPname ("선풍기");
		g02.setPjungsang (50000);
		g02.setPhalin (40000);
		g02.setPsangse ("시원해");

		prnt.gPrint(g02);
		
		Order o02 =new Order();
		o02.setOcode("o002");
		o02.setPcode (g02.getPcode());
		o02.setUid (u03.getUid());
		o02.setOcount(5);
		o02.setOprice(g02.getPjungsang());
		o02.setOtotal(o02.getOcount() * o02.getOprice());
		o02.setOaddress ("서신동");
		
		prnt.oPrint(o02);

	
	
		User u04 = new User();

		
		u04.setUid ("id004");
		u04.setUpw ("pw004");
		u04.setUphone ("010-004");
		u04.setUgender ('여');
		u04.setUage (32);
		u04.setUlevel ("관리자");

		prnt.uPrint(u04);
		
		Goods g03 = new Goods();
	
		g03.setPcode ("p003");
		g03.setUid (u04.getUid());
		g03.setPname ("사과박스");
		g03.setPjungsang (100000);
		g03.setPhalin (80000);
		g03.setPsangse ("SW개발용");
		
		prnt.gPrint(g03);
	
		
		Order o03 =new Order();
		
		o03.setOcode ("o003");
		o03.setPcode(g03.getPcode());
		o03.setUid(u04.getUid());
		o03.setOcount(2);
		o03.setOprice (g03.getPjungsang());
		o03.setOtotal (o03.getOcount() * o03.getOprice());
		o03.setOaddress("덕진동");
		
		prnt.oPrint(o03);

	}

	

	
	
	
	

}

 

1 - ② - ⑴ 하나의 패키지서로다른 클래스에서 리턴 없고 입력 없는 메서드 선언 및 호출

더보기

회원관리클래스(설계도면!) >>>>통해서>>>> 새로운 객체 생성 > 새 주소 생성 > 데이타/메소드 영역 생김 > (id 영역에 id001값)데이터 세팅할 수 있다. -끝-

 

다시 주소를 찾아가 >> id 값 꺼내온다 .(getting)


 

package kr.or.ksmart.A;

public class User {

//*전역변수 (global variable) = 필드 (field) = 멤버 = 멤버필드
//	- 클래스 블록 안쪽 메서드 블록 바깥쪽에 선언되어있는 변수
//프로퍼티 (property)
//변수의 영역 기준 (블록기준)
//	- 중괄호 밖에 선언된 변수는 안쪽에서 사용 가능
//	- 중괄호 안에 선언된 변수는 밖에서 사용 불가
	
//User class에서 값을 세팅/게팅하는 개념X
	
	String uid;
	String upw;
	String uphone;
	char ugender;
	int uage;
	String ulevel;

}
package kr.or.ksmart.A;

public class AA01 {

	public static void main(String[] args) {
		
		
		User u01 = new User();

	}

}

User class data type으로 u01객체참조변수를 선언하고
User생성자메서드로 새로운 객체를 생성하고
생성된 객체의 주소값을 u01객체참조변수에 할당한다.

 

 

package kr.or.ksmart.A;

public class AA01 {

	public static void main(String[] args) {
		
		
		User u01 = new User();
		
		System.out.println(u01 + "<- u01");
		System.out.println(u01.uid + "<- u01.uid");
		//u01객체참조변수에 할당된 주소(User class를 통해 생성된 객체)에 찾아가서
		//data 영역 uid 전역변수에 담겨있는 값 null을 꺼내와서 (getting) 콘솔창에 출력한다.
		
		u01.uid ="id001";
		//u01객체참조변수에 할당된 주소(User class를 통해 생성된 객체)에 찾아가서 
		//data 영역 uid 전역변수에 id001 값을 세팅(입력)한다.
		
		System.out.println(u01.uid + "<- u01.uid");
		//u01객체참조변수에 할당된 주소(User class를 통해 생성된 객체)에 찾아가서 
		//data 영역 uid 전역변수에 담겨있는 값 id001을 꺼내와서 (getting) 콘솔창에 출력한다.
		
	}

}

1 - ② - ⑵ 하나의 패키지  서로다른 클래스에서 리턴 없고 입력 있는 메서드 선언 및 호출

package kr.or.ksmart.A;

public class AA01 {

	public static void main(String[] args) {
				
		User u01 = new User();
		
		uPrint(u01);
		System.out.println(u01);
		
		u01.uid = "id001";
		u01.upw = "pw001";
		u01.uphone = "010-001";
		u01.ugender = '남';
		u01.uage = 20;
		u01.ulevel = "구매자";
		uPrint(u01);
		
		User u02 = new User();
		System.out.println(u02);
		
		u02.uid = "id002";
		u02.upw = "pw002";
		u02.uphone = "010-002";
		u02.ugender = '여';
		u02.uage = 30;
		u02.ulevel = "판매자";
		uPrint(u02);
		
		User u03 = new User();
		System.out.println(u03);
		
		u03.uid = "id003";
		u03.upw = "pw003";
		u03.uphone = "010-003";
		u03.ugender = '여';
		u03.uage = 31;
		u03.ulevel = "판매자";
		uPrint(u03);
		
		User u04 = new User();
		System.out.println(u04);
		
		u04.uid = "id004";
		u04.upw = "pw004";
		u04.uphone = "010-004";
		u04.ugender = '여';
		u04.uage = 32;
		u04.ulevel = "관리자";
		uPrint(u04);
	}

	//회원 출력하는 메서드 선언

	public static void uPrint (User getu){
		System.out.println("--- 회원가입 내역 ---");
		System.out.println(getu.uid + "<- 아이디");
		System.out.println(getu.upw + "<- 비밀번호");
		System.out.println(getu.uphone + "<- 전화번호");
		System.out.println(getu.ugender + "<- 성별");
		System.out.println(getu.uage + "<- 나이");
		System.out.println(getu.ulevel + "<- 권한");
		System.out.println("--- 회원가입 내역 End ---");
		
	}
	
	
}

흐름


Class 추가 (Goods 와 Order class)

package kr.or.ksmart.A;

public class Goods {

	String pcode ;
	String uid;
	String pname;
	int pjungsang ;
	int phalin;
	String psangse;
	
}
package kr.or.ksmart.A;

public class Order {
	
	String ocode;
	String pcode;
	String uid;
	int ocount;
	int oprice;
	int ototal;
	String oaddress;

}

 

main 포함된 class 에서 값 세팅 및 출력하는 메소드 호출

package kr.or.ksmart.A;

public class AA01 {

	public static void main(String[] args) {
				
		User u01 = new User();
		
		uPrint(u01);

		
		u01.uid = "id001";
		u01.upw = "pw001";
		u01.uphone = "010-001";
		u01.ugender = '남';
		u01.uage = 20;
		u01.ulevel = "구매자";
		uPrint(u01);
		
		User u02 = new User();

		
		u02.uid = "id002";
		u02.upw = "pw002";
		u02.uphone = "010-002";
		u02.ugender = '여';
		u02.uage = 30;
		u02.ulevel = "판매자";
		uPrint(u02);
		Goods g01 = new Goods();
		g01.pcode="p001";
		g01.uid = u02.uid;
		//u02객체참조변수에 할당된 주소 즉 User class를 통해 생성된 객체 내의 data 영역의 uid 전역변수에 담겨있는 "id002" 값을 꺼내와서
		//g01객체참조변수에 할당된 주소 즉 Goods class를 통해 생성된 객체 내의 data 영역의 uid전역변수에 "id002" 값을 세팅한다.
		g01.pname ="노트북";
		g01.pjungsang =2000000;
		g01.phalin=1000000;
		g01.psangse="SW개발용";
		gPrint(g01);
		Order o01 =new Order();
		o01.ocode= "o001";
		o01.pcode= g01.pcode;
		o01.uid=u02.uid;
		o01.ocount=3;
		o01.oprice=g01.pjungsang;
		o01.ototal = (o01.ocount * o01.oprice);
		o01.oaddress ="금암동";
		oPrint(o01);
		
		
		
		
		User u03 = new User();

		
		u03.uid = "id003";
		u03.upw = "pw003";
		u03.uphone = "010-003";
		u03.ugender = '여';
		u03.uage = 31;
		u03.ulevel = "판매자";
		uPrint(u03);
		Goods g02 = new Goods();
		g02.pcode ="p002";
		g02.uid = u03.uid;
		g02.pname = "선풍기";
		g02.pjungsang = 50000;
		g02.phalin = 40000;
		g02.psangse ="시원해";
		gPrint(g02);
		Order o02 =new Order();
		o02.ocode= "o002";
		o02.pcode= g02.pcode;
		o02.uid=u03.uid;
		o02.ocount=5;
		o02.oprice=g02.pjungsang;
		o02.ototal = (o02.ocount * o02.oprice);
		o02.oaddress ="서신동";
		oPrint(o02);
				
		
		User u04 = new User();

		
		u04.uid = "id004";
		u04.upw = "pw004";
		u04.uphone = "010-004";
		u04.ugender = '여';
		u04.uage = 32;
		u04.ulevel = "관리자";
		uPrint(u04);
		Goods g03 = new Goods();
		g03.pcode = "p003";
		g03.uid = u04.uid;
		g03.pname ="사과박스";
		g03.pjungsang = 100000;
		g03.phalin = 80000;
		g03.psangse ="SW개발용";
		gPrint(g03);
		Order o03 =new Order();
		o03.ocode= "o003";
		o03.pcode= g03.pcode;
		o03.uid=u04.uid;
		o03.ocount=2;
		o03.oprice=g03.pjungsang;
		o03.ototal = (o03.ocount * o03.oprice);
		o03.oaddress ="덕진동";
		oPrint(o03);
	}

	//회원 출력하는 메서드 선언

	public static void uPrint (User getu){
		System.out.println("--- 회원가입 내역 ---");
		System.out.println(getu.uid + "<- 아이디");
		System.out.println(getu.upw + "<- 비밀번호");
		System.out.println(getu.uphone + "<- 전화번호");
		System.out.println(getu.ugender + "<- 성별");
		System.out.println(getu.uage + "<- 나이");
		System.out.println(getu.ulevel + "<- 권한");
		System.out.println("--- 회원가입 내역 End ---");
		
	}
	
	public static void gPrint (Goods getg){
		System.out.println("--- 상품관리 내역 ---");
		System.out.println(getg.pcode );
		System.out.println(getg.uid);
		System.out.println(getg.pname);
		System.out.println(getg.pjungsang);
		System.out.println(getg.phalin);
		System.out.println(getg.psangse);
		System.out.println("--- 상품관리 내역 End ---");
		
	}
	
	public static void oPrint (Order geto){
		System.out.println("--- 주문관리 내역 ---");
		System.out.println(geto.ocode );
		System.out.println(geto.pcode);
		System.out.println(geto.uid);
		System.out.println(geto.ocount);
		System.out.println(geto.oprice);
		System.out.println(geto.ototal);
		System.out.println(geto.oaddress);
		System.out.println("--- 주문관리 내역 End ---");
		
	}
}

호출 결과 (콘솔창 내용)

--- 회원가입 내역 ---
null<- 아이디
null<- 비밀번호
null<- 전화번호
<- 성별 0
<- 나이
null<- 권한
--- 회원가입 내역 End ---
--- 회원가입 내역 ---
id001<- 아이디
pw001<- 비밀번호
010-001<- 전화번호
남<- 성별
20<- 나이
구매자<- 권한
--- 회원가입 내역 End ---
--- 회원가입 내역 ---
id002<- 아이디
pw002<- 비밀번호
010-002<- 전화번호
여<- 성별
30<- 나이
판매자<- 권한
--- 회원가입 내역 End ---
--- 상품관리 내역 ---
p001
id002
노트북
2000000
1000000
SW개발용
--- 상품관리 내역 End ---
--- 주문관리 내역 ---
o001
p001
id002
3
2000000
6000000
금암동
--- 주문관리 내역 End ---
--- 회원가입 내역 ---
id003<- 아이디
pw003<- 비밀번호
010-003<- 전화번호
여<- 성별
31<- 나이
판매자<- 권한
--- 회원가입 내역 End ---
--- 상품관리 내역 ---
p002
id003
선풍기
50000
40000
시원해
--- 상품관리 내역 End ---
--- 주문관리 내역 ---
o002
p002
id003
5
50000
250000
서신동
--- 주문관리 내역 End ---
--- 회원가입 내역 ---
id004<- 아이디
pw004<- 비밀번호
010-004<- 전화번호
여<- 성별
32<- 나이
관리자<- 권한
--- 회원가입 내역 End ---
--- 상품관리 내역 ---
p003
id004
사과박스
100000
80000
SW개발용
--- 상품관리 내역 End ---
--- 주문관리 내역 ---
o003
p003
id004
2
100000
200000
덕진동
--- 주문관리 내역 End ---

흐름

 

1. NAVER 회원가입 화면 (폼)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
	<!-- 
		###################################################
		실습1. 네이버의 회원가입폼과 유사하게 태그를 구성하여 회원가입폼을 완성하고,
		joinProcess.jsp파일에 데이터를 전송하여 출력하시오.
		###################################################
	 -->
	 
	<div>
	NAVER
	</div>
	<form action="./joinProcess.jsp" method="post">
		
		<div>
		아이디
			<div>			
				<label>
					<input type="text" name="id" value="" >		
				</label>
			</div>
		</div>
		
		<div>
		비밀번호
			<div>			
				<label>
					<input type="password" name="pw" value="" >		
				</label>
			</div>
		</div>
		
		<div>
		비밀번호 재확인
			<div>
				<label>
					<input type="password" name="confirmPw" value="" >		
				</label>
			</div>
		</div>
		
		<div>
		이름
			<div>
			
				<label>
					<input type="text" name="name" value="" >		
				</label>
			</div>
		</div>
		
		<div>
		생년월일
			<div>
				<label>
					<input type="text" name="year" value="" placeholder="년(4자)" >		
					<select name="month" >
						<option value="">월</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
					</select>		
					<input type="text" name="day" value="" placeholder="일" >		
				</label>
			</div>
		</div>
		
		<div>
		성별
			<div>
			
				<label>
					<select name="gender">
						<option value="">성별</option>
						<option value="m">남자</option>
						<option value="f">여자</option>
					</select>		
				</label>
			</div>
		</div>
		
		<div>
		본인 확인 이메일(선택)
			<div>		
				<label>
					<input type="text" name="email" value="" placeholder="선택입력">		
				</label>
			</div>
		</div>
		
		<div>
		휴대전화
			<div>
				<label>
					<select name="nation">
						<option value="+505">니카라과+505</option>
						<option value="+82" selected="selected">대한민국 +82</option>
						<option value="+45">덴마크 +45</option>
						<option value="+299">덴마크령그린란드 +299</option>
					</select>		
				</label>
			</div>
			<div>		
				<input type="text" name="phone" value="" placeholder="전화번호 입력">
				<input type="text" name="checkCode" value="인증번호 받기" readonly="readonly">	
			</div>
			<div>
				<input type="text" name="checkCodeWrite" value="인증번호 입력하세요" readonly="readonly">	
			</div>
		</div>
		
		<button>가입하기</button>
		
	</form>		 
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	request.setCharacterEncoding("UTF-8");

	String id = request.getParameter("id");
	String pw = request.getParameter("pw");
	String confirmPw = request.getParameter("confirmPw");
	String name = request.getParameter("name");
	String year = request.getParameter("year");
	String month = request.getParameter("month");
	String day = request.getParameter("day");
	String gender = request.getParameter("gender");
	String email = request.getParameter("email");
	String nation = request.getParameter("nation");
	String phone = request.getParameter("phone");
	
	out.println(id);
	out.println(pw);
	out.println(confirmPw);
	out.println(name);
	out.println(year);
	out.println(month);
	out.println(day);
	out.println(gender);
	out.println(email);
	out.println(nation);
	out.println(phone);
%>

폼출력

 


입력

 


데이터 전송 출력


2.네이버 로그인 화면 (레이아웃과 폼)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<link href="./resource/css/common.css" rel="stylesheet">

<title>로그인</title>
</head>
<body>
	<!--
		###################################################
		실습2. naver.com의 로그인 페이지를 유사하게 구성 (html, css)하고
		로그인버튼 클릭시 loginProcess.jsp에 데이터를 전송하고 출력하시오.
		###################################################
	 -->
	<header>
		<div id=lang>
			<label>
				<select name="lang">
						<option value="ko-KR">한국어</option>
						<option value="en-US">English</option>
						<option value="CN">中文(简体)</option>
						<option value="TW">中文(台灣)</option>
				</select>
			</label>
		</div>
					
	</header>
				
	
	<div id=content>
		
		<div id=logo>
			<label>
				<a href="#"><img src="./resource/img/NAVER_CI_Green.png" alt="naver"></a>
			</label>	
		</div>
		
		<form action="./loginProcess.jsp" method="post">
			<div id=id>
				<label> 
					<input type="text" name="uId" placeholder="아이디">
				</label>
			</div>
			<div id=pw>
				<label>
					<input type="password" name="uPw" placeholder="비밀번호">
				</label>
			</div>
			<div id=button>
				<label>
					<button type="submit">로그인</button>
				</label>
			</div>
			<div id=logip>
				<div> 
					<label id=log-sta>
						<input type="checkbox" name="logSta" value="로그인 상태 유지" > 로그인 상태 유지
					</label>
				</div>
				<div id=ip-check>
					<label>
						<a id=ip href="#">IP보안</a>
						<a id=on-off href="#">ON</a>
					</label>	
					<label id=secue>
						<a id=secu-t href="#">일회용 로그인</a>
					</label>
				</div>
			</div>
		</form>
	</div>
	
	
	<footer id=footer>
		<div id=find-info>
			<label>
				<a href="#">아이디 찾기</a>
				 | 
				<a href="#">비밀번호 찾기</a>
				 | 
				<a href="#">회원가입</a>
			</label>
		</div>	
			
	
	</footer>
	
	<div id=banner>
		<label>
			<img src="./resource/img/banner.png" alt="banner">
		</label>
	</div>


</body>
</html>
@charset "UTF-8";
<style type="text/css">

	div {
		margin: 0; padding: 0; font-size: 13px; color: #2e2e2e;
	}
	body{background-color: #F5F6F7;}
				
	header {margin: 10px 5px 50px 5px; float: right;}
	#content {clear:both; width:70%; margin:0 auto; text-align: center;}
	#logo {margin: 50px;}
	#logo label img {height: 45px;}
	#id, #pw, #button {margin: 15px;}
	#id label input {width: 400px; height: 50px;}
	#pw label input {width: 400px; height: 50px;}
	#button label button {width: 400px; height: 50px; background-color:#02C850; border: 0; color: #fff;}
	#logip {width: 400px; margin: 0 auto;}
	#ip-check {float: right;}
	#ip-check label a{font-size: 13px;}
	#ip, #on-off, #secu-t {text-decoration: none;}
	#ip, #secue {color:#5D5D5D;} 
	#on-off {font-weight: bold ; color:#02C850;}
	#secue {float: right; margin: 0 10px;}
	#secu-t {text-decoration: underline; color:#5D5D5D;}
	#secu-t:hover{color:#5D5D5D;}
	#log-sta {float: left; font-size: 13px;}
	#footer {width: 400px; margin: 50px auto 0 auto; padding: 15px; clear: both; text-align: center; border-top: 1px solid #2e2e2e; border-color: #CFCFCF; }
	#find-info label a{color:#5D5D5D; text-decoration: none;font-size: 13px;}
	#banner {text-align: center;}
	#banner label img{padding: 50px 0;}

</style>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%

	request.setCharacterEncoding("UTF-8");
	
	String uId= request.getParameter("uId");
	String uPw= request.getParameter("uPw");
	String logSta= request.getParameter("logSta");
	
	
	out.println(uId);
	out.println(uPw);
	if(logSta != null){out.println("로그인 유지");}
	else {out.println("로그인 유지하지 않음");}


%>

완성된 화면


데이터 전송 test 1

 


데이터 전송 test 2

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>

<style type="text/css">
	body{padding: 0; margin: 0; background-color: #f5f6f7;}
	input, button{padding: 0; margin: 0;  line-height: 50px; width: 100%;}
	#container{width: 460px; margin: 62px auto 0 auto;}
	#logo { text-align: center; margin-bottom: 70px;}
	#logo img{width: 231px;}
	.input-wrap {margin-bottom: 20px;}
	.input-wrap input{}
	#login-btn button{background-color: #03c75a; color:#fff; font-size: 15px; border: 2px solid #03c75a;}
	#content{padding-bottom:50px ; border-bottom: 1px solid #e4e4e5;}
	#footer{text-align: center; padding-top: 20px;}
</style>

</head>
<body>
	<div id="container">
		<div id="logo">
			<img src="./resource/img/NAVER_CI_Green.png">
		</div>
		<div id="content">
			<form action="./loginProcessT.jsp" method="post">
				<div class="input-wrap">
					<input type="text" name="id" placeholder="아이디">
				</div>
				<div class="input-wrap">
					<input type="text" name="pw" placeholder="패스워드">
				</div>
				<div id="login-btn">
					<button type="submit">로그인</button>
				</div>
			</form>
		</div>
		<div id="footer">
			아이디 찾기 | 비밀번호 찾기 | 회원가입
		</div>
	</div>
</body>
</html>

 

레이아웃 큰 틀부터 잡고 차근차근!
html부터 작성하고 css에서 style을 주려고 하면 꼬일 수 있음

'UI/UX엔지니어링 > UI구현' 카테고리의 다른 글

Form Tag  (0) 2020.02.28
Block element/Inline element/Merge Cells  (0) 2020.02.27
UI 구현 39~66p  (0) 2020.02.27
전세계에서 가장 멋 없는 레이아웃 실습 ③  (0) 2020.02.19

<Form Tag 실습>

html에서는 데이터 받기가 안됨.

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

	<!--  
		###############################################
		<< form tag >>
		데이터를 전송하기 위한 태그
		form 태그의 속성에 method, action을 설정하여
		전송방식 및 전송경로를 지정해야한다.
		또한 form 태그의 자식 요소에 input, select, textarea 등
		데이타 입력 태그를 두고 submit을 실행하면 데이타가 전송된다.
		
		method 속성의 값은 post와 get으로 설정이 가능
			- post : 데이터를 body에 숨겨 전송  →등록, 수정
			- get : url로 전송 →검색 등
					url에서 ?~~~ : url query
				 	ex: ?sm=tab_hty.top&where=nexearch&query=Merge+Cells&oquery=Merge+Cells&tqi=UDmpLlprvxsssBYYx4VsssssteK-098759 
				 		== ?sm=tab_hty.top
				 			&where=nexearch
				 			&query=Merge+Cells
				 			&oquery=Merge+Cells
				 			&tqi=UDmpLlprvxsssBYYx4VsssssteK-098759
				 		→	키 = 값
				 			(이어서&)키 = 값
				 			(이어서&)키 = 값
				 		 
			- action : 전송될 경로를 입력 
			
		1. input - 텍스트 등록 및 수정 태그 (type 속성에 text, radio(단일 체크), checkbox(다중체크) 설정 가능)
			1) input 속성
				- type : input의 형태 지정
					+text - 일반적인 텍스트 입력
					+radio - 같은 name 값 중 1개만 선택
					+checkbox - 같은 name 값 다중 선택
					+date, number 등
				- name : 서버에 전송될 key의 명칭
				- value : 서버에 name의 key값으로 전송될 값
				- placeholder : 안내글
		2. select - 테이터 선택 태그
		3. textarea - 장문의 텍스트 등록 태그
		4. button - 이벤트 실행 및 submit
			1) button 속성
				- type : 이벤트 형태 지정 
					+button - javascript와 연동하여 이벤트 동작
					+submit - 데이터 전송
			
			
		###############################################
	 -->

	<form action="./form2.jsp" method="get"> <!-- html에서는 데이터 받기가 안됨 -->
		<label>
			유저명 :
			<input type="text" name="memberName" value="" placeholder="유저명 입력">
		</label>
		<button type="submit">전송</button>
	</form>

</body>
</html>

 

<만들어진 폼>

 

 



 

 

 

<jsp 파일 만들기>

데이터를 주고받기 위해 jsp 파일을 만든다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



<%
	//주석
	/* 주석 */
	
	//자바코드 기록
	
	/***************************************************************
	request 객체는 요청에 해당하는 정보를 담고있다.
	request의 getParameter라는 메서드를 활용하여
	데이터를 받을 수 있다.
	
	getParameter의 메서드 인수값을 전송된 key의 명으로 넣어 해당 key의 값을 받을 수 있다.
	***************************************************************/
	request.setCharacterEncoding("UTF-8");
	
	String memberName = request.getParameter("memberName"); //parameter > 문자열
		
	out.println(memberName);

	
%>

<!-- html 작성 -->

html 파일에서 action 속성의 경로를 jsp파일의 상대경로로 설정해준다.

 

<form action="./getData.jsp" method="get"> <!-- html에서는 데이터 받기가 안됨 -->
		<label>
			유저명 :
			<input type="text" name="memberName" value="" placeholder="유저명 입력">
		</label>
		<button type="submit">전송</button>
	</form>

<form 의 method 속성을 post로 설정할 경우>

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

	<form action="./getData.jsp" method="post">
		<label>
			유저명 :
			<input type="text" name="memberName" value="" placeholder="유저명 입력">
		</label>
		<button type="submit">전송</button>
	</form>

</body>
</html>

폼에 홍길동을 입력 후 전송

url에 키, 값이 보이지 않음을 확인할 수 있다.

 


<form 의 method 속성을 get으로 설정할 경우>

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

	<form action="./getData.jsp" method="get"> 
		<label>
			유저명 :
			<input type="text" name="memberName" value="" placeholder="유저명 입력">
		</label>
		<button type="submit">전송</button>
	</form>

</body>
</html>

폼에 홍길동을 입력 후 전송

 

?키 = 값

?memberName=홍길동 url에 보인다.

**url 상에서 값을 변경하여도 변경된 내용이 출력된다!

 


<input type 속성 radio / checkbox>

 

	<form action="./getData.jsp" method="get"> 
		<div>		
			<label>
				유저명 :
				<input type="text" name="memberName" value="" placeholder="유저명 입력">
			</label>
		</div>
		<div>	
			<label>
				남: <input type="radio" name="memberGender" value="남"> <!-- name 속성이 같아야 한다. -->
			</label>
			<label>
				여: <input type="radio" name="memberGender" value="여"> 
			</label>
		</div>
		<div>
			<label>
				전주 : <input type="checkbox" name="memberAdd" value="전주"> <!-- name 속성이 같아야 한다. -->
			</label>
			<label>
				군산 : <input type="checkbox" name="memberAdd" value="군산">
			</label>
			<label>
				익산 : <input type="checkbox" name="memberAdd" value="익산">
			</label>
		</div>
		<button type="submit">전송</button>
	</form>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



<%

	request.setCharacterEncoding("UTF-8");
	
	String memberName = request.getParameter("memberName"); //parameter > 문자열1
	String memberGender = request.getParameter("memberGender"); 
	
	String[] memberAdd = request.getParameterValues("memberAdd"); //parameterValues > 배열값
	

	out.println(memberName);
	out.println(memberGender);
	
	if(memberAdd != null){
		for(int i=0; i < memberAdd.length; i++){
			out.println(memberAdd[i]);
		}
	}
	
	


	
%>

유저명 :

 



 

입력

 

 

출력


<input type 속성 date / number>

 

<form action="./getData.jsp" method="get"> <!-- html에서는 데이터 받기가 안됨 -->
		<div>		
			<label>
				유저명 :
				<input type="text" name="memberName" value="" placeholder="유저명 입력">
			</label>
		</div>
		<div>	
			<label>
				남: <input type="radio" name="memberGender" value="남"> <!-- name 속성이 같아야 한다. -->
			</label>
			<label>
				여: <input type="radio" name="memberGender" value="여"> <!-- name 속성이 같아야 한다. -->
			</label>
		</div>
		<div>
			<label>
				전주 : <input type="checkbox" name="memberAdd" value="전주">
			</label>
			<label>
				군산 : <input type="checkbox" name="memberAdd" value="군산">
			</label>
			<label>
				익산 : <input type="checkbox" name="memberAdd" value="익산">
			</label>
		</div>
		
		
		<div>
			<label>
				날짜 : <input type="data" name= "memberWriteDate">
			</label>
		</div>
		 <div>
			<label>
				나이 : <input type="number" name= "memberAge">
			</label>
		</div>
		
		
		
		
		<button type="submit">전송</button>
	</form>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



<%

	request.setCharacterEncoding("UTF-8");
	
	String memberName = request.getParameter("memberName"); //parameter > 문자열1
	String memberGender = request.getParameter("memberGender"); 
    
    String[] memberAdd = request.getParameterValues("memberAdd"); //parameterValues > 배열값
    
	String memberWriteDate = request.getParameter("memberWriteDate"); 
	String memberAge = request.getParameter("memberAge"); 
	

	
 

	out.println(memberName);
	out.println(memberGender);

	
	if(memberAdd != null){
		for(int i=0; i < memberAdd.length; i++){
			out.println(memberAdd[i]);
		}
	}
    
    	out.println(memberWriteDate);
	out.println(memberAge);
	
%>


유저명 :

남: 

여: 

전주 :

군산 : 

익산 : 

날짜 :

나이 : 

 



입력

 

출력


<select>

		<div>
			<label>
				선택박스 : 
				<select name="memberTest">
					<option value=""> :: 선택 :: </option>
					<option value="testvalue1">test1</option> <!-- 넘어오는 값은 속성value에 지정된 값이다 -->
					<option value="testvalue2">test2</option>
					<option value="testvalue3">test3</option>
					<option value="testvalue4">test4</option>
					<option value="testvalue5">test5</option>
				</select>
			</label>
		</div>

 

입력

 

 

 

출력

select 에서 test3으로 보이는 option의 value로는 testvalue3이 입력되었다.


<textarea>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Tag</title>
</head>
<body>
	
	<form action="./getData.jsp" method="get">
		<div>		
			<label>
				유저명 :
				<input type="text" name="memberName" value="" placeholder="유저명 입력">
			</label>
		</div>
		<div>	
			<label>
				남: <input type="radio" name="memberGender" value="남">
			</label>
			<label>
				여: <input type="radio" name="memberGender" value="여">
			</label>
		</div>
		<div>
			<label>
				전주 : <input type="checkbox" name="memberAdd" value="전주">
			</label>
			<label>
				군산 : <input type="checkbox" name="memberAdd" value="군산">
			</label>
			<label>
				익산 : <input type="checkbox" name="memberAdd" value="익산">
			</label>
		</div>
			<div>
			<label>
				날짜 : <input type="date" name= "memberWriteDate">
			</label>
		</div>
		<div>
			<label>
				나이 : <input type="number" name= "memberAge">
			</label>
		</div>
		
		<div>
			<label>
				선택박스 : 
				<select name="memberTest">
					<option value=""> :: 선택 :: </option>
					<option value="testvalue1">test1</option>
					<option value="testvalue2">test2</option>
					<option value="testvalue3">test3</option>
					<option value="testvalue4">test4</option>
					<option value="testvalue5">test5</option>
				</select>
			</label>
		</div>
		
		<div>	
			<label>
				본문입력 : 
				<textarea name="memberContent" style="width: 100%; height: 100px;"></textarea> 
			</label>
		</div>
		
		<button type="submit">전송</button>
	</form>

</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



<%
	
	request.setCharacterEncoding("UTF-8");
	
	String memberName = request.getParameter("memberName"); //parameter 
	String memberGender = request.getParameter("memberGender"); 
	
	String[] memberAdd = request.getParameterValues("memberAdd"); //parameterValues 
	
	String memberWriteDate = request.getParameter("memberWriteDate"); 
	String memberAge = request.getParameter("memberAge"); 
	String memberTest = request.getParameter("memberTest");
	String memberContent = request.getParameter("memberContent");
	
	out.println(memberName);
	out.println(memberGender);

	if(memberAdd != null){
		for(int i=0; i < memberAdd.length; i++){
			out.println(memberAdd[i]);
		}
	}

	out.println(memberWriteDate);
	out.println(memberAge);
	out.println(memberTest);
	out.println(memberContent);
	
%>

 


 

 

<div>	
	<label>
		본문입력 : 
		<textarea name="memberContent" style="width: 100%; height: 100px;">테스트입니다.</textarea> 
		<!-- <textarea>이 안에는 엔터를 포함한 모든 내용이 입력되어 호출됨!</textarea> -->	
	</label>
</div>
	

<textarea>와</textarea> 사이에는 엔터와 들여쓰기를 포함한 모든 내용이 입력된 채로 호출된다.

 

블럭 요소와 인라인 요소

블럭 요소와 인라인 요소를 이해하고 CSS의 사용방법을 확인 할 수 있다.

블럭 요소(block element)

-모든 인라인 요소를 포함할 수 있고 다른 블럭 요소도 일부 포함(자식요소로 포함)

-자동 줄바꿈

-기본적으로 가로폭 100%을 가지는 직사각형 형태

-블럭요소는 인라인 요소로도 변경 가능(CSS 속성 display로 가능)

-높이와 넓이 설정 가능

-마진 패딩 설정 가능

-주로 레이아웃을 구성할때 사용 

-br 태그 금지!

블록 요소 종류

addressarticleasideaudioblockquotecanvasdddivdlfieldsetfigcaptionfigurefooterformh1h2h3h4h5h6headerhgrouphrnoscriptoloutput, ppre, section, table, ulvideo

인라인 요소(inline element)

-항상 블록 요소안에 포함되어 있음(항상 부모 객체는 블록 요소)
-인라인 요소안에 인라인 요소 포함 가능
-높이설정 불가능
-CSS 속성 중 Line-height로 텍스트(줄) 높낮이를 조절 가능
-CSS 속성 중 text-align로 좌,우,중 정렬가능
-줄 바꿈이 자동으로 없음

인라인 요소 종류

aabbracronymbbdobigbrbuttoncitecodedfnemiimginputkbdlabelmapobjectqsampsmallscriptselectspanstrongsubsuptextareattvar

<레이아웃 구성하기 실습>

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>레이아웃 구성하기</title>
		<style type="text/css">
		
		
		
		/*
		****************************************
		레이아웃 구성시 주로 사용되는 css 속성
		
		float : 블럭 요소의 객체를 정렬할 때 쓰는 속성 
				- 속성이 적용된 객체는 자동 가로 사이즈 100%가 해제된다.
		clear : float으로 정렬된 속성을 해제할 때 쓰는 속성
		margin : 선택된 객체의 외부 여백 (상 우 하 좌 / 상하 좌우 / 상하좌우)
		padding : 선택된 객체의 내부 여백
		width : 가로 사이즈                                               
		height : 세로 사이즈
		min-width : 최소 가로 사이즈
		max-width : 최대 가로 사이즈
		min-height : 최소 세로 사이즈
		max-height : 최대 세로 사이즈
		****************************************
		*/
		
		a{color: #f00; text-decoration: none;}
		a:hover{color: #00f;}
		
		body{
			background-color: #efefef;
			background: url('./resource/img/logo.PNG');
			background-repeat:no-repeat;
			background-position: top center;
		}
				
		#container{width : 1100px; margin: 0 auto; min-height: 600px; clear:both;} 
		#left-wrap, #content-warp {float: left;}
		#left-wrap{width: 250px; min-height: 700px;}
		#left-wrap ul li{list-style : decimal;}
		#content-wrap{width: 900px; margin: 0;}
		#footer{clear: both; text-align: center; height: 100px; border-top: 1px solid #000;}
		
		header{margin: auto auto; height: 100px;}
		#logo{float: left; height: 50px; width: 20%; text-align: center; padding: 20px 0 }
		#logo img{width: 100px;} /* 인라인 태그중 높이가 적용되는 태그. 세로 없이 가로만 지정하면 비율에 맞춰 크기 조절  */
		#expt-logo{float: right; height: 100%; width: 80%;}
		#top-link{height: 50%; text-align: right;}
		#menu{}
		#menu ul{float: right;}
		#menu ul li{float: left; list-style: none; padding: 10px;  }
		#menu ul li a{padding: 0 15px;}
		
		td{border: 1px solid #000;}		
		
		</style>
	</head>
	<body>
	
		<header > 
			<div id="logo">
				<img src="./resource/img/logo.PNG" alt="로고" >
			</div>
			<div id="expt-logo">
				<div id="top-link">
					<a href="./layout_css.html">home</a>
					|
					<a href="#">join</a>
					|
					<a href="#">login</a>
				</div>
				<nav id= "menu">			
					<ul>
						<li> <a href="#">대메뉴1</a> </li>
						<li> <a href="#">대메뉴2</a> </li>
						<li> <a href="#">대메뉴3</a> </li>
						<li> <a href="#">대메뉴4</a> </li>
						<li> <a href="#">대메뉴5</a> </li>
					</ul>
				</nav>
				
				
			</div>
		</header>
	
		<div id= "container" >
			<div id= "left-wrap">
				<ul>
					<li> <a href="#">서브메뉴1</a> </li>
					<li> <a href="#">서브메뉴2</a> </li>
					<li> <a href="#">서브메뉴3</a> </li>
				</ul>
			</div>
			<div id="content-wrap">
								
				<!--  
				##############################################
				
					< 병합하기 >
					td의 속성을 지정하여 병합을 할 수 있다.
					
					- colspan : 가로병합
					- rowspan : 세로병합
					
				##############################################
				-->
				<table>
					
					<thead>
						<tr>
							<th>번호</th>
							<th>카테고리</th>
							<th>제목</th>
						</tr>
					</thead>
					
					<tbody>
						<tr>
							<td>
								5
							</td>
							<td rowspan="2" ><!-- 병합할 셀 개수 (나 자신을 포함) -->
								국어
							</td>
							<td>
								국어점수
							</td>
						</tr>
						<tr>
							<td>
								5
							</td>

							<td>
								국어점수2
							</td>
						</tr>
						<tr>
							<td>
								5
							</td>
							<td colspan="2">
								수학
							</td>

						</tr>
					</tbody>
				
					<tfoot>
					
					</tfoot>
				
				</table>
						
			<!--
			##########################################
				실습1. 테이블을 아래 
				분류, 제목, 작성자, 작성일의 열을 가진
				데이타를 10행을 생성하여 출력을 시키고
				같은 분류의 내용은 병합시켜라.
			##########################################	
			-->
			
			<table>
				<thead>
					<tr>
						<th>분류</th>
						<th>제목</th>
						<th>작성자</th>
						<th>작성일</th>				
					</tr>
				</thead>
				
				<tbody>
					<tr>
						<td rowspan="2">문학</td>
						<td>괭이씨미요</td>
						<td>김모모</td>
						<td>2020.02.26</td>
					</tr>
					<tr>
						
						<td>쿠쿠</td>
						<td>unis</td>
						<td>1999.01.15</td>
					</tr>
					<tr>
						<td rowspan="3">예술</td>
						<td>미학오디세이1</td>
						<td>진중권</td>
						<td>2010.10.10</td>
					</tr>
					<tr>
						
						<td>미학오디세이2</td>
						<td>진중권</td>
						<td>2011.11.11</td>
					</tr>
					<tr>
						
						<td>미학오디세이3</td>
						<td>진중권</td>
						<td>2012.12.12</td>
					</tr>
					<tr>
						<td rowspan="2">기술과학</td>
						<td>ncs학습모듈</td>
						<td>cns</td>
						<td>2020.02.25</td>
					</tr>
					<tr>
						
						<td>이기적 유전자</td>
						<td>리처드 도킨슨</td>
						<td>1976.5.5</td>
					</tr>
					<tr>
						<td>철학</td>
						<td>생각한다는 것</td>
						<td>고병권</td>
						<td>2010.12.23</td>
					</tr>
					<tr>
						<td rowspan="2">언어</td>
						<td>토익 RC</td>
						<td>토익책팔이</td>
						<td>2019.12.10</td>
					</tr>
					<tr>

						<td>토익 LC</td>
						<td>토익책팔이</td>
						<td>2019.11.5</td>
					</tr>		
				</tbody>
				
				<tfoot>
				
				
				</tfoot>
			
			
			
			</table>
			
				
			</div>
		</div>
	
		<footer id= "footer">
			풋터 영역
		</footer>
	</body>
</html>

 

css를 외부 파일(resource)로 만들기

 

Wepcontent/resource/css 폴더 내에 common.css 파일 생성

html 파일에서 작성했던 <style>..</style> 내용을 생성한 common.css에 잘라넣기

 

<CSS>

@charset "UTF-8";
<style type="text/css">
				/*
		****************************************
		레이아웃 구성시 주로 사용되는 css 속성
		
		float : 블럭 요소의 객체를 정렬할 때 쓰는 속성 
				- 속성이 적용된 객체는 자동 가로 사이즈 100%가 해제된다.
		clear : float으로 정렬된 속성을 해제할 때 쓰는 속성
		margin : 선택된 객체의 외부 여백 (상 우 하 좌 / 상하 좌우 / 상하좌우)
		padding : 선택된 객체의 내부 여백
		width : 가로 사이즈                                               
		height : 세로 사이즈
		min-width : 최소 가로 사이즈
		max-width : 최대 가로 사이즈
		min-height : 최소 세로 사이즈
		max-height : 최대 세로 사이즈
		****************************************
		*/
		
		div, span, li, td{
			margin: 0; padding: 0; font-size: 14px; color: #2e2e2e;
		}
		
		a{color: #ff0000; text-decoration: none;}
		a:hover{color: #0000ff;}
		
		body{
			background-color: #efefef;
			background: url('./resource/img/logo.PNG');
			background-repeat:no-repeat;
			background-position: top center;
		}
				
		#container{width : 1100px; margin: 0 auto; min-height: 600px; clear:both;} 
		#left-wrap, #content-warp {float: left;}
		#left-wrap{width: 250px; min-height: 700px;}
		#left-wrap ul li{list-style : decimal;}
		#content-wrap{width: 900px; margin: 0;}
		#footer{clear: both; text-align: center; height: 100px; border-top: 1px solid #000;}
		
		header{margin: auto auto; height: 100px;}
		#logo{float: left; height: 50px; width: 20%; text-align: center; padding: 20px 0 }
		#logo img{width: 100px;} /* 인라인 태그중 높이가 적용되는 태그. 세로 없이 가로만 지정하면 비율에 맞춰 크기 조절  */
		#expt-logo{float: right; height: 100%; width: 80%;}
		#top-link{height: 50%; text-align: right;}
		#menu{}
		#menu ul{float: right;}
		#menu ul li{float: left; list-style: none; padding: 10px;  }
		#menu ul li a{padding: 0 15px;}
		
		td{border: 1px solid #000;}		
		
</style>

 

 

html 파일의 <head..></head> 부분에 css 파일을 연결하는 코드 작성하기.

 

<html>

<link href="./resource/css/common.css" rel="stylesheet">
<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>레이아웃 구성하기</title>
		<link href="./resource/css/common.css" rel="stylesheet">
	</head>
	<body>
	
		<header > 
			<div id="logo">
				<img src="./resource/img/logo.PNG" alt="로고" >
			</div>
			<div id="expt-logo">
				<div id="top-link">
					<a href="./layout_css.html">home</a>
					|
					<a href="#">join</a>
					|
					<a href="#">login</a>
				</div>
				<nav id= "menu">			
					<ul> 
						<li> <a href="#">대메뉴1</a> </li>
						<li> <a href="#">대메뉴2</a> </li>
						<li> <a href="#">대메뉴3</a> </li>
						<li> <a href="#">대메뉴4</a> </li>
						<li> <a href="#">대메뉴5</a> </li>
					</ul>
				</nav>
				
				
			</div>
		</header>
	
		<div id= "container" >
			<div id= "left-wrap">
				<ul>
					<li> <a href="#">서브메뉴1</a> </li>
					<li> <a href="#">서브메뉴2</a> </li>
					<li> <a href="#">서브메뉴3</a> </li>
				</ul>
			</div>
			<div id="content-wrap">
								
				<!--  
				##############################################
				
					< 병합하기 >
					td의 속성을 지정하여 병합을 할 수 있다.
					
					- colspan : 가로병합
					- rowspan : 세로병합
					
				##############################################
				-->
				<table>
					
					<thead>
						<tr>
							<th>번호</th>
							<th>카테고리</th>
							<th>제목</th>
						</tr>
					</thead>
					
					<tbody>
						<tr>
							<td>
								5
							</td>
							<td rowspan="2" ><!-- 병합할 셀 개수 (나 자신을 포함) -->
								국어
							</td>
							<td>
								국어점수
							</td>
						</tr>
						<tr>
							<td>
								5
							</td>

							<td>
								국어점수2
							</td>
						</tr>
						<tr>
							<td>
								5
							</td>
							<td colspan="2">
								수학
							</td>

						</tr>
					</tbody>
				
					<tfoot>
					
					</tfoot>
				
				</table>
						
			<!--
			##########################################
				실습1. 테이블을 아래 
				분류, 제목, 작성자, 작성일의 열을 가진
				데이타를 10행을 생성하여 출력을 시키고
				같은 분류의 내용은 병합시켜라.
			##########################################	
			-->
			
			<table>
				<thead>
					<tr>
						<th>분류</th>
						<th>제목</th>
						<th>작성자</th>
						<th>작성일</th>				
					</tr>
				</thead>
				
				<tbody>
					<tr>
						<td rowspan="2">문학</td>
						<td>괭이씨미요</td>
						<td>김모모</td>
						<td>2020.02.26</td>
					</tr>
					<tr>
						
						<td>쿠쿠</td>
						<td>unis</td>
						<td>1999.01.15</td>
					</tr>
					<tr>
						<td rowspan="3">예술</td>
						<td>미학오디세이1</td>
						<td>진중권</td>
						<td>2010.10.10</td>
					</tr>
					<tr>
						
						<td>미학오디세이2</td>
						<td>진중권</td>
						<td>2011.11.11</td>
					</tr>
					<tr>
						
						<td>미학오디세이3</td>
						<td>진중권</td>
						<td>2012.12.12</td>
					</tr>
					<tr>
						<td rowspan="2">기술과학</td>
						<td>ncs학습모듈 어쩌구</td>
						<td>cns</td>
						<td>2020.02.25</td>
					</tr>
					<tr>
						
						<td>이기적 유전자</td>
						<td>리처드 도킨슨</td>
						<td>1976.5.5</td>
					</tr>
					<tr>
						<td>철학</td>
						<td>생각한다는 것</td>
						<td>고병권</td>
						<td>2010.12.23</td>
					</tr>
					<tr>
						<td rowspan="2">언어</td>
						<td>토익 RC</td>
						<td>토익책팔이</td>
						<td>2019.12.10</td>
					</tr>
					<tr>

						<td>토익 LC</td>
						<td>토익책팔이</td>
						<td>2019.11.5</td>
					</tr>		
				</tbody>
				
				<tfoot>
				
				
				</tfoot>
			
			
			
			</table>
			
				
			</div>
		</div>
	
		<footer id= "footer">
			풋터 영역
		</footer>
	</body>
</html>

 

 

출력되는 모습

 

 

'UI/UX엔지니어링 > UI구현' 카테고리의 다른 글

폼과 레이아웃 실습  (0) 2020.02.28
Form Tag  (0) 2020.02.28
UI 구현 39~66p  (0) 2020.02.27
전세계에서 가장 멋 없는 레이아웃 실습 ③  (0) 2020.02.19

+ Recent posts