8일차(6/16금)
- CSS
- 회원가입 form 코드 만들기
CSS
회원가입 form 만들기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 폼</title>
<style type="text/css">
*{ /*초기화*/
margin: 0;
padding: 0;
}
/*리스트 스타일 타입을 없애기*/
ul{list-style-type: none;}
/*바디 전체에 글꼴을 지정 브라우저의 파싱에 의해 맑은 고딕이 먼저 지정하고 , 없으면 돋움을 지정*/
body{
font-family: "맑은고딕","돋움";
font-size:20px;
color:#444444
}
/*하나만 지정하는 경우 id 로 지정하는 경우 있음*/
#login_box{
width: 340px;
height: 160px;
border: solid 1px #bbbbbb;
border-radius:15px;
margin:10px 0 0 10px;
padding:10px 0 0 15px;
}
h2{
font-family: "Arial";
margin-bottom:14px;
}
#login_box input{ /* 아이디가 login_box이고 그 하위 태그가 input인 경우*/
width: 160px;
height: 20px;
}
/*두개의 선택자 모두에게 지정할 ,로 지정*/
#id_pass, #login_btn {
display:inline-block;
vertical-align:top;
}
/*id_pass라는 id 후손에 span태그가 있을 때 지정*/
#id_pass span{
display: inline-block;
width:60px;
}
#pass{
margin-top: 3px;
}
/*id가 login_btn이고 후손이 button이라는 태그가 있을 때*/
#login_btn button{
margin-top: 5px;
margin-left: 5px;
padding: 12px;
border-radius: 5px;
}
#btns {
margin:12px 0 0 0;
text-decoration:underline;
}
#btns li{
margin-left:10px;
display:inline;
}
</style>
</head>
<body>
<!-- 서버로 데이터를 전송하는 태그(엘리먼트) form
action = 서버에 들어가는 페이지
-->
<form action="" method="get">
<div id="login_box"> <!-- 블럭단위의 영역지정 -->
<!-- 제목 -->
<h2>Member Login</h2>
<ul> <!-- 리스트로 아이디, 패스워드, 버튼 -->
<li id=id_pass>
<ul>
<li><span>아이디</span>
<input type="text">
</li><!-- 인라인 방식으로 아이디와 입력창 -->
<li id="pass"><span>암호</span>
<input type="password">
</li><!-- 인라인 방식으로 패스워드와 입력창 -->
</ul>
</li>
<li id="login_btn">
<button>로그인</button>
</li><!-- 로그인 하라는 버튼 -->
</ul>
<ul id="btns"> <!-- 회원가입, 비밀번호 찾기 -->
<li>회원가입</li>
<li>아이디/비밀번호 찾기</li>
</ul>
</div><!--로그인 블록-->
</form>
</body>
</html>-
가입양식
-
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>회원가입</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{list-style-type: none;} h3{ margin: 20px 0 0 50px; } #joinForm{ width: 600px; margin: 10px 0 0 50px; font-family: "돋움"; font-size: 12px; color: #444444; padding-top: 5px; padding-bottom: 10px; border-top: solid 1px #cccccc; border-bottom: solid 1px #cccccc; } .cols li{ display: inline-block; margin-top: 5px; } .cols li.col1{ width: 100px; text-align: right; } .cols li.col2{ width: 350px; } .cols li.col2 input.hp{ width: 40px; } #intro{ vertical-align: top; } </style> </head> <body> <h3>가입 양식</h3> <form action="" method="post"> <ul id="joinForm"> <li> <!-- 아이디 --> <ul class="cols"> <li class="col1">아이디 : </li> <li class="col2"><input type="text"></li> </ul> </li> <li> <!-- 비밀번호 --> <ul class="cols"> <li class="col1">비밀번호 : </li> <li class="col2"><input type="password"></li> </ul> </li> <li> <!-- 비밀번호 확인 --> <ul class="cols"> <li class="col1">비밀번호 확인: </li> <li class="col2"><input type="password"></li> </ul> </li> <li> <!-- 이름 --> <ul class="cols"> <li class="col1">이름 : </li> <li class="col2"><input type="text"></li> </ul> </li> <li><!-- 성별 --> <ul class="cols"> <li class="col1">성별 : </li> <li class="col2"><input type="radio" name="sex" checked="checked">여성 <input type="radio" name="sex">남성 </li> </ul> </li> <li> <!-- 휴대전화 --> <ul class="cols"> <li class="col1">휴대전화 : </li> <li class="col2"><input type="text" class="hp">- <input type="text" class="hp"> -<input type="text" class="hp"> </li> </ul> </li> <li> <!-- 이메일 --> <ul class="cols"> <li class="col1">이메일 : </li> <li class="col2"><input id="email1" type="text">@ <select id="email2"> <option>선택</option> <option>naver.com</option> <option>hanmail.net</option> <option>gmail.com</option> </select> </li> </ul> </li> <li><!-- 취미 --> <ul class="cols"> <li class="col1">취미 : </li> <li class="col2"> <input type="checkbox" name="hobby1"> 음악감상 <input type="checkbox" name="hobby2"> 독서 <input type="checkbox" name="hobby3"> 오디오북듣기 </li> </ul> </li> <li> <!-- 자기소개 --> <ul class="cols"> <li class="col1" id="intro">자기소개 : </li> <li class="col2"> <textarea rows="5" cols="35"></textarea> </li> </ul> </li> <li> <!-- 파일첨부 --> <ul class="cols"> <li class="col1">파일첨부 : </li> <li class="col2"><input type="file">*2MB까지 가능 </li> </ul> </li> </ul> </form> </body> </html>🤪MySQL
<알게 된 것>
-
테이블이 달라도 속성은 같은걸 만들 수 있음.
-
보통 다른 테이블에 같은 속성이 존재 하는 것은 외래키를 참조한 걸로 알면 된다.
동시성제어
group by 문
group by에서 조건을 붙이면 having으로 처리해야 한다.
from
where
group by
having
order by
USE 문
특정 데이터베이스를 선택하기 위해 사용되는 SQL 문
show databases;
MySQL 서버는 데이터베이스의 목록을 반환
show table status;
-
데이터베이스 내의 모든 테이블에 대한 상태 정보를 조회
show tables;
데이터베이스 내의 모든 테이블 목록을 조회
in (’조건1’,’조건2’)
기본적으로 ‘또는’의 의미를 갖네!
조건1 또는 조건2에 해당하는 값을 불러옴.
-
in 예제1
원래는 테이블 정의서를 보고 필드명을 쓸 수 있게 해준다.
하지만 연습에선 걍 필드를 일일이 보고있긴한다고한다.
where exists ( select… from… 등등 )
exists ⇒ 일반적으로 if문과 같음. 근데 거꾸로가는 if문
괄호 안의 쿼리문이 만약 존재하면, 해줘!
in
은 ()안의 모든 조건에 참이 될 수 있는 모든 경우
서브쿼리!
단수는 ‘=’, 복수는 ‘in’
예시 1
서브쿼리 예시1
⇒ 평균값을 나는 sum(sal) / count(*) 로 작성했는데
⇒ avg(sal) 로 간단하게 쓸 수도 있었겠구나!
서브쿼리 예시2
-
서브쿼리 예시3 
### JOIN
- 테이블 두 개를 같이 놓고 보자 !
- 두 개 이상의 테이블을 서로 묶어서 하나의 결과 집합으로 만들어 내는 것!
- 종류
- INNER JOIN (이너 조인)
 
