D+17::Html/css코드/목록 태그/폼태그/회원가입만들기/

Am.Vinch·2022년 7월 19일
0

[자바국비학원] 수업내용정리

목록 보기
17/92

220719_tue

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--css코드는 항상 title 태그 다음에 넣는다.!!  -->
<style type="text/css">
/* 이 파일의 모든 테이블 태그에 디자인 적용 */
table{
	

	border-collapse:collapse; /*이중선 테두리 없애기 */
	width: 400px; /* 테이블의 가로길이 */
	text-align: center; /* 글자 정렬 */


}
tr,td{  /*일부만 적용하고 싶을 때*


</style>
</head>
<body>
	<table><!--table 영역 안에는 td,tr 이외 밑에 세개도 올 수 있다.  -->
		<thead><!--제목줄  -->
			<tr>
				<td>이름</td>
				<td>국어점수</td>
				<td>영어점수</td>
			</tr>
		</thead><!--제목줄  -->
		<tbody><!--내용 목록들  -->
			<tr>
				<td>김자바</td>
				<td>90</td>
				<td>80</td>
			</tr>
			<tr><!--목록들  -->
				<td>박자바</td>
				<td>100</td>
				<td>40</td>
			</tr>
			<tr>
				<td>이자바</td>
				<td>70</td>
				<td>80</td>
			</tr>
		</tbody><!--목록들  -->
		<tfoot>
			<tr>
				<td>합계</td>
				<td>260</td>
				<td>200</td>
			</tr>
		</tfoot><!--마지막 정리줄  -->		
	</table>
</body>
</html>

[결과]

Insert title here

이름 국어점수 영어점수
김자바 90 80
박자바 100 40
이자바 70 80
합계 260 200

리스트만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>목록 태그</h3>
<!--  순서가 있는 목록 태그 -->
<ol>
	<li>c++</li><!-- 리스트만들기 -->
	<li>JAVA</li>
	<li>PYTHON</li>
</ol>
<!--순서가 없는 목록 태그  -->
<ul>
	<li>c++</li>
	<li>JAVA</li>
	<li>PYTHON</li>
</ul>

</body>
</html>

[결과]

Insert title here

목록 태그

  1. c++
  2. JAVA
  3. PYTHON
  • c++
  • JAVA
  • PYTHON

예제 1)

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
	text-align: left;
}
</style>
</head>
<body>
<h3>회원가입</h3>
 <table>
	<tr>
		<td>ID</td> 
		<td><input type = "text" placeholder = ""></td> 
	</tr>
	<tr>
		<td>PW</td>
		<td><input type = "password" placeholder=""></td>
	</tr>	
	<tr>
		<td>확인</td>
		<td><input type = "password" placeholder=""></td>
	</tr>
	<tr>
		<td>성별</td>
		<td><input type="radio" name="abc" checked>남
		<input type="radio" name = "abc">여</td>
	</tr>
	<tr>	
		<td>취미</td>
		<td><input type = "checkbox">운동
		<input type = "checkbox">여행
		<input type = "checkbox">독서</td>
	</tr>
	<tr>	
		<td>생일</td>
		<td><input type = "date"></td>
	</tr>
	<tr>
		<td>나이</td>
		<td><input type = "number"></td>	
	</tr>
	<tr>
		<td>이메일</td>
		<td><input type = "text" value = "">@
		<select>
		<option>naver.com</option>
		<option>daum.net</option>
		</select>
		</td>
	<tr>
		<td>메모</td>
		<td><textarea rows = "5" cols ="50"></textarea>
		</td>
	
	<tr>
		<td><input type = "button" value = "signup"></td>
		<td><input type = "button" value = "reset"></td>
	</tr>
</table>
</body>
</html>

[결과]

Insert title here

회원가입

ID
PW
확인
성별 남 여
취미 운동 여행 독서
생일
나이
이메일 @ naver.com daum.net
메모

예제2)

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#남구{/* 아이디가 남구인 태그에 속성 주기 */
	color: blue;
}
.빨간색{/*클래스(특정부분만)가 빨간색인 태그에 속성 주기  */
	color: red;
}
.빨간색:hover{/* 마우스를 올리면(hover) 색상이 변함. */
	color:fuchsia; 
}

