[TIL] 국비지원 7일차_1: 구구단과 달력만들기

Mijin·2023년 4월 13일
0

TIL

목록 보기
6/21
post-thumbnail

구디아카데미 7일차.
오늘 시작은 어제 만들었던 구구단의 응용버전과 if문, for문을 활용한 달력만들기이다.

✅구구단 배경색 넣기 (❗코어알고리즘 변경, 추가 없이)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>무지개 구구단</title>
<style>
	table, th, td {
		border: 1px solid #404040;
		text-align: center;
	}
	table {border-collapse: collapse;}
	.red {background-color: #FFA7A7;}
	.orange {background-color: #FFC19E;}
	.yellow {background-color: #FFE08C;}
	.green {background-color: #B7F0B1;}
	.blue {background-color: #B2EBF4;}
	.navy {background-color: #B2CCFF;}
	.purple {background-color: #D1B2FF;}
	.gray {background-color: #D5D5D5;}
</style>
</head>
<body>
	<h1>구구단</h1>
	<table>
		<%
			// tr * 10 = 10행
			for(int i=0; i<10 ; i=i+1) {
		%>
				<tr>
					<%
						// td * 9 = 9열
						for(int dan=2; dan<10; dan=dan+1) { 
						// 코어알고리즘(dan=0; dan<8; dan=dan+1)은 변경하지 않는것이 좋지만 연습을 위해 초기화 숫자를 dan=2로 변경
							
							// dan숫자에 따라 클래스의 이름이 바뀐다
							String color = null;
							if(dan==2) {
								color="red";
							} else if (dan==3) {
								color="orange";
							} else if (dan==4) {
								color="yellow";
							} else if (dan==5) {
								color="green";
							} else if (dan==6) {
								color="blue";
							} else if (dan==7) {
								color="navy";
							} else if (dan==8) {
								color="purple";
							} else if (dan==9) {
								color="gray";
							}
							
							// 첫번째 행은 단수제목, 나머지는 구구단 출력
							if(i==0) {
					%>
								<th class="<%=color%>"><%=dan%></th>
					<%	
							} else {
					%>
								<td class="<%=color%>"><%=dan%> * <%=i%> = <%=dan*i%></td>
					<%
							}
						}
					%>
				</tr>
		<%
			}
		%>
	</table>
</body>
</html>

✅ 구구단 출력

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>guguForm.jsp</title>
</head>
<body>
	<h1>구구단 요청</h1>
	<form action="./guguAction.jsp" method="post">
		<div>
			<select name="dan">
				<%
					for(int i=2; i<10; i=i+1) {
				%>
						<option value="<%=i%>"><%=i%></option>
				<%
					}
				%>
			</select>
		</div>
		<div>
			<button type="submit">구구단 출력</button>
		</div>
	</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8"); // 한글을 받지 않아도 적어주는 것이 좋다
	int dan = Integer.parseInt(request.getParameter("dan"));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>guguAction.jsp</title>
</head>
<body>
<%
	for(int i=1; i<10; i=i+1) {
%>
		<div><%=dan%> * <%=i%> = <%=dan*i%></div>
<%
	}
%>
</body>
</html>

✅달력만들기

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>234월 달력</title>
<style>
	table, th, td {border: 1px solid gray;}
	table {border-collapse: collapse; width: 90%;}
</style>
</head>
<body>
	<h1>2023.4</h1>
	<table> <!-- 요일표시 테이블 -->
		<tr>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</table> <!-- 날짜표시 테이블 -->
	<table> 
		<tr>
		<%
			// 날짜의 최소값~최대값 범위설정
			int minDate = 1; 
			int maxDate = 30;
			
            // 7*6=42개의 셀 반복
            for(int i=0; i<42; i+=1) { // i+=1 --> i=i+1
				if(i%7==0) { // 7의 배수에서 행 바꿈
		%>
					</tr><tr>
		<%
				}
                
				if((i-5)>=minDate && (i-5)<=maxDate) { // 날짜가 1~30일 사이이면 표시 나머지 공백
					if(i%7==0) { // 일요일에만 글자색을 빨간색으로 설정 (만약 토요일이라면 i%7==6)
		%>			
						<td style="color:#FF0000;"><%=i-5%></td>
		<%
					} else {
		%>
						<td><%=i-5%></td>
		<%		
					}
				} else { 
		%>
					<td>&nbsp;</td>
		<%
				}
			}
		%>
		</tr>
	</table>
</body>
</html>
profile
개발자로 가는 길 🏃‍♀️

0개의 댓글