OUTER JOIN (아우터 조인)
CROSS JOIN (크로스 조인) ⇒ 쓸 일이 잘 없음 !!! 서버 폭파날라 ~
cross join 예시!!
SELF JOIN (셀프 조인)
하나의 테이블 내에서 또다른 테이블을 찾아보고싶을 때를 셀프 조인이라고 한다.
데이터베이스의 테이블
-
중복과 공간 낭비를 피하고 데이터의 무결성을 위해 여러 개의 테이블로 분리하여 저장
- 분리된 테이블은 서로 관계를 가짐
- 1대 다 관계 보편적🕵️Java
배열
배열을 입력 받고 합계와 평균구하기
```java package ex6; import java.util.Scanner; public class Array02_1 { public static void main(String[] args) { Scanner s = new Scanner(System.in); int sum = 0; int[] Arr =new int[5]; for (int i=0; i<5; i++) { System.out.println((i+1)+"번째 정수를 입력하세요."); Arr[i]=s.nextInt(); sum += Arr[i]; } System.out.println("합계는"+sum+"입니다."); double avg = sum/Arr.length; System.out.printf("평균은 %6.2f", avg); System.out.print("입니다."); } } ```실수로 정의한 변수에 정수 연산값만 넣게 되면 정수형 데이터타입이 출력될 수 있음 !
2차원 배열
-
2차원 배열의 행의 길이
- 배열.length
-
2차원 배열의 열의 길이
- 배열[i].length
package ex6; public class Example03 { public static void main(String[] args) { int[][] myArr = new int[2][4]; myArr[0][0] = 2; myArr[0][1] = 5; myArr[0][2] = 7; myArr[0][3] = 4; myArr[1][0] = 9; myArr[1][1] = 3; myArr[1][2] = 2; myArr[1][3] = 8; int sum1=0, sum2 =0; for (int i=0; i<4; i++) { sum1 += myArr[0][i]; } System.out.println("첫 번째 행의 합계:"+sum1); for (int i=0; i<4; i++) { sum2 += myArr[1][i]; } System.out.println("두 번째 행의 합계:"+sum2); } }예제 2 이중for문
package ex6; public class Example03 { public static void main(String[] args) { int[][] myArr = new int[2][4]; myArr[0][0] = 2; myArr[0][1] = 5; myArr[0][2] = 7; myArr[0][3] = 4; myArr[1][0] = 9; myArr[1][1] = 3; myArr[1][2] = 2; myArr[1][3] = 8; //for 행이 변하는 반복 //행 하나에 열이 변하는 반복 int sum=0; for (int i=0; i<myArr.length; i++) { sum=0; for (int j=0; j<myArr[i].length; j++) { System.out.print(myArr[i][j]+"\t"); sum += myArr[i][j]; } System.out.println(); System.out.println((i+1)+"번째 행의 합계:"+sum); } } }
package ex6;
import java.util.Scanner;
public class Array03 {
public static void main(String[] args) {
double[][] marks = *new* double[2][3];
Scanner s = *new* Scanner(System.in);
*for*(int i=0; i<marks.length; i++) {
System.out.println("학생 번호 "+(i+1));
System.out.println("국어 점수 ");
marks[i][0] = s.nextDouble();
System.out.println("수학 점수 ");
marks[i][1] = s.nextDouble();
marks[i][2]=(marks[i][0]+marks[i][1])/2;
}
*// 학생 번호, 국어, 수학, 평균 출력 for 하나만*
*for* (int i=0; i<2; i++) {
System.out.print("학생번호: "+(i+1));
System.out.print("::: 국어점수 "+marks[i][0]+":::");
System.out.print("::: 수학점수 "+marks[i][1]+":::");
System.out.println("::: 개인평균 "+marks[i][2]);
}
}
}개인적으로 2중for문과 if문으로 다시 풀어본 위 예제 !
package ex6;
import java.util.Scanner;
public class Array03_1 {
public static void main(String[] args) {
Scanner s = new Scanner(System.in);
int [][] hi = new int[2][3];
double avg = 0.0;
String [] subject = {"국어","수학","평균점수"};
//열은 학생1, 학생2로 구성
//행은 국어,수학,평균으로 구성
for (int i=0; i<hi.length; i++) {
for (int j=0; j<hi[i].length; j++) {
if (j<hi[i].length-1){
System.out.println("학생"+(i+1)+"번");
System.out.println(subject[j]+"성적을 입력하세요.");
hi[i][j] = s.nextInt();
}
else{
avg = (hi[i][0]+hi[i][1])/2;
System.out.println("학생"+ (i+1)+ "의 평균은"+ avg +"입니다.");
}
}
}
//국어점수,수학점수,평균점수를 출력해라
}
}
1% 개발자를 향해:: 개발 공부 일지를 써나갑니다