티스토리 뷰

Servlet JSP

동적인 페이지(서버 페이지)의 필요성_계산기 만들기1

Programmers 2021. 4. 24. 16:52
반응형

정적 웹 페이지
- 서버에 미리 저정된 파일이 그대로 전달되는 웹 페이지
- 서버는 사용자가 요청하는 저장된 웹 페이지를 전달
- 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지만 보게 됨

동적 웹 페이지란?
- 서버에 있는 데이터들을 사용자의 요청에 따라 가공한 후 생성되어 전달되는 웹 페이지
- 서버는 사용자의 요청을 해석하여 데이터를 가공한 후 생성되는 웹 페이지를 전달
- 사용자는 상황, 시간, 요청 등에 따라 달라지는 웹페이지를 보게 됨

계산기 예제(동적 웹 페이지)
- 사용자가 입력하는 값을 서버에서 받아 계산 후 사용자에게 웹 페이지를 전달

calc3.html에서 계산기 모양의 웹 페이지를 만들어주자!

<!-- calc3.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Style 지정 -->
<Style>
input{
	width:50px;
	height:50px;
}
.output{
	height:50px;
	backgroud: #e9e9e9;
	font-size:24px;
	font-width:bold;
	text-align:right;
	padding:0px 5px;
}

	
</Style>

</head>
<body>
	<form action="calc3" method="post">
		<!-- table 생성 -->
		<table>
			<!-- 숫자 출력 창 -->
			<tr>
				<td class="output" colspan="4">0</td>
			</tr>
			<tr>
				<td><input type="submit" name="operator" value="CE"></td>
				<td><input type="submit" name="operator" value="C"></td>
				<td><input type="submit" name="operator" value="BS"></td>
				<td><input type="submit" name="operator" value="÷"></td>
			</tr>
			<tr>
				<td><input type="submit" name="number" value="7"></td>
				<td><input type="submit" name="number" value="8"></td>
				<td><input type="submit" name="number" value="9"></td>
				<td><input type="submit" name="operator" value="X"></td>
			</tr>
			<tr>
				<td><input type="submit" name="number" value="4"></td>
				<td><input type="submit" name="number" value="5"></td>
				<td><input type="submit" name="number" value="6"></td>
				<td><input type="submit" name="operator" value="-"></td>
			</tr>
			<tr>
				<td><input type="submit" name="number" value="1"></td>
				<td><input type="submit" name="number" value="2"></td>
				<td><input type="submit" name="number" value="3"></td>
				<td><input type="submit" name="operator" value="+"></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" name="number" value="0"></td>
				<td><input type="submit" name="dot" value="."></td>
				<td><input type="submit" name="operator" value="="></td>
			</tr>
		
		
		</table>
	</form>

</body>
</html>

계산기 모양 생성

이렇게 간단한 계산기 모양의 웹 페이지를 만들었다.

반응형
저작자표시 비영리 변경금지

'Servlet JSP' 카테고리의 다른 글

동적 페이지 구현_계산기 만들기3(완성)  (0) 2021.04.25
처음이자 마지막으로 동적인 페이지 서블릿으로 직접 만들기_계산기 만들기2  (0) 2021.04.25
redirect 페이지전환  (0) 2021.04.24
Application / Session / Cookie 특징  (0) 2021.04.24
Cookie 옵션 Path  (0) 2021.04.24
댓글
공지사항