/* 부모 - 자식 */
#aaa > li {/* 아이디가 aaa인 (부모)태그에 달려있는 li(자식)태그에 접근*/
	color: green;
}
/* 부모 - 자손 태그 */
#aaa  li {/* 아이디가 aaa인 (부모)태그에 달려있는 li(자손)태그에 접근*/
	color: green;
}
</style>
</head>
<body>
<ul>
	<li>서울시
		<ul>
		 	<li class = "빨간색">강남구</li>
		 	<li>관악구</li>
		 	<li>중구</li>
		</ul>
	</li>
	<li>울산시
		<ul>
			<li class = "빨간색">동구</li>
			<li>북구</li>
			<li id = "남구">
			남구
				<ul id ="aaa">
					<li>삼산동</li>
					<li>
						달동
						<ul>
							<li>123</li>
							<li>456</li>
						</ul>				
					</li>
					<li>신정동</li>			
				</ul>
			</li>	
			<li>중구</li>
		</ul>
	</li>
	
	<li>부산시
	</li>
</ul>
</body>
</html>
Insert title here /
#aaa > li {/ 아이디가 aaa인 (부모)태그에 달려있는 li(자식)태그에 접근/
color: green;
}
/ 부모 - 자손 태그 /
#aaa li {/ 아이디가 aaa인 (부모)태그에 달려있는 li(자손)태그에 접근/
color: green;
}

  • 서울시
    • 강남구
    • 관악구
    • 중구
  • 울산시
    • 동구
    • 북구
    • 남구
      • 삼산동
      • 달동
        • 123
        • 456
      • 신정동
    • 중구
  • 부산시

웹페이지
server - client
w.s(웹서버)-w.b(웹브라우저(chrome) =w.c)
WAS(웹애플리케이션서버) ex)톰캣(서버해석)
-->웹개발위해 톰캣 설치 이유
ex)naver본사 ex)사용자pc

servlet : html + java
-자바코드에 html 이 추가된 것.

jsp : html +java
-html에 java가 추가된 것.

java 다이나믹 프로젝트 > java > servlet 파일 만들기

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Hello
 */
@WebServlet("/Hello")
//servlet : 자바 베이스의 html + 자바
//HttpServlet이라는 클래스를 상속받아,
//만들어진 클래스를 다른 이름으로 servlet이라 한다.
public class Hello extends HttpServlet {//java에서 만든 인터넷기능들을 hello에서 사용가능하다(상속)
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Hello() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

페이지 이동 방법

  1. form 태그>데이터넘겨올수있다.
  2. a태그

실습문제)
-score.html를 만들어서 학생의 이름,국어,영어점수를 입력받을 수 있게 화면구성.
-세 정보를 입력받은 후 전송이라는 버튼을 클릭하면 Student라는 servlet으로 이동(확장자 x).이때 입력받은 세 정보를 가지고 이동해야한다.(form 태그 사용- 태그안 내용 자동으로 가져간다.)
-입력받은 정보를 전달받았다면 전달받은 학생의 이름,영어점수,수학점수,총점을 인터넷상에 띄어보세요.(html 파일 1개 , servlet 파일 1개)

①score.html 파일 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action = "student" method = "post"><!--확장자x -서블릿이동.  -->
	name <input type= "text" name="name"><br>
	korScore <input type= "text" name="korScore"><br>
	engScore <input type= "text" name="engScore"><br>
	<input type = "submit" value = "전송">
</form>
<br>
<a href = "Student"></a>
</body>
</html>

②student.java파일 만들기

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/student")//대소문자 구분
public class student extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public student() {
        super();
    }
//오버라이딩(둘 중 하나 메소드(doPost) 반드시 실행된다.
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//데이터받을때 requeset.getParameter사용한다.
		String name = request.getParameter("name");
		String korScore = request.getParameter("korScore");
		String engScore = request.getParameter("engScore");
		
		//문자열을 정수로 바꾸기.(정수의 합으로 총점을 구하기위해)
		int Kor = Integer.parseInt(korScore);
		int Eng = Integer.parseInt(engScore);
		int total = Kor +Eng;
		
		PrintWriter out = response.getWriter();
		out.write("name : " + name +&nbsp );
		out.write(" korScore : "+korScore+ &nbsp);
		out.write(" engSore : "+engScore+&nbsp);
		out.write(" totalScore : "+ total);
	}

}

[결과]

Insert title here name
korScore
engScore

[입력후 결과]
name : aaa korScore : 80 engSore : 50 totalScore : 130

profile
Am.Vinch
Dev.Vinch
이전 포스트

D+16::Exception 예외/HTML/CSS/JAVASCRIPT

다음 포스트

D+18::html

0개의 댓글